[한입챌린지] 타입스크립트 DAY2

Lina Hongbi Ko·2025년 2월 26일

한입챌린지-타입스크립트

목록 보기

2/9

DAY2

2025년 2월 21일

✨ 타입스크립트 컴파일러 옵션 설정

타입스크립트 코드 작성 후, 컴파일 과정을 거쳐 자바스크립트 코드로 변환하는 과정을 실행해 보았음
타입스크립트의 컴파일 과정에서 우리가 작성한 코드의 오류를 검사하고, 오류가 없으면 자바스립트 코드로 변환하는데, 이러한 컴파일 과정에서 세부적인 상황들을 설정할 수 있음 -> 옵션 설정 가능
타입스크립트는 다른 언어들에 비해 컴파일러 옵션을 자유롭고 쉽게 설정할 수 있음 (실무에서 진행하는 프로젝트의 성격에 따라 설정해서 사용함)
타입스크립트 컴파일러 옵션은 node.js 패키지 단위로 설정할 수 있음 (프로젝트마다 설정 가능)
저번 시간에 살펴본 tsc 도구를 사용하면 기본적인 옵션이 다 자동으로 설정된 컴파일러 옵션 파일을 자동으로 만들 수 있음 -> tsconfig.json 파일 생성됨
```
tsc --init
```
- tsconfig.json : typescript configuration. 타입 스크립트 컴파일러의 설정 파일
- 대부분 주석처리 되어있으며, 옵션을 바꾸면 tsc의 동작이 바뀜

✨ tsconfig.json 파일 설정

자동 생성된 옵션들은 일단 다 삭제 (하나씩 설정해볼 예정)

📍 include

tsc가 컴파일 하려는 타입스크립트 파일들의 범위와 위치를 알려주는 옵션
- 앞에서 src/index.ts 파일을 컴파일 하려면 tsc src/index.ts 라고 경로까지 명령 해줘야 했었음
- 그런데 100개의 index.ts 파일을 컴파일 하려면 경로를 일일이 명령해주기 너무 귀찮음
- src 폴더 아래 모든 타입스크립트 파일을 한번에 컴파일할 수 있도록 설정
  - src 폴더 아래의 모든 파일을 한번에 컴파일하라는 명령 -> 경로를 지정해주지 않고 tsc만 입력해도, src 폴더 아래의 타입스크립트 파일들을 모두 컴파일해줌
```
{
  "include" : ["src"]
}
```

📍 target

타입스크립트 코드를 컴파일 해서 만들어지는 자바스크립트 코드의 버전을 설정하는 옵션
- 예를 들어, ES5로 설정하면 화살표함수로 작성해도 함수 표현식으로 컴파일하게 되지만 ESNext(자바스크립트 최신 버전)로 설정하면 화살표함수로 컴파일 됨
```
{
  "compilerOptions" : {
    "target" : "ESNext"
  },
  "include" : ["src"]
}
```

📍 module

변환되는 자바스크립트 코드의 모듈 시스템 설정 옵션

자바스크립트의 모듈 시스템은 CJS 모듈과 ES 모듈 시스템이 있음
참고1: CJS와 ES
참고2: 모듈과 ES모듈

{
  "compilerOptions" : {
    "target" : "ESNext",
    "module" : "ESNext" // ES모듈 (CJS모듈: CommonJS)
  },
  "include" : ["src"]
}

📍 outDir

컴파일 결과 생성될 자바스크립트 파일들이 어디에 위치할지 설정하는 옵션
- dist 라는 폴더 안에 자바스크립트 파일들이 위치하도록 설정하고 싶음
```
{
  "compilerOptions" : {
    "target" : "ESNext",
    "module" : "ESNext",
    "outDir" : "dist"
  },
  "include" : ["src"]
}
```

📍 strict

타입스크립트 컴파일러가 타입을 검사를 할 때 얼마나 엄격하게 검사할지 설정하는 옵션 (중요!!)
엄격한 타입 옵션을 검사하는 옵션임
타입스크립트에서는 매개변수의 타입을 프로그래머가 지정하도록 권장함
- 매개변수의 타입이 뭐가 될지 알수 없기 때문
- 매개변수의 타입을 추론할 수 없기 때문
- false로 설정하면 매개변수의 타입을 지정하지 않아도 됨 (타입을 유연하게 검사함)
- true로 설정하면 최대한 타입 오류가 없도록 하기 위해 엄격하게 검사함
그런데 자바스크립트 코드를 타입스크립트로 마이그레이션 하는 경우, strict모드를 true로 엄격하게 지정하면 대참사가 일어나서 간혹 끄기도 한다고 함
```
{
  "compilerOptions" : {
    "target" : "ESNext",
    "module" : "ESNext",
    "outDir" : "dist",
    "strict" : true
  },
  "include" : ["src"]
}
```

