[TS series] TS Type Assertions (타입단언)

_sqrlkoo·2023년 1월 12일
0

TypeScript

목록 보기
12/12
post-thumbnail

Type Assertions

흔히 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을 작성하는 데 사용되니 일반적으로 홑화살괄호로 타입 단언을 사용하진 않습니다.

나중에 제네릭에 대해 이야기할 때 이 구문을 다시 포스팅 하겠습니다.

0개의 댓글