[TIL] TypeScript (2)

Keyof Type Operator

객체 유형을 사용하여 키의 문자열 또는 숫자 리터럴 결합을 생성한다.

type Point = {x: number; y: number};
type P = keyof Point; // x | y

💡 짚고 넘어가기

• object에 사용하면 object가 가지고 있는 모든 key 값을 union type으로 합쳐서 내보내준다.
• object에 들어있는 key를 사용해서 새로운 타입을 만들 때 사용하는 연산자이다.

type IndexSignature = {
    [k: string]: number;
}

type Index = keyof IndexSignature // string | number

const obj: IndexSignature = {
    a: 1,
    b: 2
};

💡 짚고 넘어가기

• JavaScript 오브젝트키가 항상 문자열에 강제되기 때문에 obj[0]은 항상 obj[’0’]과 같기 때문이다.

Typeof Type Operator

• JavaScript에서도 이미 가지고 있는 연산자
• 해당 변수의 type을 확인할 수 있는 연산자

let s = 'hello';

console.log(typeof s) // string

다른 타입 연산자와 조합하여 Typeof를 사용하면 다양한 패턴을 쉽게 표현할 수 있다.

type Predicate = (x: unknown) => boolean;
type K = ReturnType<Predicate>; // boolean;

💡 짚고 넘어가기

• ReturnType: 타입이나 함수의 반환 타입으로 정의한다.

function f() {
    return {x: 10, y: 3};
}

type P = ReturnType<typeof f>
// type P = {x: number, y: number};

💡 짚고 넘어가기

• 만약에 함수에도 ReturnType을 적용하고 싶다면! 함수명을 넣지말고 함수에 typeof를 적용해야 한다.

제한사항

TypeScript는 사용할 수 있는 식의 종류를 의도적으로 제한한다.

let shouldContinue: typeof msgbox("Are you sure you want to continue?");

Generics

‘재사용’ 가능한 컴포넌트를 생성하는 도구 중 하나

💡 짚고 넘어가기

• 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있다.
• 사용자는 Generic을 통해 여러 타입의 컴포넌트나 자신만의 타입을 사용할 수 있다.

선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법

Generic 기본 문법

function identity<T>(arg: T): T{
    return arg;
}

identity<string>('Hello World!');
identity('Hello World!'); // 타입 추론

• T는 Type의 약자로 Generic을 선언할 때 T(타입 변수)를 관용적으로 사용한다.

• 함수가 생성(호출)되는 시점에 string 타입이 명시된다.

• 또한 paremeter에 대한 타입과 return에 대한 타입이 동일한지 검증할 수 있다.

💡 짚고 넘어가기
Generic을 사용해야 하는 이유

• Generic이 없다면 타입을 미리 지정하거나, any를 이용해서 타입을 작성해야 한다.
• 타입을 미리 지정하게 되면 범용성이 떨어진다.
  any를 사용하면 타입을 제한할 수 없고, parameter와 return의 타입을 확인할 수 없다.
• 재사용이 가능하지 않거나, 타입에 대한 검증을 할 수 없기 때문에 Generic을 사용한다.

제네릭 타입 변수 작업 (Working with Generic Type Variables)

function identity<T>(arg: T): T {
    console.log(arg.length); // error 발생
    return arg;
}

💡 짚고 넘어가기

• 만약 타입변수 T에 배열이 들어왔다면 error가 발생하지 않지만
  타입변수 T는 정해지지 않은 타입이기 때문에 .length 프로퍼티가 유효하다고 판단할 수 없다.
• T(타입 변수)에 대한 세부적인 변수 타입을 지정한다.

function identity<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}

• Generic 함수 identity는 타입변수 T와 T 배열 인수 arg를 취하고 T 배열을 반환한다.

제네릭 타입 (Generic Types)

• 함수 자체의 Type과 Generic Interface를 만들 수 있다.

function identity<T>(arg: T): T {
 return arg;
}

let myIdentity: <T>(arg: T) => T = identity;
let myIdentity: { <T>(arg: T): T } = identity;

• 제네릭 타입을 객체 리터럴 타입의 함수 호출 시그니처로 작성할 수도 있다.

제네릭 인터페이스 (Generic Interface)

interface GenericIdentity<T> {
    (arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let checkIdentity: GenericIdentity = identity;
let checkIdentity: GenericIdentity<number> = identity; // type 강조

• 만약 interface에 type을 강조하고 싶다면 변경 가능하다. (number)

제네릭 클래스 (Generic Class)

class GenericMath<T> {
    pi: T;
    sum: (x: T, y: T) => T;
}

let math = new GenericMath<number>();

math.pi = 3.14;
math.sum = (x, y) => {return x + y};

• 제네릭 인터페이스와 비슷한 형태를 가지고 있다.

제네릭 제약조건 (Generic Constraints)

• 특정 타입들로만 동작하는 제네릭 함수를 만들고 싶을 때 사용한다.

function identity<T>(arg: T): T {
    console.log(arg.length); // error 발생
    return arg;
}

• 제약조건 명시

interface Lengthwise {
    length: number;
}

function identity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length)
    return arg;
}

identity("string")
identity({ length: 10, value: 3})

💡 짚고 넘어가기

• 인터페이스를 통해 제약조건을 명시할 수 있다.
• extends를 사용해서 type을 확장할 수 있다.
• .length 프로퍼티가 없는 type을 사용하려면 length에 대한 명시를 해줘야 한다.