Interface
인터페이스는 상호 간에 정의한 약속, 혹은 규칙을 말한다.
- 객체의 스펙(속성과 속성 타입)
- 함수의 스펙(파라미터, 반환타입 등)
- 배열과 객체를 접근하는 방식
- 클래스
let student = { name: 'Andrew', age: 17};
function logName(obj: { name: string }) {
console.log(obj.name); // Andrew
}
logAge(student); // Andrew위는 { name: string } 처럼 age를 속성으로 갖는 객체가 logName()의 함수에서 받는 인자의 형태이다. 하지만 가독성이 떨어지는 것 같다. 만약 interface를 사용하게 된다면?
interface studentName {
name: string;
}
function logName(obj: studentName) {
console.log(obj.name);
}
let student = { name: 'Andrew', age: 17};
logAge(student);이런 식으로logName()의 인자는 studentName 이라는 타입이다.
- 명시적
- 인터페이스에 정의되어 있지 않은 속성에 대해 인지
예시
interface store {
name: string;
address?: string;
}
function brewBeer(obj: store) {
console.log(obj.from); // Error: Property 'from' does not exist on type 'store'
}👍 인터페이스의 간편함
인터페이스를 인자로 받아 사용한다면, 항상 인터페이스의 속성 개수와 인자로 받는 객체의 속성 개수를 일치시키지 않아도 된다
-> 인터페이스에 정의된 속성, 타입 조건만 만족한다면 속성 개수, 속성 선언 순서 상관 X
인터페이스 확장 (extends)
클래스와 마찬가지로 인터페이스도 인터페이스 간 확장이 가능하다
여러 개의 인터페이스를 extends 하는 것이 가능하다. (클래스는 반드시 하나만)
interface Person {
name: string;
age: number;
}
interface Programmer {
favoriteProgrammingLanguage: string;
}
interface Developer extends Person {
skill: string;
}
interface Korean extends Person, Programmer { // 두개의 인터페이스를 받아 확장
isLiveInSeoul: boolean;
}
let fe: Developer = { name: 'josh', age: 33, skill: 'TypeScript' };
const person: Korean = {
name: '홍길동',
age: 33,
favoriteProgrammingLanguage: 'kor',
isLiveInSeoul: true,
};readonly
아래와 같이 readonly 속성을 앞에 붙이면, 처음 생성시에만 값을 할당하고, 그 이후에는 변경이 불가능하다.
interface store {
readonly name: string;
address: string;
}참고
한 걸음 한 걸음 쌓아가자😎