[TypeScript] type aliases & readonly

2021년 09월 13일

type aliases

아래처럼 타입 정의가 길어질 때, 보기 싫거나 재사용해야 할 경우 변수를 만드는 것 처럼 type 키워드를 쓰면 됩니다. 이러한 방법을 type alias 라고 합니다.

let cat :string | number | undefined;

type 타입 변수명 = 타입종류**

type Animal = string | number | undefined;
let cat :Animal;

object 타입도 사용 가능합니다.

type Person = {
  name : string,
  age : number,
}

let teacher :Person = { name : 'john', age : 20 }

자바스크립트 변수 const는 재할당을 막아주기 때문에 값이 변하는걸 감지하고 차단할 수 있습니다.

그런데 object에서 const는 재할당만 막아줄 뿐 object 안의 속성들의 변경은 가능한데,

이때 object 속성이 변하기 않게 하려면 타입스크립트 readonly를 사용하면 됩니다.

type Animal = {
  readonly name : string,
}

let dog :Animal = {
  name : 'lulu'
}

dog.name = 'lala' // readonly라서 에러남. 변경 불가능

type Square = {
  color? : string,
  width : number,
}

let square1 :Square = { 
  width : 100 
}

squeare1에 color 속성이 없어도 에러가 나지 않습니다.

(?는 “undefined 라는 타입을 가질수 도 있다~“)

type Name = string;
type Age = number;
type NewOne = Name | Age;

object에 지정한 타입의 경우 합치기도 가능합니다.

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY
let XY :XandY = { x : 1, y : 2 }

type은 재정의가 불가능합니다. 이와 관련해서는 재정의가 가능한 interface가 있습니다.

메서드에 type은 아래와 같이 사용 가능합니다.

type NumOut = (x : number, y : number ) => number ;

그래서 함수에 적용하면

type NumOut = (x : number, y : number ) => number 
let ABC :NumOut = function(x,y){
  return x + y
}

interface를 사용하면 object 자료형의 타입을 보다 편리하게 지정 가능합니다.

interface Square { 
  color :string, 
  width :number, 
} 

let 네모 :Square = { color : 'red', width : 100 }

interface는 object와 비슷하게 사용하면 됩니다.

용도는 type alias와 같습니다.

1. 대문자로 작명

2. { } 안에 타입을 명시

예를 들어, Student interface와 Teacher interface가 필요하다고 가정해보면

Student는 name 속성이 들어가야하고 Teacher는 name 속성과 age 속성이 들어가야 합니다.

interface Student {
  name :string,
}
interface Teacher {
  name :string,
  age :number,
}

이때 extends를 사용하면 코드를 줄일 수 있습니다.

interface Student {
  name :string,
}
interface Teacher extends Student {
  age :number
}

Student interface를 extends하면 Student 안에 있던걸 Teacher에 복사해줍니다.

이제 Teacher 타입은 name, age 속성을 가지게 되는 것입니다.

interface는 타입 이름 중복 선언을 허용해 중복시 extends 한 것과 동일하게 동작합니다,.(type은 중복선언 허용하지 않음)

interface Animal { 
  name :string 
} 
interface Animal { 
  legs :number 
}

일반적인 상황에서는 type 키워드를 자주 활용하면 되는데, 만약 다른 사람이 내 코드를 이용하는 상황이 많으면 interface로 유연하게 만드는게 좋아서 타입스크립트로 작성된 라이브러리들은 interface로 타입을 정해놓은 곳이 많다고 합니다.

object 자료형은 전부 interface로 만들고 다른 자료형은 type 키워드로 만드는 것도 괜찮다고 합니다.

참고로 extends 할때, 아래와 같이 object 안의 속성이 중복되는 경우에는 에러가 발생합니다.

interface Animal { 
  name :string 
} 
interface Dog extends Animal { 
  name :number 
}