Typescript "Type" 키워드 사용하기

Type(타입 키워드)?

 

 

프로그래머의 개별적 의도에 맞는 타입을 선언하는 기능을 제공하는 문법이다.

 

type typeName = 타입형태

 

 

 

왜 필요한가?

타입스크립트의  "타입체크"는  "프로그래머의 의도"에 맞는 타입의 값만을

집어넣게 해 주는 강력한 기능이다.

 

타입스크립트의 존재 이유 그 자체라고 할 수 있다.

 

하지만 타입스크립트가 boolean, number, string 등등의 "기본타입"만을 체크해 준다면

자바스크립트의 실행과정에 발생하는 괴상한 오작동은 막을 수 있지만,

개발자에게 자료의 구조 및 요구사항에 대한 힌트를 주어 실질적으로 개발을 돕기엔 부족하다.

 

그래서 타입스크립트는 임의의 "타입"을 직접 정의할 수 있게 해 주고,

그러한 커스텀 타입에 대한 타입체크 기능도 제공하고 있다.

 

 

Type키워드 응용하기

1. type alias (타입 애일리아스): 타입별칭 붙이기

이미 존재하는 타입에 다른 별칭을 붙여줄 수 있다.

//number타입에 Kilogram이라는 별칭을 부여했다.

type Kilogram = number;


let meatWeight: Kilogram;
meatWeight = 8;


//사용방법은 number와 같지만, 
// 원하는 타입명을 지정해줄 수있다.

//number를 사용한 원래 코드

let meatWeight: number;
meatWeight = 8;

 

 

유니온타입 포스트:

union type(유니온 타입)과 type guard(타입가드)란? 개념 및 Typescript예제

 

2. Union type(유니온타입)을  타입으로 지정하기

 

매개변수등에 대입될 유니온타입을 미리 타입으로 지정하여

하나의 타입으로 사용할 수 있다.

// Union type을 타입으로 지정
// 선택지에 string, number등 기존의 타입을 사용했다.

type Adress = string | number

// Union type의 지정타입은
특정 "값" 이 될수도 있다.

// 문자리터럴

type DonenessLevel = "Rare" | "Medium-Rare" | "Medium" | "Medium-Well" | "Well-Done" | "Extra-Well-Done"
type ImportedFrom = "USA" | "Korea" | "Japan" | "Australia"
type Sauce = "Fried" | "spicy sauce"

// 문자 리터럴과 숫자 리터럴
type Quality = "A" | 1 | 2 | 3

//boolean (부울리안)
type IsDelicious = true | false

 

3. Object(오브젝트)의 구성요소 지정

 

오브젝트의 구조를 지정하는 타입을 만들 수 있다.

오브젝트 내부 요소들도 커스텀타입으로 선언할 수 있다.

//오브젝트 구성요소를 지정하는 타입
//내부 요소들도 전부 커스텀타입으로 지정해주었다.

type Steak = {
    contry: ImportedFrom,
    doneness: DonenessLevel,
    weight: Kilogram,
    store: Adress,
    quality: Quality,
    isDelicious: IsDelicious
}

//Steak타입을 갖는 오브젝트

const meat: Steak = {
    contry : "USA",
    doneness : "Well-Done",
    weight : 7,
    store: "batcave",
    quality: "A",
    isDelicious: true
}

타입체크기능. 어떤 값이 들어갈 수 있는지 보여준다.

 

4. 커스텀 타입끼리 연산을 통해 새로운 타입을 선언

 

인터섹션 연산("&")을통해 두 타입의 요소를 모두 갖는 새로운 타입을 정의할 수 있다.

//Steak에서 한가지만 바꾼 Chicken 타입
//doneness(익은정도) 대신 sauce가 들어간타입이다. 

type Chicken = {
    contry: ImportedFrom,
    sauce: Sauce,
    weight: Kilogram,
    store: Adress,
    quality: Quality,
    isDelicious: IsDelicious
}

//intersection연산 "&"으로 정의된 새로운타입
type Intersection = Chicken & Steak

// 새로정의된타입:
//Steak의 doneness와 Chicken의 Sauce 둘다 존재한다.

