TS - Index types

7749 단어 tsts

인덱스 타입

index type은 타입을 동적으로 사용할 때 이용.

function objectValues(obj, prop) {
  return obj[prop];
}

위의 javascript를 보면 객체 objproperty를 받아서 그 키값의 valuereturn하는 함수가 있다.

이를 typescript로 표현하면

function objectValue<T, K extends keyof T>(obj: T, prop: K): T[K] {
  return obj[prop]; 
}

로 표현할 수 있다.

interface Person {
  name: string;
  age: number;
  hobby: string;
  married: boolean;
}

const hemtory: Person = {
  name: '햄토리',
  age: 10,
  hobby: '프로그래밍',
  married: false
};

위에서 정의된 interface를 이용해 객체를 하나 만들고, objectValues함수에 넣어보면 아래와 같다

const name = objectValue(hemtory, 'name');			// '햄토리'
const age = objectValue(hemtory, 'age');			// 10




1. 인덱스 타입 쿼리 연산자

keyof T인덱스 타입 쿼리 연산자이다.
keyof T를 사용하면 그 객체의 property들을 알 수 있다.

let personProps: keyof Person;

위 코드의 personPropsPerson에서 정의된 타입들의 Union과 같다.
즉, name | age | hobby | married중 하나이다.

기존에 없는 property를 사용할 때 에러가 난다.

let job: PersonProps = objectValue(hemtory, 'job');			// 에러

만약 Person에 새로 job: string 타입이 추가된다면
자동으로 name | age | hobby | marriedjob이 추가되서
name | age | hobby | married | job이 된다.

그냥 어떤 타입들이 있는지 확인할 때만 사용하는건지 용도가 뭔지는 잘 모르겠다.





2. 인덱스 접근 연산자

T[K]인덱스 접근 연산자이다.

function objectValue<T, K extends keyof T>(obj: T, prop: K): T[K] {
  return obj[prop]; 
}

에서 obj[prop]T[K]타입이 된다.
K가 뭔지에 따라 타입이 동적으로 바뀌는 것이다.
KTproperty중 하나의 타입이므로 정의되지 않은 타입이 K로 들어가면 에러가 난다.

const job = objectValue(hemtory, 'job');			// 에러

좋은 웹페이지 즐겨찾기