[Typescript] Key of, Type of, Generic

타입스크립트 핸드북을 읽고 얻은 내용을 바탕으로 학습한 내용을 기록합니다.

Generic?

클래스 또는 함수에서 사용할 타입을 사용하는 시점에 결정하는 프로그래밍 기법

단일 타입이 아닌 여러 타입에서 동작하는 컴포넌트를 만들 수 있다.

왜 씀

클래스나 함수 사용 시 유연하게 타입을 적용시킬 수 있으면서도

원하는 타입으로 규정할 수 있어 의도한 타입을 보장받을 수 있다.

상속이나 클래스 재정의 없이 타입을 넣어주는 것만으로도

같은 함수 또는 클래스를 재사용할 수 있다.

사용해보기

자바의 제네릭과 사용법 같음.

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

func<string>("hello");
func<number>(354);

기본적인 사용 형태이며 위 처럼 사용하면 어떤 타입도 들어갈 수 있게 됨

타입 한정짓기

기본적으로 제네릭의 타입을 따로 한정지어주지 않으면 any를 포함한 모든 타입이 사용가능해지고

특정한 타입의 속성에 접근할 수 없게 된다.

function func<T>(arg: T): T {
  return arg.length; //Property 'length' does not exist on type 'T'.(2339)
}

extends

제네릭 타입에 extends 키워드를 사용하여 특정한 타입의 하위 타입임을 명시하여

원하는 타입 제약을 추가할 수 있다.

interface Member {
	age: number;
  	name: string;
}

function getName<T extends Member>(member: T) {
	return member.name;
}

getName이라는 함수에 사용될 제네릭 파라미터는 반드시 Member 타입 또는 그 자식이여야 함을 보장받는다.

Keyof

keyof 연산자는 객체 타입에서 객체의 키 값들을 숫자나 문자열 리터럴 유니언을 생성합니다.

function a(p: P) {
    return p;
}
a("x");  // OK
a("y"); // OK
a("z"); // Argument of type '"z"' is not assignable to parameter of type 'keyof Point'

Typeof

javascript의 typeof를 사용

let s = "hello";
let n: typeof s; // => n: string;

변수이름 같은 식별자나 프로퍼티에서만 typeof를 사용할 수 있다.

const a = "hello";
const b = {a: "1", b: 4};
const c = () => {console.log("HELL")};

type A = typeof a; // string;
type B = typeof b; // {a: string; b: number};
type C = typeof c; // () => void
type D = typeof c(); // ';' expected.(1005)

Reference

• typescript generic