[TypeScript] Narrowing & Assertion 문법 정리

 

1. Type Narrowing ?

• if문 등을 사용하여 타입을 하나로 정하는(좁히는) 문법을 말한다.
• 사용하는 이유는 Union type을 사용하면 Narrowing(좁히다)문법을 사용해서 타입을 하나로 정해주거나
  Assertion(선언) 문법으로 타입을 선언해주는 것이 필요하기 때문이다.

2. Narrowing 문법 예시 

/* 1. type of 연산자를 사용해서 정하기 */ 

function NarrowingTest ( a : number  | string ) {
  if(typeof a === 'string') {
    return a + '1';
  } else {
  return 'a는 number입니다.'
}

/* 2 in 연산자를 사용해서 정하기 */ 
type Cookie = {choco : string }
type Ice = {berry : string }

function NarrowingTest2 ( a : Cookie  | Ice ) {
  if( 'choco' in a) {
    return a + '1';
  } else {
  return 'a는 number입니다.'
}
//union type이 서로 다른 속성을 가지고 있어야 in 키워드를 사용할 수 있다.

/* 3. instanceof 연산자를 사용해서 정하기 */ 
// => object 두 개가 비슷하면 부모 class가 누군지 물어봐서 narrowing 가능
let title = document.querySelector('#title');
if (title instanceof Element){
    title.innerHTML = '방가방가';
}

//타입을 하나로 확정 지을 수 있는 코드라면 어떤 것도 narrowing 역할 할 수 있다.

 

기타 Narrowing 방법 

/* 
1. && 사용 : 
논리연산자 여러개를 사용하면 비교할 때 자료형을 넣으면 
&&사이에 처음 등장하는 falsy값을 찾아거나 그게 아니면 마지막 값을 남겨준다. (null, undefined, NaN...)
*/
function Check(a : string | undefined) {
    // && 기호 사용 undefined까지 한번에 타입 체크  
    if( a && typeof a === 'string') {
		console.log(a);
    } 
}
// 추가로 if (a != null) 이렇게 조건식을 써도 null, undefined 이거 두 개를 동시에 거를 수 있다.

// 2. in 연산자 사용하기 (obj가 서로 다른 속성(유니크)을 가진 것을 구분할 때 사용) 
type bort Type인지 확인하는 문법) = {swin : string}  
type airplane = {fly : string} 
function Check_Type (Transit : bort | airplane) {
    /* 이 상황에서 만약 if typeof를 쓰면 object로 인식해서 오류가 발생한다.*/
    // if문을 사용해 narrowing (swin이 Transit에 들어 있는지, 있다면 bort Type인지 확인하는 문법)
  
  if('swin' in Transit) {
        Transit.swin;
    }    
}

3. Assertion 문법 ?

• 타입을 덮어씌우는 문법이다.
• 변수의 타입을 number로 생각해주세요 라고 하면 컴파일러가 넘어갈 수 있는 문법이다.
• 일반적으로 확실하게 정확한 값이 들어올 때 사용하며, Type 에러를 해결하는 용으로 사용한다.

4.  Assertion 문법 예시

//Assertion 문법 count는 number라고 주장하기에 컴파일러는 넘어가게 된다. 
function AssertionTest  (count : number|string) {
    return count as number + 1;
}

/* 
이전에는 요런 형식으로 작성했다. 
let chicken :string = 'soy';
<number>chicken
*/