[TypeScript]타입 별칭(Type Alias), readonly

만분의 일·2022년 8월 23일

Type Alias

타입 별칭은 type 키워드를 사용해서 타입에 이름을 설정하는 방법이다.

타입 별칭을 정의하는 방법은 type 뒤에 별칭을 입력하고 = 연산자 뒤에 타입을 정의하면 된다.

별칭은 관습적으로 대문자로 시작한다(일반 변수와 차별화를 하기 위해서)

type 별칭 = 타입;

타입 별칭은 유용해 보이지만, 아래의 코드 처럼 string, number와 같은 원시 타입에 별칭을 정의하는 것은 권유 되지 않는다🙅‍♀️

type Name = string;
type Age = number;

let name:Name = 'Tom';
let age:Age = 20;

타입 별칭은 Union type으로 type이 길거나 복잡한 경우, 객체나 함수에 타입을 정의하는 경우 유용하게 사용할 수 있다

type이 여러가지여서 코드가 길어지는 경우

type AnimalType = string | number | undefined;
let animal :AnimalType;

type AnimalType = {name:string, age: number}
let  animal :AnimalType = {name: 'kim', age:20}

타입 별칭을 union type으로 합치는 것도 가능하다

type Name = string;
type Age = number;

type person = Name | Age;

객체에 타입 별칭 사용

타입 별칭은 객체에 타입을 정의하는 경우 유용하게 사용할 수 있다!

type person = {
	name :string;
	age : number;
}

let teacher :person ={name:"jin", age:"28"}

다음은 name, age, isDeath라는 속성을 가지는 객체이다.

객체가 생성될 때 마다 변수의 타입들이 반복해서 사용된다면 코드가 굉장히 길어지는 문제가 발생한다.

const hyejinPerson: {name: string; age: number; isDeath: boolean} = {
	name:"jin",
	age:28,
	isDeath:false
}

const hamsworthPerson: {name: string, age: number; isDeath:boolean} = {
	name:"hasworth",
	age:33,
	isDeath:false
};

하지만 {name: string; age: number; isDeath: boolean}를 타입 별칭으로 정의하면 반복하지 않으면서 객체를 생성할 수 있다.

만약 사망 여부(isDeath)를 몰라서 값을 정의할 수 없는 경우 option parameter (?)를 사용하여 isDeath를 선택적 프로퍼티로 정의한다.

type Person={
	name:string;
	age: number;
	isDeath?:boolean;
}

const hyejinPerson: Person{
	name:hyejin,
	age: 28,
	isDeath?:false
}

type SquareType = {
	color? = string, // color: string | undefined와 같다
	width = number,
}

let square2 :SquareType = {
	width: 100
}

사실 option parameter는 “undefined라는 타입도 가질 수 있다”라는 뜻임을 기억 해야한다.

&연산자로 object 타입 extend 하기

&연산자로 object 타입을 합치는 것도 가능하다.

type PositionX = {x:number};
type PositionY = {y:number};

type area = PositionX & PositionY;

let position: area = {x:10, y:20}

같은 이름의 type 변수를 재정의 하는 건 불가능하다.

type PositionX = {x:number};
type PositionY = {y:number};

type PositionX = number; //재정의 불가능

type area = PositionX & PositionY;

let position: area = {x:10, y:20}

함수에 타입 별칭 사용

객체뿐만 아니라 함수도 타입 별칭을 사용할 수 있다.
다음은 name: string, age: number라는 2개의 인수를 가지고, string 값을 반환하는 함수다.

const stringFunc = (name:string, age:number):string=>{
	return `name:${name} / age:${age}`;
}

타입 별칭을 사용해 보자👏

type StringFunc = (name:string, age:number)=>string;

함수명 뒤에 타입 별칭 StringFunc을 타입으로 정의한다.

const stringFunc:StringFunc = (name, age)=> {
	return `name: ${name} / age:${age}`;
}

readonly

값의 속성을 읽기 전용으로 설정해주는 Typescript의 타입 시스템 기능이다.

함수가 parameter(매개변수)로 받는 값을 변경없이 “그대로” 사용해야할 때 적합하며

