TypeScript 인덱스 타입

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ'

| 타입 스크립트 인덱스 타입

 

타입을 동적으로 사용할 때 사용하는 방법중 하나인 index type

 

Props 인터페이스에 string 타입의 key 의 타입은 string 입니다. index type은 [ key : string | number ] 둘중 하나의 타입만 가능하며 만약 index type이 아닌 name 처럼 고정된 데이터를 적용 할 경우 name은 반드시 필요하고 key type의 key는 문자,숫자 가 사용 가능하며 데이터는 string type인 값만 저장 가능 합니다. 할당된 index type 은 접근방식이 동적 인것을 확인 할 수 있습니다. p.abc는 실제 없는 key 지만 접근하여도 에러는 발생하지 않습니다.

 

keyof 키워드는 Props의 타입에 존재하는 type들을 union 타입으로 할당한다. 즉 Props에서 사용 가능한 type은

string, number다 index type은 string 또는 number의 타입을 사용할 수 있기때문에 자동으로 

key : string | number 타입으로 적용된다 vs code 를 사용하시면 let keys 변수에 마우스를 올리면 가이드 해줄 것이다.

interface Props {
    name : string
    [key: string] : string;
}

const p: Props = {
    name : 'dog',
    a : 'a',
    b : 'b',
    c : 'c',
    0 : '3',
    1 : 'd',
    2 : 'e'
}

p[0];
p['a'];
p.a;
p.name;
p.abc;
p.ddd;


let keys : keyof Props;

일반적인 interface type을 keyof 를 사용하여 type을 선언하기

User 타입을 keysOfUser 변수에 keyof User type을 선언하면 keysOfUser 변수에는 User type의 key값만을 union type으로 값을 할당 할 수 있다. 즉 keysOfUser = "age" | "hello" | "name" 이 셋중 하나의 값만 적용 가능

 

또한 User type의 key에 해당하는 type을 적용가능하다. helloMethod 의 User type 의 hello key를 type으로 정하면 

오로지 hello 의 type만 정의가 가능하다. 만약 User["age"] type을 부여하면 number 값만 할당 가능!

interface User {
    name : string;
    age : number;
    hello(msg : string) : void;
}

let keysOfUser : keyof User;

let helloMethod : User["hello"];

helloMethod = function(msg : string){

}