타입 단언

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를 호출하고 결과를 출력하세요.

직접 해보기

// 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));