TypeScript 시작 자습서 - 객체 유형 - 인터페이스

TypeScript에서 우리는 인터페이스（Interfaces）를 사용하여 대상의 유형을 정의한다.

인터페이스 소개

TypeScript 중의 인터페이스는 매우 유연한 개념으로 유형의 일부 행위를 추상화하는 데 사용할 수 있을 뿐만 아니라'대상의 형상（Shape）'을 묘사하는 데도 사용된다.

간단한 예

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

위의 예에서 우리는 인터페이스Person를 정의했고 이어서 변수tom를 정의했다. 그 유형은 Person이다.이렇게 해서 우리는 tom의 형상이 반드시 인터페이스Person와 일치해야 한다고 제약했다.
정의된 변수가 인터페이스보다 적거나 많은 속성은 허용되지 않습니다

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom'
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

옵션 속성:

때때로 우리는 하나의 모양과 완전히 일치하지 않기를 희망한다. 그러면 선택할 수 있는 속성을 사용할 수 있다.

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

정의되지 않은 속성을 추가할 수 없습니다.

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

모든 속성:

때때로 우리는 인터페이스가 임의의 속성을 허용하기를 원하는데 다음과 같은 방법을 사용할 수 있다.

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

읽기 전용 속성:

때때로 우리는 대상 중의 일부 필드가 만들 때만 값을 부여받기를 원한다. 그러면readonly로 읽기 전용 속성을 정의할 수 있다.

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

읽기 전용 구속조건은 읽기 전용 속성에 처음 값을 부여하는 것이 아니라 객체에 처음 값을 부여하는 경우에 있습니다.

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

tom.id = 89757;

// index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
//   Property 'id' is missing in type '{ name: string; gender: string; }'.
// index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

상례에서 오보 정보는 두 군데가 있는데 첫 번째는 tom에 값을 부여할 때 id에 값을 부여하지 않은 것이다.
두 번째는 tom.id에 값을 부여할 때 속성만 읽을 수 있기 때문에 잘못 보고했습니다.