Typescript - Class Type & Interface

Typescript Class Type

Typescript 에서 Class Type 을 선언하는 방법은 이러하다.

class PetClass {
    name: string;	// 변수의 타입을 지정한다.
    constructor(paramName: string) {	// 파라미터의 타입을 지정한다.
        this.name = paramName;
    }
    
    classFn(paranX: string) {   // 클래스 내 함수도 타입을 선언 할 수 있다.
        console.log('Hello ' + paranX);
    }
}

let pet1 = new PetClass('bomi');	//	지정된 파라미터 타입의 값만 들어갈수있다.
console.log(pet1);

pet1.classFn('bomi');   //  함수 파라미터 타입의 값만 들어갈수있다.

let pet2 = new PetClass('ruru');
console.log(pet2);

 

 

 

 

반응형

 

 

 

Typescript Interfacee Type

Typescript 에서 Interfacee Type 을 선언하는 방법은 이러하다.

오브젝트를 타입선언할때 type 키워드를 사용해서 선언할 수 있지만 interface로 선언할 수 있다.( class 선언방식 유사)

//	기존 type 선언 방식
type Square = { color: string, width: number };
let squareBox: Square = { color: 'blue', width: 100 };

//	interface로 선언 방식
interface Square = { color: string, width: number };	// interface 키워드로 선언
let squareBox: Square = { color: 'blue', width: 100 };

 

interface 변수를 선언할 때 통상 대문자로 사용을 한다.

type과 interface 의 차이점은 interface의 타입은 extends 로 복사가 가능하다.

type Phone = {
    name: string
}

type IPhone = { version: number } & Phone;	//	& 를 사용하여 두 타입의 값을 사용한다.

interface Phone {
    name : string
}

interface IPhone extends Phone {	// extends 를 사용하여 두 타입의 값을 사용한다.
    version: number;
}

 

&(intersection)의 뜻은 왼쪽 타입도 만족하고 오른쪽 타입도 만족하는 타입을 선언하는것이다.

type은 중복선언이 불가능하지만 interface는 중복선언이 가능하다. 

type Book = { name: string }	// type 선언
type Book = { page: string }	// type 재선언이 불가능하다. 에러처리된다

interface Book {	// interface로 Book 선언
    name: string
}

interface Book {	// interface로 Book 재선언
    page: number
}

// interface로 재 선언 하게되면 두 속성값을 사용할 수 있다. (자동으로 extends 된다)
// Book {name: string, page: number} 랑 같다.

 

interface 를 재 선언하면 자동으로 extends 가 되는것이다. (합쳐짐)

외부라이브러리를 사용 할 경우 커스터마이징을 하기위해 interface로 추가하여 자유롭게 사용할 수 있다.

object 타입을 선언할때 interface를 사용하는걸 추천한다.

 

type 으로 중복속성을 선언할 때는 에러를 나타나지 않고 변수를 선언한 후 타입을 적용할때 에러가 나타나지만

interface 로 extends 할 때 중복속성을 사용하게 되면 extends에서 에러를 나타내준다.

 

type Phone = { name: string }
type IPhone = { name: number } & Phone;	// & 기호로 타입을 합칠 시 에러가 나타나지않는다.
//	& 기호는 합치는 개념보단 둘 다 만족하는 타입을 선언하는것이다.

let myPhone: IPhone = { name: 'kim' };	// 중복속성의 에러를 잡아준다


interface User {
    name: string	// string 타입
}

interface Job extends User {	// 중복속성의 타입이 다르면 에러처리한다.
    name: number	// number타입
}