인터페이스
in Study / Typescript
타입스크립트 타입 인터페이스란?
인터페이스란?
인터페이스는 객체 타입을 정의할 때 사용하는 문법이다.
- 객체의 속성과 속성 타입
- 함수의 파라미터와 반환 타입
- 함수의 스펙 (파라미터 개수와 반환값 여부 등)
- 배열과 객체를 접근하는 방식
- 클래스
객체 타입 정의
interface라는 예약어를 사용해서 인터페이스를 선언할 수 있다.
interface TS {
title: string;
}
let script: TS = { title: '타입스크립트' }
인터페이스를 이용하여 객체의 속성과 들어갈 타입을 정의할 수 있다.
함수 타입 정의
함수에도 interface를 사용해서 타입을 지정해 줄 수 있다.
interface TS {
title: string;
}
function language (lan: TS): TS {
console.log(lan.title)
}
let script: TS = { title: '타입스크립트' };
language(script)
- 파라미터 타입을 콜론 (
:)을 사용해서 타입 표기를 할 수 있다. - 반환 값 타입을 함수 이름 오른쪽에 타입 표기를 할 수 있다.
옵션 속성
인터페이스로 정의된 객체의 속성을 선택적으로 사용하고 싶을 때 옵션 속성을 사용한다.
인터페이스 속성에 ?를 붙여주고 상황에 따라 속성의 사용 여부를 결정할 수 있다.
interface TS {
title: string;
skill?: number;
}
function language (lan: TS): TS {
console.log(lan.title)
}
let script: TS = { title: '타입스크립트' };
language(script)
skill은 사용할 수도 있고 사용 안 할 수도 있다.
인터페이스 상속
extends 예약어를 사용해서 인터페이스를 상속할 수 있다.
interface TS {
title: string;
}
interface level extends TS {
skill: number;
}
let developer: level = {
title: '타입스크립트',
skill: 100
}
extends 키워드를 사용해서 인터페이스의 타입을 상속받아 확장하여 사용할 수 있다.
- 인터페이스를 상속하여 사용할 때는 부모 인테페이스에 정의된 타입을 자식 인터페이스에서 보장해 주어야 한다.
- 상속을 여러 번 할 수 있다.
배열 인덱싱 타입 정의
배열을 인덱싱할 때 인터페이스로 인덱스와 요소의 타입을 정의할 수 있다.
interface StringArray {
[index:number]: string;
}
let languages: StringArray = ['java', 'react', 'typescript']
[index:number]는 속성 이름은 숫자이며 속성의 값은 문자열 타입으로 와야 한다.
- 객체에도 정의할 수 있다.
interface StringArray {
[index:string]: number;
}
let languages = StringArray = {
developer: 100
}
- 객체의 속성에 접근하는 방법은
객체['속성 이름']과객체.속성 이름모두 사용 가능
정확히 속성 이름을 명시하지 않고 속성 이름의 타입과 속성 값의 타입을 정의하는 문법을 인덱스 시그니처 라고 한다.
