[TS] Type Aliases / Literal Type

 

 

 

 

 

 

 

 

Type Aliases

 

 - 타입을 여러가지 써야할 때 길어서 보기싫거나, 나중에 또 사용하고싶을 때 변수에 담아서 사용한다.

 ( 타입 키워드는 재정의가 불가능하다. 보통 대문자로 시작하거나 뒤에 type이라고 붙여서 작명해준다. )

 

- Alias는 새로운 type 변수를 생성하는 것이 아니라, 정의한 타입에대해 쓰기쉽게 새로운 별칭을 부여하는 것과 같다.

 

1. 변수에 저장

 type 타입변수명 = 타입종류

type 저장 = string | number | undefined;
let 변수1 : 저장 = 1;

 

2. Object

// type 키워드 쓰지않을 때 코드
let 학생: { 
  name: string,
  age: number 
} = {
  name: "kim",
  age: 23,
};

type 사람 = {
  name: string;
  age: number;
};

let 학생: 사람 = { name: "kim", age: 20 };

 

 

 

3. function

 

 

   1) 함수타입은 arrow function으로 만든다

type 함수타입 = (x: string, y: number ) => number;

 

   2) function 함수 : 함수타입 () {} 이런식으로는 불가능하다.

       함수표현식에 type alias 사용가능.

let 함수: 함수타입 = function (x) {
  return 10;
};

 

 

 

4. methods

// plusOne, changeName 함수를 object 자료에 넣은형태
// arrow, 일반함수 전부 넣을 수 있다. type은 따로 만들어서 할당해준다.

let 회원정보: Member = {
  name: "kim",
  age: 30,
  plusOne (x) {
    return x + 1;
  },
  changeName: () => {
    console.log("hi");
  },
};

type Member = {
  name: string;
  age: number;
  plusOne: (x: number) => number;
  changeName: () => void;
};

 

 

 

🔻 타입이 전부다 필요하지 않다면, 선택사항인것은 ? 물음표 연산자를 추가해준다.

    ( 물음표는 'undefiend 타입도 가질수있다'라는 뜻 )

type 사람 = {
  name: string;
  age?: number;
};

 

 

 

 

🔻 타입 여러개를 합칠 수 있다.

 

  -  OR 연산자로 union type 

type Name = 'string';
type Age = 'number';

type New = Name | Age;

 

 - AND 연산자로 object extend

   type alias & type alias

   type alias & { name : string } 등..

type PositionX = { x: number };
type PositionY = { y: number };
type Extend = PositionX & PositionY;
let 좌표: Extend = { x: 1, y: 2 };

type Obj3 = {
  name: string;
  phone?: number;
  email?: string;
};

type Obj4 = Obj3 & { 미성년: boolean };

let 회원가입정보: Obj4 = {
  name: "kim",
  phone: 123,
  미성년: true,
};

 

 

 

 

 

 

 

 

 

 

 

Readonly  

   

 

 const 변수는 속성을 재할당할 수 없다.

const name = 'kim';
name = 'Lee'
//에러발생

 

 

 하지만, object를 const에 집어넣으면 object내부 변경가능하다.

 const는 재할당만 막아주지 object 내부 속성 바꾸는 것 까지는 관여하지 않는다.

 object 속성을 바뀌지않게 막고싶다면 readonly를 사용한다.

 

type Animal = {
  readonly name : string
}

let 동물 : Animal = {
  name : 'kiwi'
}

동물.name = 'banana'   //에러

 💥 readonly는 컴파일시 에러를 발생시키는 것일 뿐, 변환된 js파일에서는 속성이 잘 바껴버린다!

 

 

 

 

 

---

 

 

 

 

 

 

---

 

 

 

as const

 

 

typescript 3.4부터 일일이 타입을 선언하지 않아도 컴파일러가 자동으로 타입을 추론한다.

 

 

let은 변수값을 바꿀 수 있어서, 좀 더 포괄적인 primitive type으로 추론되고,

let hello = 'world';
// let hello : string

 

const는 변경이 불가능하므로, literal type으로 'world'가 추론된다.

const hello = 'world';
// const hello : 'world'

 

 

 

 

🔻 const assertion (타입 단언하기)

 

let 변수도 const 처럼 literal type으로 추론하고 싶을 때, as const를 사용한다.

( 강하게 제한하고 싶을 때 : 타입을 object의 값으로 바꾸고, readonly로 바뀐다. )

let hello = 'world' as const;
// let hello : 'world'

 

또한, const에서 object안의 value값을 literal로 관리하고싶을 때

const animal = {
 cat : 'kiwi',
 dog : 'banana'
}
//cat : stirng, dog : string

const animal = {
 cat : 'kiwi',
 dog : 'banana'
} as const;
//cat : 'kiwi', dog : 'banana'

 

 

let student = {
  name : 'kim'
} as const;

function 함수(a : 'kim') {

}
함수(student.name)

//as const를 안했을 땐 student.name이 string이므로 오류발생