Ted's Codding study

as 키워드 (assertion) 본문

TypeScript

as 키워드 (assertion)

Ted93 2024. 6. 22. 19:09

1. 타입 단언의 개념

  • 개발자가 타입스크립트 컴파일러보다 해당 값의 타입을 더 잘 알고 있음을 명시적으로 선언하는 방법
  • 컴파일러에게 "이 변수의 타입을 내가 지정한 타입으로 간주해라"라고 지시
  • 타입 체크 과정에서 강제로 타입을 지정하는 것이므로 주의해서 사용

2. as 키워드를 사용하여 타입 단언하기

  • 주로 as 키워드를 사용하여 타입 단언
  • JSX와 함께 사용될 때 충돌을 피하기 위해 추천되는 방식
  • 사용 예제
let someValue: any = 'this is a string';
someValue = false;
// ? someValue를 string으로 단언
let length: number = (someValue as string).length;

 

3. 실제 프로젝트에서의 타입 단언 사용

HTML 코드 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="myButton">클릭해주세요!</button>
  <script src="main.js"></script>
</body>

</html>
main.ts 파일이란 파일명을 사용한다면
tsc main.ts를 이용하여 main.js 파일로 바꿔줘야
HTML에서 script 태그로 인식할 수 있음

 

3-1) DOM API 사용 시 타입 단언을 활용하여 HTMLElement 조작

  • 예제: HTMLButtonElement로 단언하기
// 버튼 요소 가져오기
const button = document.getElementById('myButton');
// button이 null이 아니라고 가정하고 HTMLButtonElement로 단언
if (button) {
  (button as HTMLButtonElement).disabled = true;
}

+) HTML 요소의 타입

HTMLElement 타입

각각의 HTML 요소 타입 정의
HTMLInputElement
HTMLSelectElement
HTMLFormElement
HTMLUlElement ... 등이 있다

 

3-2) 주의사항

  • 타입 단언은 컴파일러를 속이는 행위일 수 있으므로, 실제 타입과 단언한 타입이 일치하지 않는 경우 런타임 오류가 발생 가능
  • 타입 단언을 사용할 때는 해당 요소의 실제 타입을 확실히 알고 사용 권장

 

3-3) 서버로부터 받아온 데이터에 대한 명시

  • JSON을 파싱하고, 결과를 User 타입으로 단언
// JSON 문자열
  const jsonString = '{"name" : "테드", "age" : 30}';
  interface IUser {
    name: string;
    age: number;
  }
  // JSON을 파싱하고, 결과를 User 타입으로 단언
  const userData = JSON.parse(jsonString) as IUser;
  console.log(userData.name);
  console.log(userData.age);

 

3-4) 이벤트 객체에 대한 타입 단언

  • 이벤트 핸들러 내에서 이벤트 객체의 타입을 단언하여 추가적인 속성에 접근 가능
 document.getElementById('myButton2')!.addEventListener('click', (event) => {
    // MouseEvent
    // KeyboardEvent
    // FocusEvent
    const mouseEvent = event as MouseEvent;
    console.log(mouseEvent.clientX, mouseEvent.clientY);
  });
  • "non-null assertion operator" (null이 아님을 단언하는 연산자 - “ ! ” 느낌표 기호를 사용)
  • 표현식의 결과값이 null 또는 undefined가 아님을 컴파일러에게 알려주는 역할
  • 타입스크립트가 기본적으로 엄격한 null 검사를 수행하기 때문에, null 가능성을 명시적으로 제거해야 할 때 유용

 

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/as-assertion-19d027bca396475f8962f6f513e1e64d?pvs=4

 

as 키워드 (assertion) | Notion

목차

short-echidna-b16.notion.site

 

저작자표시 비영리 변경금지
'TypeScript' Related Articles more