형변환

타입스크립트에서 형변환이란 변수나 상수의 데이터 타입을 명시적으로 지정하는 것을 말합니다.

TS에서 dom요소 접근할 경우

// 1
const userInputElement = <HTMLInputElement>(
  document.getElementById("user-input")!
);
// 2
const userInputElement = <HTMLInputElement>(
  (document.getElementById("user-input")! as HTMLInputElement)
);

첫번째 코드는 일반적으로 작동하지만, TypeScript가 해당 요소가 실제로 HTMLInputElement가 아닐 경우 에러가 발생합니다.

두 번째 코드에서는 ! 연산자와 함께 as 연산자를 사용하여 TypeScript에게 "user-input" 요소가 항상 HTMLInputElement임을 강제합니다. 이 코드는 일반적으로 안전하지만, 만약 해당 요소가 실제로 HTMLInputElement가 아니면 런타임 에러가 발생합니다.

따라서, 이 코드의 선택은 안전성과 신뢰성 간의 절충에 따라 달라집니다. 불확실성이 남아있는 경우에는 첫 번째 코드를 사용하는 것이 좋으며, 요소의 유형을 명시적으로 알고 있는 경우에는 두 번째 코드를 사용하는 것이 좋습니다.

! (Non-null Assertion 연산자)

TypeScript에서 해당 값이 null 또는 undefined가 아닐경우 사용합니다. 따라서 '!'가 사용된 문장에서는 document.getElementById() 메서드로부터 반환되는 객체가 null 또는 undefined가 아님을 TypeScript에 알리는 것입니다.