Type alias
타입을 재 사용하고 이름을 지정하는 방법을 말합니다.
예를 들어, 다음과 같은 복잡한 코드가 있을때 코드의 가독성을 좋게 만들어 줍니다.
function printName(name: {first: string, last: string}): {
first: string,
last: string
} {
return `print ${first}, ${last}`;
};보기만해도 "first: string, last: string" 이 코드가 반복되는 것이 보이죠?
이걸 계속 반복하는 대신 타입 별칭을 만들면 됩니다.
바로 코드로 살펴봅시다!
type Name = {
first: string;
last: string;
};
function printName(name: Name): Name {
return `print ${first}, ${last}`;
};이처럼
type 키워드 그다음 타입에 붙일 이름 그리고 등호 그 뒤에 타입을 작성하면 됩니다.
위에서 타입의 이름은 대문자로 작성했지만 꼭 대문자를 쓸 필요는 없고 대체로 이렇게 표기한다고 합니다! 반드시 따라야될 TS 규칙은 아닙니다.
그리고 타입을 만들어줄땐 객체 타입만이 아니라 원시 타입도 만들어 줄 수 있습니다.
type Name = string; 이런식으로 하면 됩니다!
Nested Object (중첩 객체)
조금 더 복잡한 중첩 객체를 코드를 통해 확인 해봅시다!
type Song = {
title : string;
artist: string;
numStreams : number;
credits : {
producer : string;
writer : string;
};
};
// 타입을 작성합니다!
function calculatePayout(song : Song): number{
return song.numStreams * 0.0033;
};
function printSong(song : Song): void{
console.log(`${song.title} - ${song.artist}`);
}
const mySong: Song = {
title : "unchained Melody",
artist : "Right",
numStreams : 123123,
credits : {
producer : "Phil Spector",
writer : "Alex North"
}
}
// 아까 언급했던 객체를 변수로 정의하는 과정을 거쳐서 직접 프로퍼티를 입력하는 과정을 생략 해줍시다!
console.log(calculatePayout(mySong)) // 406.3059
printSong(mySong) // unchained Melody - Right선택적 프로퍼티
만약 우리가 변수에 프로퍼티 값을 지정해줄때 type안에 있는 모든 프로퍼티 값을 입력해 주어야 하지만 key값에 "?" 를 넣어줌으로써 선택적으로 프로퍼티를 넣을 수 있다.
코드를 통해 확인해보자
type Point = {
x: number;
y: number;
z: number;
};
const myPoint: Point = { x: 1, y: 3 }; // error
type Point = {
x: number;
y: number;
z?: number;
// "?"를 추가함으로써 타입 애너테이션 전에 필수는 아니라고 TS에 전달하는 것이다.
};
const myPoint: Point = { x: 1, y: 3 }; 
readonly 키워드
특별한 제어자 키워드이다.
이 키워드는 JS키워드가 아니라 TS에서 사용하는 제어자로 객체 내의 특정 프로퍼티를 표시하거나 또는 배열이나 클래스에 접근할 때 사용ㄹ합니다.
지금은 객체의 경우를 확인해 보겠습니다.
type User = {
readonly id : number;
username : string;
};
const user: User = {
id : 123123,
username : "cat"
};
console.log(user.id); // 123123
user.id = 1231231; // error
// 이렇게 하면 id로 뭔가 할 때 불러올 수 있게 되고 출력도 가능합니다.
// 하지만 user.id의 값이 이렇다고 하면 오류가 출력될 겁니다.
// id를 변경하려고 시도하니 이 값은 읽기 전용이라고 경고하는 것이죠!
