타입 단언

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

때때로 TypeScript에는 값의 정확한 타입을 판단할 충분한 정보가 없지만, 개발자인 여러분은 그 값이 실제로 무엇인지에 대해 더 잘 알고 있습니다. 타입 단언을 사용하면 TypeScript에 "내 말을 믿어, 이 값이 특정 타입이라는 것을 알고 있어."라고 알릴 수 있습니다.

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

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

꺾쇠괄호 구문을 사용할 수도 있지만, 현대 TypeScript에서는 덜 일반적입니다:

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

챌린지

쉬움

외부 API 시뮬레이션의 데이터를 처리하는 function을 만드세요. unknown 유형의 값으로 작업하고, 해당 속성에 안전하게 액세스하기 위해 타입 단언을 사용합니다.

unknown 유형의 apiResponse 변수를 만들고 다음 JSON 문자열을 할당하세요.

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

다음 작업을 수행하는 processUserData라는 이름의 function을 만드세요.

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

추가 테스트 데이터를 만드세요.

다음 JSON 문자열을 사용하여 unknown 유형의 secondApiResponse를 만드세요: {"userId": 15, "username": "bob_admin", "isActive": false}
다음 JSON 문자열을 사용하여 unknown 유형의 thirdApiResponse를 만드세요: {"userId": 99, "username": "charlie_user", "isActive": true}

function을 테스트하고 다음 출력을 출력하세요.

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