타입 계층도와 함께 기본타입 살펴보기

한 입 크기로 잘라먹는 타입스크립트 - 타입 계층도와 함께 기본타입 살펴보기

업캐스트, 다운캐스트를 이해했다면 이제 타입 계층도를 이해할 수 있게 되었다.

onebite-typescript/section3 폴더를 만든 뒤 vscode 로 해당 폴더를 연다. 이후 node.js 패키지를 초기화한 뒤, @types/node 패키지를 설치한다.

- Terminal

npm init 
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.

    See `npm help init` for definitive documentation on these fields
    and exactly what they do.

    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.

    Press ^C at any time to quit.
    package name: (section3)
    version: (1.0.0)                                                                                                                                                                                                                  
    description:                                                                                                                                                                                                                      
    entry point: (index.js)                                                                                                                                                                                                           
    test command:                                                                                                                                                                                                                     
    git repository:                                                                                                                                                                                                                   
    keywords:                                                                                                                                                                                                                         
    author:                                                                                                                                                                                                                           
    license: (ISC)                                                                                                                                                                                                                    
    About to write to D:\개발\인프런\한 입 크기로 잘라먹는 타입스크립트(TypeScript)\onebite-typescript\section3\package.json:

    {
    "name": "section3",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }


    Is this OK? (yes)
    npm notice 
    npm notice New minor version of npm available! 10.2.3 -> 10.8.2
    npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
    npm notice Run npm install -g npm@10.8.2 to update!
    npm notice

npm i @types/node
    added 2 packages, and audited 3 packages in 2s

    found 0 vulnerabilities

이후 타입스크립트 컴파일러 옵션을 설정하기 위해 tsconfig.json 파일을 생성하여 설정한다.

- tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext"
      , "module": "ESNext"
      , "outDir": "dist"
      , "strict": true
      , "moduleDetection": "force"
      , "skipLibCheck": true // 추가
    }
  , "include": ["src"]
  , "ts-node": {
        "esm": true
    }
}

ES 모듈 시스템을 사용하도록 package.json 파일에서 "type" 속성과 값을 추가한다.

- package.json

{
  "name": "section3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^22.1.0"
  }
}

모든 패키지 설정이 완료되었으므로, 설정이 잘 되었는지 확인하기 위해 src 폴더를 만들고 index.ts 파일을 생성한다.

- index.ts

console.log('Hello New Project');

이후 tsc 명령어를 이용하여 컴파일 후 컴파일된 자바스크립트 파일을 확인한다.

- Terminal

tsc

- dist/index.js

console.log('Hello New Project');
export {};

컴파일 결과를 node 로 실행하고 tsx 로 실행한다.

- Terminal

node dist/index.js
    Hello New Project

tsx src/index.ts
    Hello New Project

실습을 위한 프로젝트 설정을 완료했다.
section3 폴더에 타입계층도.png 파일을 복사한다.

 

타입계층도

src 폴더에 chapter2.ts 파일을 생성한다.

1. Unknown 타입
타입계층도 최상단에 위치해 있고, 타입스크립트의 모든 타입들의 슈퍼타입이다.
집합으로 말하면 전체집합이라고 볼 수 있다.
모든 타입의 값을 업캐스팅할 수 있기 때문에, 모든 값을 집어넣을 수 있다.

- src/chapter2.ts

// Unknown 타입
function unknownExam() {
    // unknown 타입 변수에 모든 타입을 넣을 수 있다.
    // 업캐스팅
    let a: unknown = 1;
    let b: unknown = 'hello';
    let c: unknown = true;
    let d: unknown = null;
    let e: unknown = undefined;

    // unknown 타입 변수는 어떤 타입 변수에도 들어갈 수 없다.
    // 다운캐스팅 안되기 때문
    let unknownVar: unknown;
    // let num: number = unknownVar;
    // let str: string = unknownVar;
    // let bool: boolean = unknownVar;
}

2. Never 타입
불가능, 모순을 의미하는 타입.
타입계층도 최하단에 위치해 있고, 타입스크립트의 모든 타입들의 서브타입이다.
집합으로 말하면 공집합(아무것도 없는 집합)이라고 볼 수 있다. 즉 모든 집합의 부분집합이다.
어떤 값도 never 타입에 저장될 수 없다.

- src/chapter2.ts

...
// Never 타입
function neverExam() {
    // 값 반환 자체가 말이 안됨. 즉 반환되는 값 없음.
    function neverFunc(): never {
        while (true) {}
    }

    // 업캐스팅
    let num: number = neverFunc();
    let str: string = neverFunc();
    let bool: boolean = neverFunc();

    // 다운캐스팅
    // let never1: never = 10;
    // let never2: never = 'string';
    // let never3: never = true;
}

3. Void 타입
반환값 즉, return 문 자체가 없는 함수에 반환값 타입을 명시하는데 사용.
타입계층도 중간에 위치하는 평범한 타입이다.
눈여겨볼 점은 undefined 타입의 슈퍼타입이다. 따라서 undefined 값을 넣을 수 있다.

- src/chapter2.ts

...
// Void 타입
function voidExam() {
    function voidFunc(): void {
        console.log('hi');
        // return undefined; // 가능
    }

    // 업캐스팅
    let voidVar: void = undefined;
}

4. Any 타입
타입계층도에서 unknown 타입의 서브타입이지만, 치트키 타입이라고 할 수 있다. 타입계층도를 완벽히 무시하기 때문이다.
모든 타입의 슈퍼타입으로 위치하기도 하며, 반대로 모든 타입의 서브타입(never 타입 예외)으로 위치하기도 한다.
위험한 타입이므로 왠만하면 사용하지 않을 것이 권장된다.

- src/chapter2.ts

...
// Any 타입
function anyExam() {
    let unknownVar: unknown;
    let anyVar: any;
    let undefinedVar: undefined;
    let neverVar: never;

    // 다운캐스팅 가능
    anyVar = unknownVar; // any 타입을 타겟으로 상위 타입을
    undefinedVar = anyVar; // 다른 타입을 타겟으로 any 타입을
    // 다운캐스팅 불가능 (never 타입은 순수한 공집합이기 때문)
    // neverVar = anyVar;
}

이번 시간을 통해 타입계층도를 보고 하나의 타입이 업캐스팅 또는 다운캐스팅 될 수 있는지 분간할 수 있으면 된다.


참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런