[TypeScript] 유틸리티 타입(Utility Types) Utility Types 📌 keyof keyof 연산자는 객체 타입에서 객체의 키 값들로 숫자/문자열 리터럴 유니언을 생성한다. // keyof interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' const uk:UserKey = "name"; 📌 Partial Partial는, 의 모든 프로퍼티를 옵션(선택적)으로 바꿔준다. // Partial interface User { id: number; name: string; age: number; gender: "m" | "f"; } // interface U.. [TypeScript] 제네릭(Generics) - 사용법 및 간단 예제 매개변수의 타입이 바뀌었는데, 동일한 함수를 재사용하고 싶다면 함수 오버로드 유니언 타입을 사용한다. [✅, 아래코드] 📌 예제1 function getSize(arr:number[] | string[]):number { return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); // 3 const arr2 = ["1", "2", "3"] getSize(arr2); // -> Error Generics 제네릭(Generics)을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다. 선언할 때는 타입 파라미터()만 적어주고, 생성하는 시점에 사용하는 타입을 결정한다. : 타입 파라미터, 어떤 타입을 전달 받아 해당 함수에서 사용할 수 있도.. [TypeScript] 클래스 사용- 접근 제한자, readonly, static, abstract 📌 class 작성하기 class Car { // color: string; constructor (public color: string) { // constructor (readonly color:string) { this.color = color; } } 타입스크립트에서 클래스를 작성할 때, 멤버 변수는 미리 선언해주어야 한다. (color: string) 멤버 변수를 미리 선언하지 않는 방법은 접근제한자, 혹은 readonly 키워드를 사용하는 것이다. 접근 제한자(Access modifier) public : 자식 클래스나 클래스 인스턴스에서 접근이 가능하다. (default) private : 해당 클래스 내부에서만 접근 가능 protected : 자식 클래스에서 접근이 가능하지만, 클래스 인스.. [TypeScript] 리터럴, 유니온/교차 타입 - 정의 및 사용 리터럴, 유니온/교차 타입 리터럴 타입(Literal Types) TypeScript에는 문자열과 숫자, 두 가지 리터럴 타입이 있는데 이를 사용하면 문자열이나 숫자에 정확한 값을 지정할 수 있다. userName1처럼 정해진 string 값을 가진 변수를 '문자열 리터럴 타입'이라고 한다. 📌 Literal Types const userName1 = "Bob"; let userName2 = "Tom"; // userName2 = 3 // -> Error : 최초 할당된 값이 string이므로 // Literal + Union // | : Union Type type Job = "policer" | "developer" | "teacher"; interface User { name: string; job.. [TypeScript] 함수 - 함수 정의 방법과 다양한 사용 📌 함수의 기본 사용 function add(num1:number, num2:number): void { // return num1 + num2 console.log(num1 + num2); } function isAdult(age:number): boolean { return age > 19 } 📌 함수와 선택적 매개변수 // 함수의 매개변수도 옵션으로 지정할 수 있다. ✅ 선택적 매개변수 function hello(name?: string):string { return `Hello, ${name || "world"}`; } // 혹은, 매개변수에 default 값을 줄 수도 있다. function hello2(name = "World"):string { return `Hello, ${name}`; }.. [TypeScript] 인터페이스(interface) - 사용 유형과 확장 Interface 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 변수와 인터페이스 type Score = 'A+' | 'A' | 'B' | 'C'; // 값을 특정할 수 있게 된다. interface User { name : string; age : number; gender? : string; readonly birthYear: number; [grade:number] : Score; // number를 key로 하고, string의 value로 하는 property를 여러 개 받을 수 있다. } let user: User = { name : 'xx', age : 30, birthYear : 2000, 1 : 'A', 2 : 'B', 3 .. [TypeScript] 특징 및 기본 타입 - void, never, enum TypeScript를 사용하는 이유? 우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못하며, 타입스크립트를 자바스크립트로 변환해서 로드해야 실행할 수 있다. JavaScript Vs. TypeScript Javascript (동적 언어) 런타임(코드가 실행될 때)에 타입이 결정되고, 오류를 발견한다. 그래서 개발자가 실수하게 되면, 사용자가 오류를 볼 수 있게 된다. ( 안정성 저해 ) Java, TypeScript (정적 언어) 컴파일 타임에 타입이 결정되고, 오류를 발견한다. (* 컴파일 : 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정) 초기에 시간이 걸리더라도 한 번 작성해 두면 안정적이고 빠르게 작업을 진행할 수 있다. 📌 예제1. JavaScript ▶ TypeScript funct.. 이전 1 다음
