[TypeScript] Type, Interface, Class

TypeScript에는 Interface, Class와 더불어 Type을 제공합니다. 각각의 차이에 대해 간단히 정리합니다.

Type Alias

변수 Type 정의에 Alias (별칭)을 부여하는 것을 말합니다. 변수 Type을 별칭으로 정의해두고 재사용하기 위해 사용합니다.

1 2 3 4 5

//'number | string' Type을 Color라는 Alias (별칭)로 정의 type Color = number | string;   //정의한 Type Alias를 사용 var favoriteColor: Color = 'Red';

Object나 Function의 변수 Type도 Alias로 정의하고 재사용 할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

//Object에 대한 Type Alias정의 //Interface 선언과 유사하지만 '=' 기호를 사용한다는 차이가 있음 type People = {     Name: string; };   //Type Alias 확장 type Student = People & {     Major: string; };   //Type Alias 사용 var people : People = {     Name: 'Kim, Sun mi', }; var student : Student = {     Name: 'Na, Moon su',     Major: 'Computer Science' };   //함수에 대한 Type Alias 정의 및 사용 type OnError = (id: number, error: string) => boolean; function downloadFile(id: number, onError: OnError) {     ... }   //Collection에 대한 Type Alias 정의 및 사용 type Data = [number, string]; var user : Data = [1, 'HongGilDong'];

Type Alias는 변수 Type을 정의하고 재사용하는 기능만 제공합니다. 따라서 JavaScript로 변환될 때 어떠한 추가코드를 생성하지 않습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//Type Alias 정의 type Phone = string; type Address = {     city: string;     zipCode: string; };   //Type Alias 사용 var phone: Phone = '000-111-2222'; var address: Address = {     city: 'Seoul',     zipCode: '00000' };   //생성된 JavaScript //Type Alias는 변수 Type에 다른 별칭을 부여한 것임 //따라서 일반적인 변수 Type과 사용방법이 다르지 않으며, 생성되는 JavaScript 코드도 동일함 var phone = '000-111-2222'; var address = {     city: 'Seoul',     zipCode: '00000' };

Interface

일반적인 객체지향언어의 interface의 특성을 제공합니다. 또 Type Alias 처럼 Object의 Type을 제약하는 목적으로도 사용할 수 도 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//Interface 정의 interface IPerson {     Name : string;     Age : number; }   //상속과 구현 interface IProfessor extends IPerson { } class Student implements IPerson { }   //TypeScript에서 interface는 Type 제한 목적으로 사용할 수 있다 var student : Student = {     Name : 'SDK',     Age : 20, };

Class

Class 인스턴스 생성을 목적으로합니다. 모든 멤버 변수는 초기 값을 가져야 합니다.

1 2 3 4 5 6 7 8 9 10

class Human {     Name : string;     Age : number;     constructor() {         //모든 멤버변수는 초기화 되어야 함         this.Name = 'Hong';         this.Age = 0;     } } var human = new Human();

어떤 것을 사용해야할까?

Type Alias는 단순히 Type을 정의하고 제한하는 목적일 때 적합합니다. 상속이나 확장이 불필요하고 단순 원시 값으로 사용되는 경우에 사용합니다. Type Alias는 심플하지만 확장성에서 제한이 있습니다. 만약 객체지향프로그래밍의 객체를 구현하는 경우라면 interface나 class 사용을 권장합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//단순 원시 데이터로 사용될 때는 Type Alias 사용 type AddressDto = {     city: string;     zip: number; }; var addrDto: AddressDto = { city:'Seoul', zip:11111 }; saveAddress(addrDto);     //객체지향프로그래밍 상의 객체나 인터페이스를 의미한다면 interface, class 사용 class Address {     City: string;     Zip: number;     constructor(city: string, zip: number) {         this.City = city;         this.Zip= zip;     }     print() : void {         const msg = '[' + this.Zip + '] ' + this.City;         alert(msg);     } } var address = new Address('Seoul', 11111); address.print();