타입스크립트 핸드북 - 인터페이스

✔︎ 이 글은 아래 2개의 타입스크립트 핸드북을 보며 공부한 내용을 정리한 글입니다.
- 캡틴판교 타입스크립트 핸드북: https://joshua1988.github.io/ts/
- TypeScript-Handbook 한글 문서: https://typescript-kr.github.io/

 

인터페이스 

1. 인터페이스로 타입을 정의할 수 있는 경우는 아래와 같다.

• 객체 스펙 (속성, 속성 타입)
• 함수 스펙 (파라미터, 반환 타입 등)
• 배열과 객체 접근 방식
• 클래스

2. 인터페이스간 상속이 가능하다.

interface Person {
    name: string;
}

interface Author extends Person {
    age: number;
}

3. 인터페이스 다중 상속이 가능하다. 

---

옵션 속성(Optional Properties)

• 인터페이스에 정의된 속성 중 사용하지 않아도 되는 속성
• 속성 끝에 ?를 붙여 정의
• 장점
  • 속성을 선택적으로 적용 가능
  • 인터페이스에 속하지 않는 프로퍼티의 사용을 방지

interface Person {
    name: string;
    age?: number; // 옵션 속성
}

let gildong = {
    name: 'Gildong'
}

function logName(person: Person) {
    console.log(person.name);
}

logName(gildong); // Gildong 출력

 

읽기 전용 속성 (Readonly properties)

• 객체를 처음 생성할 때만 값을 설정할 수 있는 속성.
• readonly 를 붙여 정의
• 읽기 전용 배열 정의: ReadonlyArray<T>

function Person {
    readonly id: number;
    name: string;
}

let gildong: Person = {
    id: 1,
    name: 'gildong'
};

gildong.id = 4 // 에러 발생

// 읽기 전용 배열
let arr: ReadonlyArray<number> = [1,2,3];

 

초과 프로퍼티 검사 (Excess Property Checks)

정의한 속성 외에 다른 속성을 가질 가능성이 있다면 아래와 같이 정의할 수 있다.

interface Person {
    name: string;
    [propName: string]: any;
}​

 

---

함수 타입

인터페이스로 함수 타입 정의도 가능 (인자, 반환 값 등)

interface add {
    (number1: number, number2: number): number;
}

let addNumber: add;
addNumber = function(number1: string, number2: string) {
    return number1 + number2;
}

 

클래스 타입

interface Person {
    name: string;
    write(content: string): void;
}

class Author implements Person {
    name: string = 'gildong';
    write(content: string) {
    	console.log(content);
    }
    
    constructor() {}
}