TypeScript의 유형 대 인터페이스

Type vs. Interface 는 TypeScript에서 가장 혼란스럽고 흥미로운 것 중 하나입니다. 우리는 그 혼란을 없애려고 노력할 것입니다.

TypeScript는 정적 유형 을 추가하는 JavaScript 위에 생성됩니다. 유형이 있다는 것은 개발자에게 멋진 일입니다. 유형을 작성하는 것은 어렵지만 장기적으로 보면 후회하지 않을 것입니다.

TypeScript에는 숫자, 문자열, 부울 등과 같은 모든 기본 유형이 있습니다. 기본 유형과 함께 TypeScript를 사용하면 사용자 정의 유형을 만들고 유형 별칭 및 인터페이스의 도움으로 개체가 어떻게 보이는지 정의할 수 있습니다. 각기.

유형 별칭 은 유형일 뿐입니다. 사용자 정의 이름(별칭)으로 유형을 생성하면 유형 별칭이 됩니다. 그 이상은 아닙니다.

Interfaces 및 Type Aliases 의 기본 구문을 살펴보겠습니다.

기본 구문

인터페이스

인터페이스는 interface 키워드로 선언됩니다. 아래 인터페이스의 구문을 확인하십시오.

 interface InterfaceName { keyName: typeOfKey ... }

아래 샘플 예제를 살펴보십시오.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

유형 별칭

유형 별칭은 type 키워드를 사용하여 선언됩니다. 아래에서 유형 별칭의 구문을 확인하십시오.

 type TypeName = { keyName: typeOfKey; ... }

아래 샘플 예제를 살펴보십시오.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

인터페이스 와 유형 alias 를 사용하여 Site 에 대한 유형을 만들었습니다. 둘 다 유효하며 예제에 언급된 객체 유형에 사용할 수 있습니다. 위의 예에서는 구문만 다르며 이는 명백합니다.

더 많은 것을 찾기 위해 둘 사이의 차이점을 계속 탐색해 보겠습니다.

튜플

TypeScript의 튜플 은 유형이 지정된 미리 정의된 길이 배열입니다. 각 인덱스의 유형을 정의합니다.

유형 별칭을 사용하여 튜플을 선언할 수 있습니다. 그러나 우리는 인터페이스를 사용하여 그것을 할 수 없습니다. 유형 별칭을 사용하여 수행하는 방법을 살펴보겠습니다.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

위의 예에서 배열의 각 인덱스 요소에 대한 유형을 정의했습니다. 배열에 다른 유형을 지정하면 TypeScript에서 오류가 발생합니다.

인터페이스로 할 수 없나요?

타입 별칭으로 하는 것처럼 정확히 할 수는 없습니다. 인터페이스는 객체 유형에 사용됩니다. 따라서 인터페이스에서 사용하려면 개체 내부에 튜플이 있어야 합니다. 예를 들어 보겠습니다.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

코드를 보면 Interface 내부에 details 라는 튜플이 있습니다. 따라서 인터페이스 내에서 튜플을 사용할 수 있습니다.

마찬가지로 문자열, 숫자, 부울 등과 같은 단일 유형에 대해 유형 별칭을 사용할 수 있습니다. 인터페이스는 개체 유형에 사용되므로 유형 별칭과 같은 단일 유형에 대해 사용할 수 있습니다.

또 다른 흥미로운 점은 인터페이스 에서 유형 별칭 튜플 을 사용할 수 있다는 것입니다. 아래 예시를 확인하세요.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

다음으로 넘어가자.

선언 병합 – 인터페이스

선언 병합은 TypeScript를 사용하여 동일한 이름의 인터페이스 유형을 병합하는 것입니다. 좀 더 명확하게 이해하기 위해 예제를 살펴보겠습니다.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

위의 코드를 보면 같은 이름으로 Interface를 3번 선언했습니다. TypeScript 컴파일러는 동일한 이름을 가진 인터페이스의 모든 유형을 포함하는 단일 객체 유형으로 이 3가지 양식을 모두 컴파일합니다.

geekflare 개체에서 하나의 키를 제거하여 선언 병합을 확인할 수 있습니다. geekflare 에서 키 중 하나를 제거하면 오류가 표시됩니다.

유형 별칭으로 같은 작업을 수행할 수 없습니다. 대부분의 사람들은 그 기능을 사용하지 않습니다. 일반적으로 같은 이름의 인터페이스가 여러 개 있으면 혼란스럽습니다.

별칭 팬을 입력하십시오. 인터페이스의 이 기능에 대해 걱정하지 마십시오.

연장

유형을 선언했다고 가정해 보겠습니다. 이제 이전 유형의 유형과 함께 다른 유형을 선언하려고 합니다. 이 경우 이전 유형을 확장할 수 있습니다. 우리는 인터페이스 와 유형 별칭 모두를 사용하여 이를 수행할 수 있습니다.

둘 다 봅시다.

인터페이스

TypeScript에는 이 사용 사례에 대해 extends 라는 키워드가 있습니다. 인터페이스를 확장하는 데 사용할 것입니다. 예제를 확인해보자.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Site 인터페이스를 확장하여 Geekflare 인터페이스를 만들었습니다. 모든 유형의 Site 는 고유한 유형과 함께 Geeflare Interface에 표시됩니다. geekflare 변수에서 name 키를 제거하여 확인할 수 있습니다.

다음과 같이 여러 인터페이스를 확장할 수 있습니다.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

재미를 위해 2개 이상의 인터페이스로 확장해 보세요. 인터페이스를 사용하여 유형 별칭 을 확장할 수도 있습니다.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

위의 예에서는 하나의 유형만 확장했습니다. 여러 인터페이스를 확장하는 이전 예제와 유사하게 원하는 만큼 확장할 수 있습니다.

유형 별칭을 사용하여 수행하는 방법을 살펴보겠습니다.

유형 별칭

TypeScript에서 교차 유형 을 사용하여 유형 별칭을 확장할 수 있습니다. 예를 들어 보겠습니다.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

교차점(&) 을 사용하여 Geekflare 유형의 founder 와 함께 Site 유형을 확장했습니다. geekflare 변수에서 키 중 하나를 제거하여 테스트할 수 있습니다. 그러면 오류가 발생합니다.

인터페이스와 유사하게 다음과 같이 여러 유형을 확장할 수 있습니다.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

유형 별칭을 확장하는 인터페이스와 동일한 유형 별칭으로 인터페이스를 확장할 수도 있습니다. 아래의 예를 확인하십시오.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

유형 별칭과 인터페이스의 조합을 확장해 보십시오.

구현

이것은 인터페이스와 유형 별칭의 차이가 아닙니다. class 의 기능만 알면 됩니다.

클래스는 동일한 방식으로 인터페이스와 유형 별칭을 모두 구현할 수 있습니다. 둘의 예를 살펴보겠습니다.

인터페이스

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

유형 별칭

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

참고: 한 가지 기억해야 할 점은 클래스와 결합(|) 또는 교차(&) 유형을 구현할 수 없다는 것입니다.

마지막 단어

기사에서 볼 수 있듯이 유형 별칭과 인터페이스를 모두 사용하여 모든 작업을 수행할 수 있습니다. 따라서 어느 것이 다른 것보다 낫다고 엄밀히 말할 수는 없습니다. 결국, 그 중 하나를 선택하는 것은 개인의 선택입니다. 당신은 결국 그것들을 사용하는 당신의 스타일을 개발할 것입니다.

다음으로 Typescript 대 Javascript를 확인할 수 있습니다.

해피코딩