TypeScript 인터페이스와 유형의 차이점

TypeScript에서 사용자 정의 유형을 두 가지 다른 방법으로 선언할 수 있다는 것을 눈치채셨을 것입니다. 하나는 interface 키워드를 사용하고 다른 하나는 type 키워드를 사용합니다. 따라서 한 가지 일을 수행하는 데 두 가지 방법이 있고 혼자가 아닌 이유가 궁금할 수 있습니다. declaring custom types in TypeScript에 대한 내 가이드에서 인터페이스와 유형을 사용하는 방법에 대해 이미 다뤘지만 이들이 어떻게 다른지 조금 더 살펴보겠습니다.

1. 인터페이스 확장 구문은 유형과 다릅니다.

TypeScript에서 유형을 정의하면 이후에는 확장할 수 없습니다. 예를 들어 방금 만든 이 사용자 정의 유형을 고려하십시오.

type user = {
    name: string,
    age: number
}

주소를 정의한 후 갑자기 주소를 추가하고 싶다는 생각이 들면 다음 구문을 사용하여 이 작업을 수행할 수 있습니다.

type userWithAddress = user & {
    address: string
}

인터페이스를 사용하여 동일한 작업을 수행할 수 있지만 구문은 약간 다릅니다.

interface user {
    name: string;
    age: number;
}
interface userWithAddress extends user {
    address: string
}

이제 userWithAddress 에는 user 의 모든 속성과 address 라는 추가 속성 하나가 포함됩니다.

유형을 확장하는 이 두 가지 방법의 유일한 차이점은 충돌을 처리하는 방법입니다. 예를 들어 인터페이스를 확장하고 이미 정의된 속성을 언급하면 ​​오류가 발생합니다. 예를 들어 다음은 작동하지 않습니다.

interface user {
    name: string;
}
interface newUser extends user {
    name: number;
}

한편 type 를 사용하면 다음과 같이 할 수 있습니다.

type user = {
    name: string
}

type newUser = user & {
    name: number
}

이렇게 하면 오류가 발생하지는 않지만 예기치 않은 결과가 발생할 수 있으므로 필요한 경우 피해야 합니다. 예를 들어 위에서 name 속성은 never 유형으로 축소됩니다. 유형은 never가 동시에 string 및 number일 수 있기 때문입니다. :)

2. 인터페이스를 병합할 수 있습니다. 유형은 병합할 수 없습니다.

같은 줄을 따라 types는 병합할 수 없지만 interfaces는 여러 번 선언하면 병합할 수 있습니다. 예를 들어 유형이 있으면 다음과 같이 할 수 없습니다.

type cat = {
    name: string
}
type cat = {
    color: string
}

실제로 위의 코드는 오류를 발생시킵니다. 한편 interface 를 사용하면 그렇게 할 수 있으며 두 선언을 병합합니다. 따라서 아래 예제에서는 cat 및 name 속성을 모두 포함하는 color라는 유형을 생성합니다.

interface cat {
    name: string;
}
interface cat {
    color: string;
}

3. 인터페이스는 프리미티브를 확장할 수 없습니다.

string 와 같은 기본 유형의 별칭이 될 수 있는 유형을 만들 수 있지만 interface는 이렇게 할 수 없습니다. 예를 들어 항상 문자열 유형인 myName 라는 유형을 생성하려는 경우 다음과 같이 할 수 있습니다.

type myName = string;

여기서 myName는 string의 별칭이 됩니다. 따라서 기본적으로 myName 대신 string를 쓸 수 있습니다. 한편, interface에게는 이 능력이 없습니다. 다음은 작동하지 않으며 작동하지 않습니다.

interface myName extends string {

}

4. 유형은 공용체를 만들 수 있지만 인터페이스는 만들 수 없습니다.

type 키워드를 사용하여 공용체 유형을 만들 수 있지만 인터페이스로는 그렇게 할 수 없습니다. 예를 들어, 여기서 userId는 string 또는 number일 수 있습니다.

type userId = string | number

한편, 인터페이스는 객체의 모양이나 유형을 정의하기 때문에 interface 로는 위의 작업을 수행할 수 없습니다.

결론

보시다시피 type 와 interface 종류의 주요 차이점은 사용 환경에 따라 다릅니다. interface 의 거의 모든 기능은 type 에서 사용할 수 있으므로 더 자주 찾을 수 있습니다. type로 이동합니다. 그러나 일반적으로 선호도 또는 코드베이스에서 가장 잘 작동하는 것을 기반으로 하는 경향이 있습니다.

어쨌든 interface와 type가 모두 동일한 작업을 수행하는 두 가지 방법이므로 처음 생각하는 것만큼 혼란스럽지 않으므로 안심하십시오!