Typescript - index signatures

Typescript index signatures

Typescript index signatures 란 object 타입에서 각 속성마다 타입을 하나씩 정해주는 것이 아니라 한번에 타입을 지정해줄 수 있는것이다.

// 기존은 속성별로 타입을 정해주었다.
interface StringType {
    name: string,
    age: string,
    location: string
}

// index signature 를 사용하면 모든속성에 타입을 줄 수있다.
interface StringType {
    [key: string]: string,	//[key: string] 이란 모든 문자열로된 속성을 의미
    
}

let user: StringType = {
    name: 'zelord',
    age: '27',
    location: 'Seoul'
}

 

index signature 과 일반 속성은 중복으로 사용할수 있지만 주의해야한다.

// age는 number타입 인데 모든 속성은 string타입 이 되야하서 에러가난다.
interface StringType {
    age: number,
    [key: string]: string,
}

// 모든 속성에 union 타입을 사용하면 속성을 지정해줘서 사용할 수 있다.
interface StringType {
    age: number,
    [key: string]: string | number,
}

 

 

 

반응형

 

 

 

속성명 타입이 number일때도 사용이 가능하다.

interface StringType {
    [key: string]: string	// key가 string타입이여도 괜찮지만 number로 해주는게 좋다.
}

let user: StringType = {
    0: 'zelord',
    1: '27',
    2: 'Seoul'
}

 

속성명이 재귀적으로 중복속성에 대해 타입을 선언할땐 recursive type으로 선언할 수 있다.

interface CssType {
    'css': CssType | number	// 자기 자신인 CssType 타입을 선언해서 중복속성을 선언한다.
    						// 마지막 숫자를 위해 number타입도 선언한다.
}

let css: CssType = {
    'css': {
        'css': {
            'css': 28,
        }
    }
}