프론트엔드/TypeScript

[TypeScript] 타입스크립트의 타입 별칭(type alias)

s_omi 2024. 1. 19. 14:10
728x90
반응형
SMALL

type

특정 값이나 객체의 값에 대한 타입을 지정해줄 수 있다.

  • 특징
    • Type alias(타입에 대한 별명)를 만들어줄 수 있다.
    • 타입을 특정한 값을 가지도록 제한할 수 있다.

 

 

타입 별칭(Type Alias)

object의 타입을 명시적으로 정해주는 방법이며 type 키워드를 사용해서 타입에 이름을 설정해서 사용한다.

// Alias 사용 전 
const player : {
	name: string,
	age?: number
} = {
	name: "name"
}

// Alias 사용 후
type Age = number; 
type Player = {
	name: string, 
	age?: Age
}

const player : Player = {
	name: "name",
}

 

아래는 함수에서 return 타입을 지정할 때 타입 별칭을 사용한 예시이다.

type Player = {
	name: string, 
	age?: Age
}

function playerMaker(name: string) : Player {
	// 함수 뒤에 : Player는 return하는 타입을 말한다.
	return {
		  name // 같은 뜻: name = name
	}
}

const record = playerMaker("record");
record.age = 99;

 

아래는 화살표 함수에서 return 타입을 지정할 때 타입 별칭을 사용한 예시이다.

type Player = {
	name: string, 
	age?: Age
}

function playerMaker = (name: string) : Player => ({ name })

const record = playerMaker("record");
record.age = 99;

 

 

readonly

JavaScript에서는 mutability(변경 가능성)이 기본값이지만 타입스크립트에서는 readonly를 통해 읽기 전용으로 만들 수 있다.

interface Pizza {
readonly x: number;
}

let pizza: Pizza = { x: 1 };
pizza.x = 12;    // 에러

const numbers: readonly number[] = [1, 2, 3, 4];
numbers.push(1); // 에러

 

 

Tuple

정해진 개수와 순서에 따라 배열 선언한다. 정해진 배열에 정해진 개수의 요소와 순서의 맞는 타입의 값을 요구할 때 Tuple이 유용하다.

const player: [string, number, boolean] = readonly ["hi", 1, true];

 

728x90
반응형
LIST