The Ledger

최근 게시글

06_02 타입스크립트 타입 심화 실습

5 min read

하위 태스크 1

배열 타입 정의

number[], string[], 유니온 배열, 다차원 배열 작성

src/arrays.ts:

const numbers: number[] = [1, 2, 3, 4, 5];
const strings: string[] = ["Hello,", "This", "is", "the", "TypeScript"];
const unions: (number | string)[] = ["My", "age", "is", 30];
const matrix: number[][] = [
	[1, 2, 3],
	[4, 5, 6],
	[7, 8, 9],
];

하위 태스크 2

튜플 타입 실습

고정 길이 튜플 작성, 회원 정보 배열에 튜플 적용

src/arrays.ts:

// ...
type Member = [string, "M" | "W", number];
const gildong: Member = ["홍길동", "M", 24];

선언된 튜플 타입과 일치하지 않는 값이 할당되면 오류가 발생한다.

const gildong: Member = ["홍길동", "M", "24"];
// 2322: Type 'string' is not assignable to type 'number'.

하위 태스크 3 ~ 4

객체 리터럴 타입

객체 타입 직접 정의, 프로퍼티 접근 확인

선택적/readonly 프로퍼티

?와 readonly 키워드 사용, 동작 확인

src/object.ts:

const user: {
	id?: number,
	readonly name: string,
} = {
	id: 1,
	name: "홍길동",
};
 
console.log(user.id, user.name); // 1 홍길동

하위 태스크 5

타입 별칭 작성

type 키워드로 타입 재사용, 여러 곳에서 활용

src/object.ts:

type User = {
	id?: number,
	readonly name: string,
};
 
const gildong: User = {
	id: 1,
	name: "홍길동",
};
 
const sujung: User = {
	id: 2,
	name: "홍수정",
};
 
console.log(gildong.id, gildong.name);
console.log(sujung.id, sujung.name);

하위 태스크 6

인덱스 시그니처

동적 키-값 타입 정의, 국가 코드 예제 작성

src/objects.ts:

// ...
 
type CountryCode = {
	[key: string]: string,
};
 
const countryCode = {
	"South Korea": "KR",
	"Taiwan": "TW",
	"Morocco": "MA",
	"Kuwait": "KW",
	"Laos": "LA",
};

하위 태스크 7 ~ 8

숫자형 Enum

자동 할당되는 숫자 Enum 작성 및 사용

문자열 Enum

명시적 문자열 값 Enum 작성 및 사용

src/enums.ts:

enum Role {
	ADMIN,
	USER,
	GUEST,
}
 
enum Language {
	korean = "ko",
	english = "en",
}
 
const gildong: {
	name: string,
	role: Role,
	language: Language,
} = {
	name: "홍길동",
	role: Role.ADMIN,
	language: Language.korean,
};

트랜스파일 JavaScript:

"use strict";
var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
})(Language || (Language = {}));
const gildong = {
    name: "홍길동",
    role: Role.ADMIN,
    language: Language.korean,
};

하위 태스크 9

any 타입 실험

any 타입의 위험성 직접 경험

any 타입은 지정된 변수에 대해 타입 검사를 하지 않지 떄문에, 어떤 자료형의 값이라도 할당할 수 있다.

src/speical-types.ts:

let anyBox: any;
 
anyBox = 1;
anyBox = "What?";
anyBox = true;
anyBox = {
	name: "홍길동",
};
 
console.log(anyBox.name); // 홍길동

하위 태스크 10

unknown 타입 실습

unknown 타입과 타입 좁히기 조합

unknown 타입은 any 타입과 유사하지만 타입 검사가 적용되며, unknown 타입의 변수를 타입 가드를 통해 타입을 좁힌 뒤 사용한다.

src/special-types.ts:

// ...
 
let unknownBox: unknown;
 
unknownBox = 1;
unknownBox = "What?";
unknownBox = true;
unknownBox = {
	name: "홍길동",
};
 
// console.log(unknownBox.name);// 2339: Property 'name' does not exist on type 'unknown'.
 
type User = {
	name: string,
};
 
function isObject(value: unknown): value is Record<string, unknown> {
	return typeof value === "object" && value !== null;
}
 
function isUser(value: unknown): value is User {
	return isObject(value) && typeof value.name === "string";
}
 
if (isUser(unknownBox)) {
	console.log(unknownBox.name); // 홍길동
}

하위 태스크 11

void/never 타입

함수 반환 타입으로 void와 never 사용

src/special-types.ts:

// ...
 
function sayHello(): void {
	console.log("Hello.");
}
 
function throwBall(): never {
	throw Error("Catch my ball!");
}

그래프 뷰