흔히 DOM에서 사용한다. 타입 단언의 개념은 typescript에서 선언하는 것입니다.
내가 더 많이 알고 있고 이 값을 다른 타입으로 취급하라고요!
typescript가 우리보다 많은 정보가 없는 상황에 쓸 수 있습니다.
코드를 통해 확인 해 봅시다!
const mystery: string = "Hello World!!!";
누가 봐도 미스터리라는 문자열을 상수에 담아낸 모습입니다.
typescript도 이것이 문자열임을 알고 있습니다.
그럴일은 없겠지만 만약 타입을 unknown으로 설정하면 어떻게 될까요?
타입스크립트가 길을 잃었습니다😭
기존에 문자열일 때는 문자열의 길이를 출력헀지만,
unknown으로 타입을 변경하고 나서 바로 오류를 보여주는 모습입니다.
만약 타입스크립트에 내가 더 많이 알고 있고, 이건 분명히 문자열 타입이라고 단언하려면 타입 단언 구문을 사용하시면 됩니다!
as키워드를 타입 앞에 사용합니다.
이렇게 말이죠!
바로 제자리를 찾아가는 모습입니다.
mystery2의 타입이 바뀌진 않습니다. 여전히 unknown타입이죠
이 컨텍스트 내에서 무낮열로 취급된다고 말하는 것입니다.
그리고 타입스크립트도 오류라고 말하지 않습니다.
하지만 새로운 문제가 보이시나요?
만약 mystery가 문자열이 아니면요?
이게 숫자였다면 타입스크립트가 오류라고 안 할까요?
지금은 문제가 없겠지만 런타임 이후 undefined가 될 거고 숫자에는 length가 없으니 문제가 생길겁니다.
그럼 이것을 DOM에 적용해볼까요?
// index.html
<!DOCTYPE html>
<head>
</head>
<body>
<input id = "todoinput" type = "text" placeholder="enter a todo"></input>
<button id = "btn">click</button>
<script src="dist/index.js"></script>
</body>
</html>
다음과 같은 간단한 index.html이 있습니다.
이제부터 제가 할 것은 input값을 입력한 후 버튼을 클릭했을 때, alert창에 입력한 input값을 출력하겠습니다.
// index.ts
const btn = document.getElementById("btn")!;
const input = document.getElementById("todoinput")!;
btn.addEventListener("click", function () {
alert(input.value);
input.value = ""
})
이렇게 하면 input값을 출력할 수 있을까요?
오류가 발생했습니다.
HTMLElement형식에는 value가 없다고 합니다.
현재 input은 HTMLElement형식입니다. 그럼 아까 공부한 타입단언을 적용하면 됩니다.
바로 오류가 사라지고 형식이 HTMLInputElement로 변경됐습니다!
성공성공!!
마지막으로 타입 단언의 대체 구문입니다.
as 키워드를 대체 할 수 있습니다.
// index.ts
const btn = document.getElementById("btn")!;
const input = document.getElementById("todoinput")!;
btn.addEventListener("click", function () {
alert((<HTMLInputElement>input).value);
(<HTMLInputElement>input).value = ""
})
이 구문은 덜 일반적이고 JSX에서는 동작하지 않습니다.
저는 앞으로 react에서 typescript를 적용할 생각이니.. 알아두고만 있으면 되겠네요!
나중에 홑화살괄호는 템플릿 HTML을 작성하는 데 사용되니 일반적으로 홑화살괄호로 타입 단언을 사용하진 않습니다.
나중에 제네릭에 대해 이야기할 때 이 구문을 다시 포스팅 하겠습니다.