[TypeScript]자바스크립트에 없는 타입 - 기본

길현민·2022년 8월 21일
0

TypeScript

목록 보기
3/3

Any

any는 어떤 타입도 지정할 수 있습니다. 자바스크립트로 컴파일된 코드를 보면 아무 타입도 지정하지 않은 원래의 자바스크립트 코드와 똑같습니다. 즉, any 타입을 사용하면 타입스크립트를 쓸 이유가 없는 것과 다름 없습니다.

가끔 개발은 바쁜데 어떤 타입을 지정해야 할지 몰라서 any를 쓰는 경우도 있는데, 웬만하면 쓰지 않도록 노력해야합니다.

let value: any;

// 타입 에러 없음
value = 'kim';
value = 1234;
value = [1,2,3,4];

void

void는 any와는 반대로 어떤 타입도 없다는 뜻입니다. 보통 함수에서 반환값이 없는 경우 사용합니다.

function clickButton(): void {
	alert('Clicked!');
}

Enum

Enum(열거형)은 이름이 있는 정해진 값의 세트라고 생각하시면 됩니다.

// Category라는 이름의 enum 타입을 정의한다
// Category의 enum 값에 Past, Pizza, Dessert 가 있다.

enum Category {
	Pasta,
	Pizza,
	Dessert
}

// menuCategory 변수는 Category 타입으로, 해당 enum 값 중 하나를 가질 수 있다.
let menuCategory: Category = Category.Pasta;

Category의 Pasta이라는 값을 menuCategory 변수에 할당하면 0이 저장됩니다.
특정 값이 없는 Enum의 경우 0부터 값이 주어지기 때문입니다.

// enum 값은 0부터 차례대로 숫자 값을 가진다.

enum Category {
	Pasta,  
	Pizza,  
	Dessert 
}

console.log(Category.Pasta);    // 0
console.log(Category.Pizza);    // 1
console.log(Category.Dessert);  // 2

만약 Enum값에 특정 값을 할당하고 싶으면 아래와 같이 할 수 있습니다.

// enum에 값 부여

enum Category {
	Pasta = 'pasta',
	Pizza = 'pizza',
	Dessert = 'dessert'
}

let menuCategory: Category = Category. Pasta;

언제 사용?
상수로된 세트 값이 필요할 때

export enum AssignmentStatus {
  Submitted,
  Pending,
  Rejected,
  Passed
}

union

union타입은 여러 타입이 올 수 있을 때 사용합니다.

function formatDate(date: string | number | Date): string {
	// 로직 생략

	return `${year}년 ${month}월 ${day}일`
}

formatDate(20201028);
formatDate(new Date());
formatDate('20201028');

formateDate 함수의 매개변수로 문자열, 숫자, Date 객체 타입으로 모두 받을 수 있다면 → 수직선(|)을 사용해서 정의할 수 있습니다.

Tuple과 Union의 사용 차이

Tuple

Tuple(튜플)은 배열과 마찬가지로 데이터를 순차적으로 저장할 수 있는 자료형 중 하나이며, 타입스크립트에서는 배열에 두 개 이상의 타입을 사용하고 싶을 때 주로 사용합니다.

let starArr: [number, string]= [1, '1점'];

이 때 starArr 배열에 두 가지 타입의 값이 모두 있어야 합니다.

만약 [1]과 같이 둘 중 하나의 타입만 존재하면 Property '1' is missing in type '[number]' but required in type '[number, string]'. 와 같은 에러 메시지가 나옵니다.

// tuple 응용
let batchInfo: [number, string][];
batchInfo = [[1, '1기'], [2, '2기'], [3, '3기']];

tuple로 이루어진 배열을 만들고 싶으면 위와 같이도 사용할 수 있습니다.

배열에서의 Tuple vs Union

배열에 여러 타입의 값을 사용하고 싶을 때 튜플을 쓸 때와 union을 쓸 때의 차이점은 아래와 같습니다.

// union
let starNumberArr: (number | string)[] = [1, 2];
starNumberArr.push("3점");

// tuple
let starArr: [number, string] = [1, "1점"];

union은 사용하고자 하는 타입 중에 하나만 있어도 가능합니다. 튜플을 사용하면 배열의 요소에 정의한 타입이 모두 존재해야 합니다.

Type 별칭 (Type Alias)

type 이라는 키워드를 사용하여 타입에 이름을 붙여서 사용할 수도 있습니다. 타입을 재사용하거나, 객체를 위한 타입을 정의할 때 많이 사용됩니다.

type ID = number | string;

function checkInfo(info: { id: ID; pw: string }) {

}

let id: ID = "1010";
checkInfo({ id, pw: "password" });

type ID = number | string;
type Info = {
	id: ID;
	pw: string;
};

function checkInfo(info: Info) {

}

let id: ID = "1010";
checkInfo({ id, pw: "password" });

checkInfo 함수의 매개변수 info 객체를 위해 Info라는 타입을 만들어주었습니다.

객체의 타입을 정의하는 법이 두 가지 있는데 하나는 위와 같이 type으로 정의하는 것이고, 나머지 하나는 Interface 타입을 사용하는 것입니다.

🐔출처

위코드

profile
맛집탐방러

0개의 댓글