Typescript의 유형 및 인터페이스 이해

인터페이스

인터페이스는 무엇입니까:

• 인터페이스는 Typescript에서 객체의 모양이나 구조를 정의하는 방법입니다.
• 주로 객체의 청사진을 설명하고 특정 구조를 준수하는지 확인하는 데 사용됩니다.

주요 특징:

1. 객체 구조에 사용

• 속성, 메서드 및 해당 유형을 정의합니다.

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

2. 지원 확장:

• 인터페이스는 다른 인터페이스를 확장하여 속성을 상속할 수 있습니다.

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

3. 클래스는 인터페이스를 구현할 수 있습니다.

• 클래스가 인터페이스 구조를 준수하도록 강제합니다.

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

출력:

Admin {
  username: 'user1',
  password: '123',
  email: '',
  street: '3/2 street',
  city: 'hcmc'
}

4. 함수 선언 가능

• 인터페이스는 함수 서명을 선언할 수 있습니다.

interface AddUser{
  (name: string) : void;
}

const user : AddUser = (name) => console.log(`Hello ${name}`);

유형

유형은 무엇입니까:

• 유형은 Typescript의 거의 모든 항목에 대해 유형 별칭을 정의하는 유연한 방법입니다.
• 객체, 공용체, 교차점, 튜플 등을 설명할 수 있습니다.

주요 특징:

1. 모든 유형의 별칭:

• 기본 유형, 객체, 심지어 공용체와 교차점도 정의할 수 있습니다.

type UserType = {
  id: string,
  name: string
}
type ID = string | number; //Union type

2. 지원 교차로 유형:

• 여러 유형을 하나로 결합

type UserType = {
  id: string,
  name: string
}

type AddressType = {
  street: string,
  city: string,
}
type UserWithAddress = UserType & AddressType;

3. 지원 튜플:

• 각 요소에 대해 특정 유형으로 고정 길이 배열을 정의할 수 있습니다.

type Coordinates = [number, number];
const point: Coordinates = [10, 20];

4. 다시 열 수 없음:

• 인터페이스와 달리 기존 유형을 다시 선언하거나 확장할 수 없습니다.

class AdminType extends UserType {
  // ERROR: 'UserType' only refers to a type, but is being used as a value here.ts(2693)
}

인터페이스와 유형의 주요 차이점

Aspect	Interface	Type
Usage	Define Object structure	Flexible: can be define objects, unions, intersections, tuples.
Extensibility	Can be extended using extends	Can be combined using & (intersection).
Reopen/Declartion	Can be reopened to add new properties.	Cannot be reopened.
Primitive Type	Cannot represent primitives directly.	Can alias primitive (e.g,.type ID = string);
Union and Typle Support	Not supported.	Fully supported

측면 인터페이스 유형 사용법 객체 구조 정의 유연함: 객체, 공용체, 교차점, 튜플을 정의할 수 있습니다. 확장성 extend를 사용하여 확장 가능 &(교차점)을 사용하여 결합할 수 있습니다. 재개/선언 새 속성을 추가하기 위해 다시 열 수 있습니다. 다시 열 수 없습니다. 기본 유형 프리미티브를 직접적으로 표현할 수 없습니다. 기본 요소에 별칭을 붙일 수 있습니다(예: 유형 ID = 문자열). Union 및 Type 지원 지원되지 않습니다. 완전히 지원

사용자 인터페이스와 유형의 시기

사용 인터페이스:

• 객체의 모양을 설명할 때나 클래스 작업을 할 때.

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

사용 유형:

• 공용체나 튜플 또는 고급 유형 정의를 정의할 때.

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

결합 유형:

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

모범 사례:

1. 객체를 설명하려면 인터페이스를 사용하고 그 외 모든 항목에는 유형을 사용하세요.
2. 합집합이나 교차로와 같은 고급 사용 사례에는 유형을 사용하세요.
3. 참조하는 팀에서 작업하는 경우 일관성을 위해 인터페이스를 선택하세요

위 내용은 Typescript의 유형 및 인터페이스 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!