타입스크립트 D8

nearworld·2022년 7월 24일

목록 보기

8/28

Object 타입 지정

자바스크립트

let employee = {
 	id: 1 
}

타입스크립트

// 오브젝트 프로퍼티 타입 지정 
let employee: {
  id: number
} = { id: 1 };

employee 객체에 name 프로퍼티를 만들어보자.

자바스크립트

employee.name = 'Kim';

타입스크립트

// Property 'name' does not exist on type { id: number }.
employee.name = 'Kim';

// Property 'name' is missing in type '{ id: number }'.
let employee: {
  id: number,
  name: string
} = { id: 1 }

// 정상 작동
let employee: {
 	id: number,
  	name: string
} = { id: 1, name: 'Kim' };

// 정상 작동하나 피해야할 스타일
let employee: {
 	id: number,
  	name?: string
} = { id: 1 }

? optional chaining 연산자를 써서 name프로퍼티의 부재에 대한 에러를 회피하지만
name프로퍼티가 부재할 경우에 employee 타입에 name: string을 설정해둔 것이 말이 안되기 때문.

readonly

let employee: {
	id: number,
    name: string
} = { id: 1, name: 'Kim'};

// id값 변경 가능
employee.id = 0;

만약 오브젝트의 프로퍼티 값이 변경되는 것을 방지하고자 한다면 readonly를 추가할 수 있다.

let employee: {
 	readonly id: number,
  	name: string
} = {
  id: 1,
  name: 'Kim'
};

// 에러
employee.id = 0;

메서드 등록

let employee: {
 	readonly id: number,
  	name: string,
  	retire: (date: Date) => void
} = {
 	id: 1,
  	name: 'Kim',
  	retire: (date: Date) => {
     	console.log(date); 
    }
}

retire메서드를 추가했다. 인자로 들어갈 date: Date를 넣고 => 화살표 다음에 void 리턴될 타입을 지정해준다. 이 코드에서는 아무것도 리턴하지 않을 것이니 void를 넣어줬다.

이제 오브젝트에 메서드까지 등록하는 것을 배웠다. 그러나 코드가 좀 복잡해지기 시작했고 만약 같은 프로퍼티를 가지는 오브젝트를 여러개 만든다고 가정해보자. 그러면 코드는 매우 복잡해지고 타입 지정 부분에서 똑같은 코드를 계속 반복해야하는 비효율성이 부각될 것이다.

type alias

위의 일회성 타입 지정을 극복하고자 type alias가 등장한다.

// type alias
type Employee {
	readonly id: number,
  	name: string,
  	retire: (date: Date) => void
}
    
let employee: Employee = {
  id: 1,
  name: 'Kim',
  retire: (date: Date) => {
   	console.log(date); 
  }
}

let employee2: Employee = {
  id: 2,
  name: 'Jun',
  retire: (date: Date) => {
    console.log(date);
  }
}