타입스크립트 알아보기

조성원·2023년 5월 30일
0

TypeScript 환경 구성

  1. 타입스크립트 설치

    npm install typescript --save-dev
  2. tsconfig.json 설정

    {
      "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "./dist"
      },
      "include": [
        "src/**/*"
      ]
    }
    • sourceMap : 소스 맵 파일을 생성할지 여부를 결정합니다. 소스 맵 파일은 기존의 타입스크립트와 자바스크립트 사이의 매핑 정보를 가지고 있기에 VScode에서 디버깅이 가능해집니다.
    • outDir : 컴파일 후 생성되는 js파일이 어떤 폴더에 담길지 설정합니다. 만약 해당 폴더가 없으면 새로 만들어집니다.
    • include : 자바스크립트로 변환할 폴더를 지정합니다. 위 예시에서는 src 폴더 하위의 모든 파일을 자바스크립트로 변환하도록 설정되어 있습니다. 혹은 files 옵션을 사용하여 어떤 파일을 변환할지 직접 지정할 수 있습니다.
    • exclude : 변환하지 않을 폴더를 지정합니다. 설정하지 않으면 자동으로 node_modules 같은 폴더를 제외합니다.

타입스크립트의 타입

타입스크립트는 자바스크립트와 거의 동일한 타입을 제공합니다.
Boolean, Number, String, Array, Tuple, Object, Any 등이 있습니다.

  • 타입 병기
    타입스크립트는 Boolean, Number, String 타입 등을 선언할 때 : 기호와 함께 타입을 병기합니다.
    ```jsx
    let isOpened: boolean = false;
    let count: number = 1;
    ```
  • Array 타입 선언
    그러나 배열의 경우 아래와 같이 조금 다른 방식으로 선언합니다.
    ```jsx
    // 1: 타입명[]으로 선언하는 방식
    const items: string[] = ["box", "gun", "paper"];
    
    // 2: Array<타입명>으로 선언하는 방식 (이를 제네릭 배열 타입이라 함)
    const items: Array<string> = ["box", "gun", "paper"];
    ```
  • Object 타입 선언
    Boolean, Number, String 타입을 선언할 때 작성했던 것처럼 타입을 병기할 수 있습니다. 그러나 이 방식은 객체의 프로퍼티 타입이 모두 any로 지정되기 때문에 타입 안정성이 보장되지 않습니다.
    따라서 객체의 각 프로퍼티 타입을 각기 명시하는 것을 추천합니다.
    ```jsx
    const user: object = {};
    const user: {name: string, age: number} = {
    	name: "kimcoding",
    	age: 20
    };
    ```
  • Any 타입
    알지 못하는 타입을 표현할 때 사용합니다. 이 타입을 사용하면 타입에 구애받지 않고 값을 재할당할 수 있습니다.
    또한 엄격한 타입 검사를 진행하지 않기 때문에 할당된 값이 가지고 있지 않은 메서드나 프로퍼티로 접근해도 에러가 발생하지 않고 그저 undefined가 반환됩니다.
    ```jsx
    // 최초에 Number 타입을 할당
    let something: any = 0;
    
    // Boolean 타입을 재할당했으나 정상적으로 동작
    something = false;
    
    // undefined 반환
    console.log(something.length); // undefined
    ```
  • Tuple 타입
    요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다. 자바스크립트와 달리 각 요소의 타입을 명시적으로 선언할 수 있습니다.
    ```jsx
    const food: [string, number, boolean] = ["soup", 8000, true];
    ```
profile
IT 트렌드에 관심이 많은 프론트엔드 개발자

0개의 댓글