TypeScript 객체 유형 - 인터페이스

인터페이스

TypeScript에서 인터페이스(Interfaces)를 사용하여 객체 유형을 정의합니다.
인터페이스는 일련의 추상적인 방법의 성명으로 일부 방법 특징의 집합이다. 제3자는 이 추상적인 방법을 호출하여 구체적인 유형이 구체적인 방법을 집행하도록 할 수 있다.
TypeScript에서 인터페이스는 클래스의 일부 행위를 추상화하는 데 사용할 수 있을 뿐만 아니라 대상의 형상 (Shape) 을 설명하는 데도 사용할 수 있다
예를 들면 다음과 같습니다.

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

let faker: Person = {
    name: 'Faker',
    age: 25
};

여기에 인터페이스 Person을 정의했고, 이어서 변수 Faker를 정의했다. 그 유형은 Person이다.이렇게 해서 faker의 모양이 인터페이스Person과 일치해야 한다는 것을 제약했습니다.
참고 커넥터 일반 대문자
 
정의된 변수가 인터페이스보다 적은 속성은 허용되지 않습니다.

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

let faker: Person = {
    name: 'faker'
};

// 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 faker: Person = {
    name: 'faker',
    age: 25,
    gender: 'male'
};

// 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'.

따라서 값을 부여할 때 변수의 형상은 반드시 인터페이스의 형상과 일치해야 한다
 

2. 선택 가능한 속성

옵션 속성이란 이 속성이 존재하지 않을 수 있다는 것을 말한다. 우리가 모양과 완전히 일치하지 않기를 원한다면 옵션 속성을 사용할 수 있다.

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

let faker: Person = {
    name: 'Faker'
};
interface Person {
    name: string;
    age?: number;
}

let faker: Person = {
    name: 'Faker',
    age: 25
};

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

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

let faker: Person = {
    name: 'Faker',
    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'.

 

3. 임의의 속성

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

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

let faker: Person = {
    name: 'Faker',
    gender: 'male'
};

[propName:string]을 사용하여 속성 취string 유형의 값을 정의합니다.
 
주의해야 할 것은 속성이 정의되면 속성 및 선택적 속성을 결정하는 유형은 해당 유형의 하위 집합이어야 합니다.

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

let faker: Person = {
    name: 'Faker',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

상례에서 임의의 속성의 값은string일 수 있지만 선택할 수 있는 속성age의 값은number입니다.number는string의 하위 속성이 아니기 때문에 잘못 보고했습니다
주의: 인터페이스에 임의의 속성만 정의할 수 있습니다
 
인터페이스에 여러 유형의 속성이 있는 경우 모든 속성에서 결합 유형을 사용할 수 있습니다.

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

let faker: Person = {
    name: 'Faker',
    age: 25,
    gender: 'male'
};

 

4. 읽기 전용 속성

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

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

let faker: Person = {
    id: 89757,
    name: 'Faker',
    gender: 'male'
};

faker.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

상례에서readonly가 정의한 속성 id를 사용하여 초기화한 후에 값을 부여받았기 때문에 오류를 보고합니다
 
읽기 전용 구속조건은 읽기 전용 속성에 처음 값을 부여하는 것이 아니라 객체에 처음 값을 부여하는 경우에 있습니다.

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

let faker: Person = {
    name: 'Faker',
    gender: 'male'
};

faker.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.

전례에서 오보 정보는 두 군데가 있다.
1、faker에 값을 부여할 때 id에 값을 부여하지 않음
2、faker를 주고 있어요.id가 값을 부여할 때, 속성만 읽기 때문에 잘못 보고했습니다
 

5. 결합 유형과 인터페이스

다음 예에서는 인터페이스에 결합 유형을 사용하는 방법을 보여 줍니다.

interface Person { 
    name:string; 
    words:string[]|string|(()=>string); 
} 
 
// words  
let faker:Person = {name:"Faker",words:"Hello"}; 
console.log(faker.words)  
 
// words  
faker = {name:"Faker",words:["Hello","World"]}; 
console.log(faker.words[0]); 
console.log(faker.words[1]);  
 
// words  
faker = {name:"Faker",words:()=>{return "**Hello World**";}}; 
 
let fn:any = faker.words; 
console.log(fn());

출력 결과는 다음과 같습니다.

Hello
Hello
World **Hello World**
 

6. 인터페이스와 그룹

인터페이스에서 우리는 수조의 인덱스 값과 요소를 다른 형식으로 설정할 수 있으며, 인덱스 값은 숫자나 문자열일 수 있다

interface Names { 
   [index:number]:string 
} 
 
let list1:Names = ["Faker",1,"Bang"] //   1   string  

interface Ages { 
   [index:string]:number 
} 
 
let list2:Ages; 
list2["Faker"] = 22  //   
list2[2] = "ten"     //  

 

7. 인터페이스 계승

인터페이스 계승이란 인터페이스가 다른 인터페이스를 통해 자신을 확장할 수 있다는 것이다. Typescript는 인터페이스가 여러 인터페이스를 계승할 수 있도록 허용하고 계승은 키워드 extends를 사용한다.
 

1. 단일 인터페이스 상속

단일 인터페이스 상속 구문 형식:

Child_interface_name extends super_interface_name

 
예:

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
let faker = {}; 
faker.age = 22 
faker.instrument = "piano" 
console.log(" : " + faker.age)
console.log(" : " + faker.instrument)

출력:
나이:22 좋아하는 악기:피아노
 

2. 다중 인터페이스 상속

다중 인터페이스 상속 구문 형식:

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

 
예:

interface IParent1 { 
  v1:number 
} 
 
interface IParent2 { 
  v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
let faker:Child = { v1:22, v2:23} 
console.log("value 1: " + faker.v1 + " value 2: " + faker.v2)

출력:
value 1: 22 value 2: 23