외부 클래스나 함수에서도 호출이 가능하지만 값의 변경은 불가능하므로 내부에서 미리 값을 초기화 해주어야 한다.

const 변수를 사용하는 경우.
const 변수는 등호로 재할당만 막는다
const로 담은 object 수정은 자유롭게 가능하다.

const hometown = {
region:'seoul'
}
hometowm.region = 'mokpo' // const 변수지만 error가 발생하지 않는다.

readonly를 쓰면 object 특정 속성 수정도 방지할 수 있다.(왜냐하면 읽기 전용이니까 수정할 수🙅‍♀️)

readonly를 사용하면 이렇게 바뀌면 안될 속성들을 잠궈버릴 수 있다.

type AnimalType={
readonly name:string 
}

const animal:AnimalType={
	name:'rabbit'
} 
animal.name = 'cat' // readonly라서 error남

readonly를 사용하는 이유

사실 readoly를 사용하지 않더라도 JS는 암묵적으로 매개변수를 변경하지 않는다고 가정한다.

하지만 이러한 방법은 명확하지 않기 때문에 readonly를 명시적으로 선언하는 것이 컴파일러와 코드를 읽는 사람에게 좋다.

readonly의 작동 원리⚙

readonly로 매개변수를 선언하면 다음과 같이 작동한다!

typescript가 함수 내에서 매개변수 값이 변경되는지 아닌지 검사한다.
호출하는 쪽에서는 함수가 매개변수를 변경하지 않겠다는 약속을 받는다.

readonly와 const의 차이🧐

readonly와 const는 초기 때 할당된 값을 변경할 수 없다는 공통점이 있지만 다음과 같은 차이점이 존재한다

Const

변수 참조를 위한 것이다.
변수에 다른 값을 할당 할 수 없다.

readonly

속성을 위한 것이다.

✅ Quiz.1

object 타입을 정의한 type alias 두개를 & 기호로 합칠 때 중복된 속성이 있으면 어떻게 될까?

answer: 하나만 사용할 수 있다.

💻 My Code

type TypeAlias1 = { name: string };
type TypeAlias2 = { name: string };

type NewTypeAlias = TypeAlias1 & TypeAlias2;

let position: NewTypeAlias = { name: "jin" };
export {};

✅ Quiz.2

다음 조건을 만족하는 타입을 만들어보세요

이 타입은 object 자료형이어야합니다.
이 타입은 color 라는 속성을 가질 수도 있으며 항상 문자가 들어와야합니다.
이 타입은 size 라는 속성이 있어야하며 항상 숫자가 들어와야합니다.
이 타입은 position 이라는 변경불가능한 속성이 있어야하며 항상 숫자가 담긴 array 자료가 들어와야합니다.

💻 My Code

type Obj = { color?: string; size: number; position: number[] };

let obj1: Obj = { color: "red", size: 12, position: [12, 13, 14] };

✅ Quiz.3

다음을 만족하는 type alias를 연습삼아 간단히 만들어보세요

대충 이렇게 생긴 object 자료를 다룰 일이 많습니다. { name : 'kim', phone : 123, email : 'abc@naver.com' }
object 안에 있는 이름, 전화번호, 이메일 속성이 옳은 타입인지 검사하는 type alias를 만들어봅시다.
각 속성이 어떤 타입일지는 자유롭게 정하십시오.

💻 My Code

type Obj = { name: string; phoneNumber: number; email: string };

let obj2: Obj = { name: "k", phoneNumber: 123456789, email: "aaa@aaa.com" };

✅ Quiz.4

다음을 만족하는 type alias를 만들어보세요

이름, 전화번호, 이메일, 미성년자여부 속성을 옳은 타입인지 검사하는 type alias를 만들어봅시다.
미성년자 여부 속성은 true/false만 들어올 수 있습니다.
멋있게 숙제2에서 만들어둔 type alias를 재활용해봅시다.

💻 My Code

type Obj1 = { name: string; phoneNumber: number; email: string };
type Obj2 = { isAdult: boolean };

let information: Obj1 & Obj2 = {
  name: "jake",
  phoneNumber: 123,
  email: "aaa@aaa.com",
  isAdult: true,
};
export {};