TypeScript 연습 <1> -3-

________________________________________________________________________

 

TypeScript 에는 그 외에 어떤 타입들이 존재하는가 -3-

 

 

 

< unknown 타입 >

< void 타입 >

< never 타입 >

 

 

 

이번 장에서 배우게 될 타입들은 굉장히 독특한 타입들이야.

왜? 여태까지는 자바스크립트에서 사용되는 타입들이었는데, 이번에 배우게 될 것들은 타입스크립트에만 있는 것들이거든.

 

타입스크립트에서 중요한 것은

“ type checker “ 와 소통하는 것.

우리가 코드에 타입을 설명해 주면, 타입 체커는 개발자가 멍청한 짓을 하지 못하도록 도와주는 거지.

 

 

 

 

 

1.

_______________________________

 

< unknown 타입 >

 

 

그렇다면, 어떤 타입인지 모르는 변수는 타입스크립트에게 어떻게 설명해줘야 할까.

특정 api 로 부터 값을 받아오는데, 그 값의 타입을 우리가 모를 수도 있잖아.

그럴 때 unknown 을 사용하지.

 

——

let abc : unknown;

——

=> 끝. abc 의 타입을 unknown 이라고 명시해 주면 돼.

 

 

 

즉, abc 변수를 사용할 때에는 아래처럼 제약을 걸어줘야지 오류가 발생하지 않을거야.

——

let abc : unknown;

 

let b = abc + 1 // abc 에 빨간줄이 그이며 오류 발생.

 

if (typeof abc === "number") {

    let bb = abc + 1

}

——

=> if 안에서는 제약을 걸었기 때문에 오류가 발생하지 않아.

 

 

추가.

——

let abc : unknown;

 

let b = abc + 1 // 오류 발생

 

if (typeof abc === Number) { // 오류 발생

    let bb = abc + 1

}

——

=> "number" 이 아니라 Number 를 사용하면 오류가 발생. 내용은 즉슨…

 

An object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.

This comparison appears to be unintentional because the types 'string' and 'NumberConstructor' have no overlap.

 

번역하면,

모든 종류의 숫자를 나타내는 개체입니다. 모든 JavaScript 숫자는 64비트 부동 소수점 숫자입니다.

이 비교는 'string' 및 'NumberConstructor' 유형이 겹치지 않기 때문에 의도하지 않은 것으로 보입니다.

 

즉 뭔 소리냐.

——

const ccc : string = "hfdshjkf";

const ddd : string = typeof ccc

——

이 코드는 정상 작동 하거든? 말인 즉슨 typeof 로 타입을 알게 되면 해당 코드는 string 이라는 거지.

 

 

다시 본론으로 돌아와서.

 

——

let abc : unknown;

 

let b = abc + 1 // 에러

 

if (typeof abc === "number") {

    let bb = abc + 1

}

if (typeof abc === "string") {

    let eee = abc.toUpperCase();

}

——

=> 마찬가지로 typeof abc === "string" 라는 제약조건을 줬기 때문에,

let eee = abc.toUpperCase() 처럼 마치 abc 가 알파벳 문자열이라고 확신하는 듯한 코드를 작성해도 오류가 뜨지 않아.

 

 

즉, 정리하자면.

Unknown 타입은 해당 변수로 들어오는 값이 무엇일지 모를 때 사용하는 타입.

나중에 해당 변수에 숫자가 들어오든 문자가 들어오든 여전히 타입은 unknown 일 것이고, 

사실 애당초 해당 변수에 어떤 값이 들어올지는 프로그램은 몰라.

따라서 해당 변수를 나중에 사용하고 싶다면 if 문 등을 사용해서 변수를 핸들링 해줘야 해.

 

 

 

 

 

 

2.

_______________________________

 

< void 타입 >

 

 

void 는 아무것도 return 하지 않는 함수를 대상으로 사용해.

=> 쒯! 완전 자바잖아 이거

 

다음과 같이 타입 추론을 활용하여 함수를 선언한다고 가정하자.

——

const hello = () => {

    console.log("hello")

}

 

// hello 에 마우스를 가져다 대면 다음과 같은 문구가 나와.

// const hello: () => void

——

=> hello 함수는 void 타입이라는 걸 알 수 있어.

void는 아무것도 return 하지 않는 실행 함수야.

그리고 우리는 굳이 void 함수에 void 라고 타입을 명시해줄 필요가 없어.

타입스크립트는 자동으로 ‘아, 이 함수는 아무것도 return 하지 않는 구나’ 라고 인식해 주거든.

 

물론,

——

const hello = (): void => {

    console.log("hello")

}

——

이렇게 명시해 줘도 아무런 문제는 없어.

 

 

 

 

 

 

3.

_______________________________

 

< never 타입 >

 

 

never 은 많이 사용되지는 않지만 알아는 둬야 해.

never 는 함수가 절대 return 하지 않을 때 발생해.

예를 들어 함수가 예외를 발생시킬 때.

 

——

const hello2 = () : never => {

    return "X"; // 오류 발생

}

——

 

 

——

const hello2 = () : never => {

    throw new Error("Error")

}

——

=> 문제 없음.

 

 

추가로, never 는 타입이 두 가지 일 수도 있는 상황에서도 발생할 수 있어.

——

const hello2 = (name: string | number) => {

    if (typeof name === "string") {

        name    // string

    } else if (typeof name === "number") {

        name    // number

    } else {

        name    // never

    }

}

——

=> (name: string | number) 에서 우리는 타입스크립트에게 매개변수는 string 혹은 number 이다 라고 알려 줬었고,

때문에 함수 내부에서 name 인자가 string 혹은 number 가 아닐 상황이 발생한다면 그 때는 무조건 타입이 never 로 고정.

 

그게 무엇을 의미하는가.  name // never 구문은 절대 실행되지 않아야 한다는 것.

따라서 else {} 구문은 해당 함수가 정상적으로 작동한다면 결코 실행되지 않을 구문인거지.