let foodSet: Intersection = {
    contry: "USA",
    doneness: "Extra-Well-Done",
    sauce: "Fried",
    weight: 5,
    store: 7,
    quality: 1,
    isDelicious: false
}

 

5. 함수의 call signature(호출시그니처) 지정

 

함수의 호출시그니처를 커스텀 타입으로 지정할 수 있다.

 

호출 시그니처를 타입으로 갖는 변수는 새로운 함수를 저장할 수 있지만,

호출 시그니처의 형태는 바꿀 수 없다.

//호출시그니처를 저장한 타입.
type arrowCS = (a:number, b:number) => number

let arrowadd: arrowCS = (a,b) => a+b;


// arrowCS타입만 맞춰준다면 얼마든지 다른 함수를 저장할 수 있다.

arrowadd = (a,b) => a * b;
arrowadd = (a,b) => a / b;
arrowadd = (a,b) => a - b;

변수에 다른 타입의 값을 저장하면 오류가 출력된다.

 

6. 인덱스를 지정하기

 

object에 저장될 데이터쌍의 타입을 지정해 줄 수 있다.

// List 타입을 갖는 오브젝트는 number: string 순서쌍만 저장할 수있다.


type List = {
    [key: number]: string;
  };

let listOfDinner: List = {
    1:"chicken",
    2:"steak"
}

 

 

 

Type키워드로 못하는 것

 

타입은 다른 타입을 상속받을 수 없다.

 

앞서 살펴본 것처럼 type키워드로 선언한 타입을 이용해서 또다시 새로운 타입을 선언할 수 있다.

인터섹션연산(&)이나 유니온타입선언(|)을 통해 새로운 타입을 선언하는 게 바로 그것이다.

 

 

하지만 interface(인터페이스)나 class(클래스)처럼

"extends"나 "implements" 키워드를 사용하여 다른 타입의 요소들을 직접 상속받을 순 없다.

 

 

* 인터페이스나 클래스는 "extends"나 "implements" 키워드를 이용하여 "type"을 상속받을 수 있다.

//Steak와 Chicken "타입" 을 상속받는 클래스
class cocoa implements Steak, Chicken {
    
    constructor(
        public contry: "USA",
        public doneness : "Well-Done",
        public weight : 7,
        public store: "batcave",
        public quality: "A",
        public isDelicious: true,
        public sauce: "Fried"){}

}

//Steak와 Chicken "타입"을 상속받는 인터페이스
interface kakao extends Steak, Chicken {

}

인터페이스 포스트:

interface(인터페이스) 개념 및 Typescript 예제

 

 interface는 중복정의가 가능하지만  type은 불가능하다.

//interface의 중복정의

interface Duplication {
    name: string
}

interface Duplication {
    value: number
}

//같은이름으로 두번정의했다. 
// Duplication을 타입으로 사용하는 오브젝트는
// name과 value를 모두 가져야한다.

let testing: Duplication = {
    name: "test",
    value: 10
}



//type 키워드는 같은이름으로 두번정의할 수 없다.
// 아래코드는 에러를 발생시킨다.
type Not = {
    name: string
}

type Not = {
    value: number
}

type은 중복정의가 허용되지 않는다.

 

하지만 위의 경우들은 특수한 기능적 차이일 뿐이다.

실제 개발에서 쓰이는 인터페이스는 전부 커스텀 타입으로 작성할 수 있다.

 

하지만 타입스크립트 외에도 다양한 언어를 사용하는 프로그래머들과의 협력을 위해

 일반적으로 "type"은 인터페이스나 클래스가 상속받게 하지 않는다.

 

다른 언어들은 상속의 요소로 클래스나 인터페이스를 많이 사용하기 때문에

타입대신 인터페이스를 사용하면 타입스크립트에 익숙하지 않은 개발자과 좀 더 원활한 의사소통이 가능하다.

 

 

타입은 별칭지정, 유니온타입선언 등등에 사용하고,

오브젝트 구성을 정의가 필요하거나 추상클래스의 역할을 하는 요소가 필요하다면

"인터페이스"를 활용하자.

 

 

 

썸네일 이미지 출처:

Typescript icons created by Freepik - Flaticon