[TypeScript] Type, Interface, Class

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

Type Alias

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

//'number | string' Type을 Color라는 Alias (별칭)로 정의
type Color = number | string;

//정의한 Type Alias를 사용
var favoriteColor: Color = 'Red';

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

//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로 변환될 때 어떠한 추가코드를 생성하지 않습니다.

//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을 제약하는 목적으로도 사용할 수 도 있습니다.

//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 인스턴스 생성을 목적으로합니다. 모든 멤버 변수는 초기 값을 가져야 합니다.

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

어떤 것을 사용해야할까?

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

//단순 원시 데이터로 사용될 때는 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();