(21.10.27) TS] Type assertion에 관하여

작은 지식이라도, 하루에 하나씩.

---

 

한 줄 요약

---

🦄TypeScript에서는 시스템이 추론 및 분속한 타입 내용을 변경 할 수 있는데, 이를 Type assertion이라고 한다.쉽게 말해, 프로그래머가 내가 이 자료의 타입을 잘 알고 있으니, 토 달지 말라고 선언 해주는 것이다.🦄

**Type Casting라고도 하는데, 이보다는 Type assertion이 더 적합한 표현이다.
일반적으로 캐스팅이라는 말은 실행 시간에 어떤 동작이 일어날 것임을 내포하기 때문이다. 

 

 

본문

---

1. 타입 어센션을 하는 방법

 

• <foo> : 꺽쇠를 변수 앞에 작성
• as foo : 변수 뒤에 붙임

* 용례

var foo:any;
var bar = <string>foo // 이제 bar의 타입은 string입니다.
var bar2 = foo as Boolean // 이제 bar의 타입은 Boolean입니다.

 

그러나 보다시피 꺽쇠 표기법은 JSX에서 문법적으로 헷갈리기에, 그런게 있다는 것만 알아두고 as 표기법을 쓰자.

 

 

2. 이중 표명

 

개발자가 스스로 타입을 단언하는 것은 많은 위험성을 내포하고 있다. 그러나, 타입스크립트가 추론한 타입보다 더 좁은 타입을 선언해주는 것은 아주 정당한 사용 사례로 평가 받고 있다. 간단한 예시를 확인해보자.

 

 

function handler (event: Event) {
    let mouseEvent = event as MouseEvent; 
    /* params의 타입인 event를 MouseEvent라는 더 좁은 타입으로 선언하여 
    mouseEvent라는 새로운 변수에 할당 */
}


// 넓은 타입으로 구성된 배열을 순회할때도
// 각 요소들을 좁은 타입으로 재선언할 수 있다. (물론 두 타입이 충분히 겹쳐야한다)

type SampleType = {
	id: string;
    userData:unknown;
    }
    
type DetailedSampleType ={
	id:string;
    userData:{
    	nickname:string,
    	job: string
       }
 	}
    
 const sampleArr:Array<SampleType> = getSampleTypeArray()
 
 sampleArr.forEach((elem)=>{
 	// 이시점에서는 elem은 SampleType이지만,
    const newElem = elem as DetailedSampleType
    // 이 newElem은 DetailedSampleType이 된다
    
    console.log(elem.userData.nickname) // userData가 unknown 타입이라 접근 자체가 불가
    console.log(newElem.userData.nickname) // newElem은 DeatiledSampleType이라 접근 가능

 

 

 

3. 타입이 Nested 된 경우, 대괄호 접근법으로 접근 가능

 

어떤 변수에 타입을 지정해줘야하는데, 우연히도 그 타입이 Object 안에 Nest된 타입인 경우, 대괄호 접근법으로 해당 타입을 가져올 수 있다. 

 

말로 하려니까 잘 표현을 못하겠으니, 예시를 확인하자.

 

type Sample = {
	id:string;
    name:string;
    target:{nickname:string, age: number}
}


const age = mikeAge as Sample['target']['age'] // age는 이제 number 타입입니다

 

근데 이걸 뭐라고 지칭하는지는 모르겠다. 오늘 팀장님한테 배운 문법인데, 팀장님 본인도 구글링하다 알아낸거라 정확한 이름을 모르신다고 한다. 혹시 만약에 이 블로그 보는 분들 중 이 문법을 뭐라 하는지 아신다면 꼭 알려주시길 바랍니다.

 

 

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

거의 한달 만에 글을 쓰는데, 변명을 하자면 요즘 너무 바빴습니다.... 회사일 하시면서도 꾸준히 블로그 글 작성하시고, 공부도 열심히 하시는 개발자분들 너무 존경스러워지는 요즘입니다