타입스크립트 타입단언( Type Assertion )

 

타입스크립트에서 타입 단언(Type Assertion)은 컴파일러에게 "이 값의 타입을 내가 더 잘 안다"고 명시적으로 알려주는 방법이다.  

타입 단언은 타입스크립트의 타입 시스템을 우회하거나, 점진적으로 타입을 적용할 때 유용하게 사용할 수 있다. 하지만 타입 단언의 남용은 런타임 오류로 이어질 수 있으니, 꼭 필요한 경우에만 사용하는 것이 좋다

 

형식이 맞지 않을 경우

Student 라는 타입을 만들어서 student 라는 객체의 타입을 지정을 했다.

그리고 객체를 만들고  나중에 속성을 정의 하기 위해 빈 객체를 대입하게 되면 타입오류가 발생한다.

 

 

그렇다고 타입 지정을 안해버리면

속성을 정의하기 위한 코드에서 오류가 발생한다.

 

 

이럴때 타입 단언을 적용하여 해결이 가능하다.

type Student = { id: number; name: string };
let std= {} as Student    // 빈객체의 타입을 Student로 단언하며, std type 도 Student 로 추론한다.
std.id = 1;
std.name = "홍길동";

 

 

 

타입의 갯수가 맞지 않는 경우

그리고 타입 갯수가 맞지 않을 때에도 타입 단언으로 해결이 가능하다.

type Student = { id: number; name: string };  // 속성의 갯수 2개만 정의

//let std: Student  = {   속성 갯수가 맞지 않아 오류 발생
//  id: 1,
//  name: "홍길동",
//  grade: 2,        
//} 

let std = {
  id: 1,
  name: "홍길동",
  grade: 2,        
} as Student;       // 타입 단언으로 해결

 

 

const value : unknown = "hello world"    // unknown 타입에는 모든 값이 다 들어갈 수 있다.
const length = (value as string).length  // length 는 배열과 문자타입에만 가능하므로 타입단언을 해야 한다.

 

 

Const 단언

 값 자체를 상수로 취급 한다.

let num = 123 as const;
// num은 이제 123이라는 리터럴 타입이 됨

 

 

HTML 요소에서의 타입 단언

getElementById 가 반환하는 속성은 HTMLElement 이다.

이경우 버튼 속성인 disabled 를 호출하면 오류가 발생 한다.

 

 

버튼 요소로 선언 해서 오류를 제거 한다.

const button = document.querySelector("button") as HTMLButtonElement // 버튼요소로 선언

  button.disabled =false;

 

이경우 문제점은 button 요소가 없을 경우 null 값이 반환이 되는데 안전하게 접근하려면 해당 button이 존재하는지여부를 체크 해준다.

 

const button = document.querySelector("button")as HTMLButtonElement

//if(button){                                  // 방법 1 
//  button.disabled =false;
//}

if(button instanceof HTMLButtonElement){       // 방법 2
  button.disabled =false;

}

 

 

 

Non-Null 단언 연산자

 type 이 Optional 일 경우 name 의 값이 undefined 일 수 도 있다. 이럴 경우 매서드를 적용하면 아래와 같이 오류가 발생한다.

 

이럴경우 ! 연산자를 사용해 null이나 undefined가 아님을 단언한다.

 

 

 

 

<-- ! 연산자 적용