[Typescript] 인터페이스와 배열, 딕셔너리

배열의 인덱싱

인터페이스를 사용해 인덱싱을 설정할 수 있다.

// 인덱싱
interface StringArray {
    [index: number]: string
    // 인덱스를 숫자로 접근할 수 있다
    // Array의 요소들은 string형식만 입력받는다
}
 
var arr: StringArray = ['a', 'b', 'c'];
arr[0] = 10; // string이 아닌 number를 입력했기 때문에 에러가 생성된다

interface에서 배열의 인덱싱을 설정할 수 있다. 위 코드의 StringArray는 숫자로 인덱스를 설정했다.

그래서 StringArray 인터페이스로 만든 arr에 [0]으로 각 요소에 접근할 수 있다.

접근한 값은 string으로 설정되었으므로 arr[0]에 10을 입력하면 number를 입력했기 때문에 에러가 나온다.

 

인터페이스 딕셔너리 패턴

// 딕셔너리 패턴
interface StringRegexDictionary {
    [key: string]: RegExp;
}
// key는 string, value는 정규표현식만 입력받는다.
 
var obj: StringRegexDictionary = {
    cssFile: /\.css$/,
    jsFile: /\.js$/,
}
 
Object.values(obj).forEach(function(value) {
    // value의 타입을 알려준다
})

딕셔너리의 key와 value의 타입을 명시할 수 있다.

생성된 인터페이스를 사용해 만든 객체는 정해진 타입의 key와 value만 입력받고, 규칙에 맞지 않으면 에러를 생성한다.

이렇게 생성된 객체를 사용할 경우 미리 타입을 알 수 있다.

(12번째줄의 value에 마우스를 올려두면 타입이 RegExp라고 알려준다)

 

 

강의

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8/dashboard

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의