타입 단언

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;

객체도 마찬가지입니다. 값이 unknown으로 들어오면 예상하는 형태를 단언한 다음 속성을 읽을 수 있습니다:

let payload: unknown = { name: "John", age: 30 };
let user = payload as { name: string; age: number };
console.log(user.name);

단언은 TypeScript가 값에 대해 믿는 내용을 바꿀 뿐입니다. 런타임에는 아무것도 변환하지 않으므로, 값이 실제로 해당 형태를 가진다는 것을 알고 있을 때만 형태를 단언하세요.

챌린지

쉬움

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

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입니다.

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

unknown 타입의 secondApiResponse를 만들고 다음 JSON 문자열을 넣으세요. {"userId": 15, "username": "bob_admin", "isActive": false}
unknown 타입의 thirdApiResponse를 만들고 다음 JSON 문자열을 넣으세요. {"userId": 99, "username": "charlie_user", "isActive": true}

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

processUserData를 apiResponse와 함께 호출하고 결과를 출력합니다.
processUserData를 secondApiResponse와 함께 호출하고 결과를 출력합니다.
processUserData를 thirdApiResponse와 함께 호출하고 결과를 출력합니다.

직접 해보기

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