📍 moduleDetection

자바스크립트에서는 파일들이 개별적으로 모듈로 취급받기 때문에 파일별로 동일한 변수를 작성해도 전혀 문제가 되지 않았음
그런데 타입스크립트는 기본적으로 모든 타입스크립트 파일을 전역 모듈로 봄 -> 이 말은, 전역적인 공간에 같이 있다고 생각함(모두다 같은 공간에 있다고 생각함)
1. 첫번째 해결 방법
- 모듈 시스템 사용(ES모듈 시스템)을 파일 내에서 한 번 이상이라도 작성하면 그 파일은 독립된 공간으로 바라봄
```
const a = 1;
 export { a };
```
1. 두번째 해결 방법
- tsconfig.json에 옵션 설정
- 타입스크립트가 각각의 파일을 어떤 모듈로 감지할지 결정하는 옵션
- 타입스크립트 컴파일러가 자동으로 모듈 시스템을 사용하는 코드를 추가해줌 (module옵션에 설정해놓은 모듈 시스템에 따라 자동으로 추가해줌)
```
 {
   "compilerOptions" : {
     "target" : "ESNext",
     "module" : "ESNext",
     "outDir" : "dist",
     "strict" : true,
     "moduleDetection" : "force"
   },
   "include" : ["src"]
 }
```

📍 skipLibCheck

특정 라이브러리에서 타입 검사시 오류가 발생함
타입 정의 파일(.d.ts 확장자를 갖는 파일)의 타입 검사를 생략하는 옵션
- 보통 타입 정의 파일은 라이브러리에서 사용하는데 가끔 라이브러리의 타입 정의 파일에서 타입 오류가 발생하는 일이 있을 수 있어서 해당 옵션을 true로 설정해 놓으면 불필요한 타입 정의 파일의 타입 검사를 생략하도록 설정함
```
{
  "compilerOptions" : {
    "target" : "ESNext",
    "module" : "ESNext",
    "outDir" : "dist",
    "strict" : true,
    "moduleDetection" : "force",
    "skipLibCheck": true
  },
  "include" : ["src"]
}
```

📍 type (package.json 파일 설정 옵션)

터미널에 node src/index.js를 명령하면 "SyntaxError: Unexpected token 'export'" 이런 오류가 뜸
node.js가 es모듈 시스템을 해석할 수 있도록 설정해야함
- package.json 파일에 아래의 내용 추가해야함
```
{
"type" : "module"
}
```

✨ 타입스크립트의 기본 타입

타입스크립트가 자체적으로 제공하는 타입 / 내장 타입

✨ 타입스크립트의 원시 타입

동시에 딱 하나의 값만 저장할 수 있는 타입

배열이나 객체는 여러개의 값을 저장할 수 있음

// number
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;

num1.toFixed();

// string
let str1: string = 'hello';
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${num1}`;

str1.toUpperCase();

// boolean
let bool1: boolean = true;
let bool2: boolean = false;

// null
let null1: null = null;

// undefined
let unde1: undefined = undefined;

// 리터럴 타입
// 리터럴 -> 값
let numA: 10 = 10;
numA = 10; // 10만 넣을 수 있음

let strA: 'hello' = 'hello';
let strA: 'hello' = 'hi'; // 오류 발생
let boolA: true = true;
let boolA: true = false; // 오류 발생

: number 처럼 변수의 이름 뒤에 콜론을 쓰고 타입을 작성하는 것을 타입 주석(type annotation)이라고 함 (타입스크립트에서 변수의 타입을 정의하는 가장 기본적인 방식)
각 변수에는 타입에 해당하는 값만 넣을 수 있고, 마찬가지로 메서드도 해당 타입에 관련된 것만 사용할 수 있음
중간에 넣을 값이 없을 때 null을 임시로 넣고 싶다면, 컴파일러 옵션을 조절하면 됨 (엄격한 null 검사 하지 않겠다는 말)
- let numA: number = null;
- "strictNullChecks": false 설정
- strict가 상위 옵션이기 때문에 strict가 true이면 strictNullCheck 옵션도 true로 설정됨 (반대도 마찬가지)
```
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": true,
    "strictNullChecks": false,
    "moduleDetection": "force",
    "skipLibCheck": true
  },
  "include": ["src"]
}
```