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
'프론트엔드 > TypeScript' 카테고리의 다른 글
[TypeScript] type와 interface의 차이, class (0) | 2024.01.21 |
---|---|
[TypeScript] call signatures, 오버로딩, 다형성, 제네릭 (0) | 2024.01.20 |
[TypeScript] 타입스크립트는 왜 좋은 프로그래밍 언어일까? (0) | 2024.01.18 |