타입 단언

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨 — 73개 중 68번째.

때때로 TypeScript는 값의 정확한 타입을 결정하기에 충분한 정보를 가지고 있지 않지만, 개발자인 여러분은 그 값이 실제로 무엇인지에 대해 더 많이 알고 있습니다. 타입 단언(Type assertions)을 사용하면 TypeScript에게 "날 믿어, 이 값은 이 특정 타입이야"라고 말할 수 있습니다.

TypeScript는 타입 단언(type assertions)을 위한 두 가지 구문을 제공합니다. as 구문이 더 일반적인 방식입니다:

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

또한 꺽쇠 괄호(angle-bracket) 구문을 사용할 수도 있지만, 현대적인 TypeScript에서는 덜 일반적입니다:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

외부 API 시뮬레이션의 데이터를 처리하는 함수를 만드세요. unknown 타입의 값을 다루고 타입 단언(type assertions)을 사용하여 속성에 안전하게 접근하게 됩니다.

unknown 타입의 변수 apiResponse를 생성하고 다음 JSON 문자열을 할당하세요:

{"userId": 42, "username": "alice_dev", "isActive": true}

다음과 같은 기능을 하는 processUserData라는 이름의 함수를 만드세요:

unknown 타입의 매개변수 data를 받습니다.
타입 단언을 사용하여 data를 string으로 취급합니다.
JSON.parse()를 사용하여 JSON 문자열을 파싱합니다.
또 다른 타입 단언을 사용하여 파싱된 결과를 userId (number), username (string), 및 isActive (boolean) 속성을 가진 객체로 취급합니다.
형식화된 문자열 "User [userId]: [username] (Active: [isActive])"을 반환합니다.
명시적인 반환 타입으로 string을 가집니다.

추가 테스트 데이터를 생성하세요:

JSON 문자열 {"userId": 15, "username": "bob_admin", "isActive": false}을 가진 unknown 타입의 secondApiResponse를 생성하세요.
JSON 문자열 {"userId": 99, "username": "charlie_user", "isActive": true}을 가진 unknown 타입의 thirdApiResponse를 생성하세요.

함수를 테스트하고 다음 출력값을 출력하세요:

apiResponse를 사용하여 processUserData를 호출하고 결과를 출력하세요.
secondApiResponse를 사용하여 processUserData를 호출하고 결과를 출력하세요.
thirdApiResponse를 사용하여 processUserData를 호출하고 결과를 출력하세요.

치트 시트

타입 단언(Type assertions)을 사용하면 TypeScript가 추론할 수 있는 것보다 더 많은 정보를 알고 있을 때 TypeScript에 값의 특정 타입을 알려줄 수 있습니다.

as 구문을 사용하세요 (가장 일반적임):

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

대안적인 앵글 브래킷(angle-bracket) 구문:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

직접 해보기

// API 응답 변수 생성
const apiResponse: unknown = '{"userId": 42, "username": "alice_dev", "isActive": true}';
const secondApiResponse: unknown = '{"userId": 15, "username": "bob_admin", "isActive": false}';
const thirdApiResponse: unknown = '{"userId": 99, "username": "charlie_user", "isActive": true}';

// TODO: 여기에 processUserData 함수를 생성하세요

// 함수를 테스트하고 결과를 출력합니다
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.