[TypeScript] Narrowing After a Type Guard

 

 

안녕하세요 동기 여러분! 오늘은 타입 좁히기 마지막 시간으로 저저번 시간에 if문을 두 개 쓰다가 저번 시간에는 else로 바꿔서 코드를 깔끔하게 다듬어 줬는데 이번 시간에는 그 else도 없애버리겠습니다 ㅎㅎ

 

 

 

 

Narrowing After a Type Guard

타입스크립트가 타입을 좁히는 방법이 조건문을 사용하여 변수가 특정한 타입인지 아닌지를 확인하고 이것을 우리가 타입 가드(Type guard)라고 부른다고 알아봤었습니다.

 

오늘의 제목인 Narrowing After a Type Guard(타입 가드 후 좁히기)인데요 → 아니 타입 가드를 했는데 그 후에 또 타입을 좁힌다고???

 

---

 

이게 머선소리고?

 

아래는 세 번째 우려먹고 있는 코드입니다. 저번 시간에는 아래와 같이 함수에 if문과 else를 써준 깔끔한 코드입니다.

type Bionic = {
    run: () => string;
}

type Mechanic = {
    drive: () => string;
}

const marine = { 
    run: () => '자! 가자, 가자!, 좋았어!, 한바탕 놀아볼까!'
}

const siegeTank = { 
    drive: () => '이동!, 전진 앞으로!, 기꺼이!'
}

function move(unit: Bionic | Mechanic) {
    if('run' in unit) {
    	return unit.run();
    } else {
   	return unit.drive();
    }
}

 

아래는 else 마저 없애버린 아주 깔끔한 코드가 되었습니다.

type Bionic = {
    run: () => string;
}

type Mechanic = {
    drive: () => string;
}

const marine = { 
    run: () => '자! 가자, 가자!, 좋았어!, 한바탕 놀아볼까!'
}

const siegeTank = { 
    drive: () => '이동!, 전진 앞으로!, 기꺼이!'
}

function move(unit: Bionic | Mechanic) {
    if('run' in unit) {
        return unit.run();
    } 
        return unit.drive();   // <- else가 사라짐
    
}

console.log(move(marine));
console.log(move(siegeTank));

• else도 없애 버릴 수가 있었던 이유는 바로 코드가 작동하는 방식 때문에 생기는 일인데요.
• 코드는 위에서 아래로 문장을 실행하고 return을 만나면 작동을 정지하고 리턴값을 되돌려주죠!
• 함수 move가 실행될 때 만약 'run'이 unit에 있다면 unit.run();이 실행되고 리턴값이 되어 함수의 작동은 끝이 나고
• 함수 move가 실행될 때 'run'이 unit에 없다면 그대로 쭉 내려가서 unit.drive();를 실행시키고 리턴값이 되어 함수의 작동이 끝나기 때문이죠!

 

---

 

오늘의 느낌

창밖의 날씨가 참 좋아서 온도를 봤더니 -15°C... 춥구나