본문 바로가기

프론트엔드/Typescript

기본타입, 초기 환경 설정

📌 기본타입이란?

- 타입스크립트가 자체적으로 제공하는 타입을 말하며, 다른 말로 내장 타입이라고 할 수 있다.

 

타입 계층도

📌 초기 환경 설정하기

> npm init

    - Node.js 패키지 초기화

    - 📂 package.json 생성

 

> npm i @types/node

    - Node.js의 내장 기능(함수, 클래스)에 대한 타입 선을 제공하는 패키지

    - 📂 node_modules 폴더 생성

📝 tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "dist",
        "strict": true,  
        "moduleDetection": "force"
},
    "include": ["src"]
}

✨ 설정한 옵션 의미

target : 컴파일 결과 생성되는 자바스크립트 코드의 버전 결정, ESNext최신 자바스크립트를 의미함
module : 컴파일 결과 생성되는 자바스크립트 코드의 모듈 시스템 결정
outDir : 컴파일 결과 생성되는 자바스크립트 파일들의 위치 결정 --> 폴더 자동 생성
strict : 엄격한 타입 검사 여부 설정
moduleDetection : 모든 타입스크립트 파일(.ts)에 export 키워드를 자동으로 추가하여 격리된 모듈로 취급되도록 만드는 옵션
include : tsc로 컴파일 할 타입스크립트 파일의 범위 설정

📝 package.json

{
    ...
    "type": "module",   <--- 추가하기
    ...
}

👉 모든 타입스크립트 파일 컴파일하기

Terminal
> tsc

👉 node를 이용해 index.js 실행하기

> node dist/index.js

👉 ts-node를 이용해 타입스크립트 파일 실행하기

> ts-node src/index.ts

▼ ts-node옵션을 tsconfig.json에 아래와 같이 추가해야됨 

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

 

출처 : 한 입 크기로 잘라먹는 타입스크립트(이정환 Winterlood) / 강의 바로가기

'프론트엔드 > Typescript' 카테고리의 다른 글

배열, 튜플, 객체  (0) 2023.07.17
원시타입, 리터럴 타입  (0) 2023.07.17
타입스크립트란?  (0) 2023.07.13