2주차

728x90

컴파일러- 정적 언어(=컴파일 언어) → 기계어로 변환이 되어야 함
- 동적 언어(=인터프리터 언어) → 엔진이 코드를 한 줄씩 실행하면서 동적으로 해석

명령어
- 자세한 명령어 옵션 확인
https://www.typescriptlang.org/docs/handbook/compiler-options.html

- 주요 명령어
    - `tsc —-init`
        - tsconfig.json이 생성

    - `tsc index.ts`
        - index.ts를 컴파일
        - .ts**는 TypeScript 파일의 확장자

    - `tsc src/*.ts`
        - src 디렉토리 안에 있는 모든 TypeScript 파일을 컴파일

    - `tsc index.js --declaration --emitDeclarationOnly`
        - @types 패키지를 위한.d.ts 파일 생성
        - TypeScript로 작성된 모듈이 아니라 JavaScript로 작성된 모듈에 타입 선언을 제공할 때 사용용

tsconfig.json 해부하기
옵션 매뉴얼
https://www.typescriptlang.org/ko/tsconfig/

compilerOptions - strict옵션은 true로 설정
compilerOptions - sourceMap옵션은 개발 환경에서 true로 설정

tsconfig.json : tsc --init 명령을 실행하면 생성되는 파일
  tsconfig.json은 TypeScript 프로젝트의 설정 파일
  주로 프로젝트의 컴파일 옵션 및 입력 파일들을 정의하는데 사용

compilerOptions - target 옵션
  해당 TypeScript 프로젝트 내 코드들이 어떤 JavaScript 버전으로 변환을 할 지 정하는 옵션
  `es5` 로 설정하면 CommonJS 버전으로 컴파일 (레거시한 환경에서 동작)
     레거시 : 과거에 개발되어 현재에도 사용 중인 낡은 하드웨어나 소프트웨어
  `es2016(=es7)` 로 설정하면 ES2016 버전으로 컴파일
    (최신 브라우저는 보통 ES2016을 지원)

compilerOptions - module 옵션
- TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정
- 모듈을 가져오고 내보내는 방식을 결정하는 옵션
- target 옵션과는 서로 독립적인 관계.
   프로젝트의 요구사항에 따라 옵션을 설정

compilerOptions - outDir 옵션
- 컴파일된 JavaScript 파일이 저장될 출력 디렉터리를 지정
   ex) `"outDir": "dist"`로 설정하면 컴파일된 파일들이 `dist` 폴더에 저장되죠!

`compilerOptions - strict` 옵션
- 엄격한 타입 검사 옵션을 모두 활성화하는 옵션
- TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있다다.
- 해당 옵션을 true로 설정하면 아래의 옵션들이 자동으로 true로 설정.
    - `strictNullChecks`
        - 잠재적으로 null(undefined)이 될 수 있는 값들에 대해서 엄격하게 확인하는 옵션
    - `strictFunctionTypes`
    - `strictBindCallApply`
    - `strictPropertyInitialization`
    - `noImplicitAny`
        - 함수의 인자 또는 변수의 타입이 명시적으로 선언되지 않은 경우에 컴파일러가 자동으로 `any`타입을 부여하지 않도록 함함.
            활성화하면 개발자가 누락된 타입 선언을 확인하고 명시적으로 타입을 선언할 수 있다.
    - `noImplicitThis`
    - `alwaysStrict`
사용하는 옵션은 꼭 true로 설정하기

compilerOptions - sourceMap
- 컴파일된 JavaScript 파일에 대한 소스 맵을 생성
- 소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인할 수 있다.
- 코드 디버깅에 도움이 되기 때문에 개발 환경에서 true로 설정하기기
    - 프로덕션 환경에서는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수 있다.

include , exclude 옵션
- tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정
- “include": ["src/**/*"]
    - src 디렉토리 밑의 친구들을 컴파일 한다
- "exclude": ["node_modules", "dist"]
    - node_modules, dist 디렉토리 밑의 파일은 컴파일 대상에서 제외한다.

.d.ts 파일 알아보기
TypeScript는 @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공
.d.ts` 파일
  TypeScript 타입 정의 파일.
  즉, JavaScript 라이브러리에 대한 타입 정보를 제공.
- `.d.ts` 파일로 TypeScript 컴파일러가 알 수 있는 것
https://emojipedia.org/flexed-biceps/
    - 외부 라이브러리의 함수 타입 정보
    - 외부 라이브러리 클래스 타입 정보
    - 외부 라이브러리 객체 타입 정보
    - 외부 라이브러리의 타입 추론도 할 수 있다.
        타입 추론이란 타입이 명시가 되지 않았을 때 컴파일러가 알아서 해당 타입에 대해 추론을 하는 것이

- JavaScript 라이브러리를 TypeScript에서 쓰려면 해당 라이브러리에 대한 .d.ts 파일만 제공 하면 된다.
- TypeScript 프로젝트에서도 JavaScript 라이브러리를 한 줄도 수정하지 않고 그대로 쓸 수 있다.

_________실습_________________________
- JavaScript 라이브러리를 TypeScript 프로젝트에서 사용해보기

1. 터미널에서
npm init -y   # Node.js 프로젝트 생성.

tsc --init  # tsconfig.json을 생성( TypeScript 프로젝트로 변환시키기 )

2. tsconfig.json을 열어서 아래의 옵션을 주석 해제하여 true로 설정.
"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
"checkJs": true // JavaScript 파일 타입 체크 여부

3. TypeScript에서 사용하고 싶은 커스텀 JavaScript 라이브러리(./src/test.js)를 만들기.

JSDoc은 API의 시그니처 (인자, 리턴 타입)를 설명하는 HTML 문서 생성기
JSDoc으로 자바스크립트 소스코드에 타입 힌트를 제공

 /** // JSDoc
* @param {number} a
* @param {number} b
* @returns {number}
*/
export function add(a, b) { // export를 넣지 않으면 import 할 수 없는 것 아시죠?
  return a + b;
}

4. 터미널 - JSDoc으로 타입 힌트가 제공된 test.js의 .d.ts 파일을 만들기
        npx tsc ./src/test.js --declaration --allowJs --emitDeclarationOnly --outDir types

    types/test.d.ts
        /**
         * @param {number} a
         * @param {number} b
         * @returns {number}
         */
        export function add(a: number, b: number): number;

5. test.js 파일을 참조할 foo.ts 파일

        import { add } from "./test";
        console.log(add(1, 2));

6. 터미널 - foo.ts 파일을 실행
        npx ts-node foo.ts

____실습1______

tsconfig.json 해부하기
https://teamsparta.notion.site/tsconfig-json-18e9fb5007194b3a9e659b151f1253ae

화경설정
1. 해당 디렉토리의 터미널에서 실행.

    npm init -y
    tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true

  - `--rootDir ./src`
        - 프로그램의 소스 파일이 들어가는 경로는 src 디렉토리입니다.
  - `--outDir ./dist`
        - 컴파일이 된 파일들이 들어가는 디렉토리는 dist 디렉토리입니다.
  - `--esModuleInterop`
        - CommonJS 방식의 모듈을 ES모듈 방식의 import 구문으로 가져올 수 있습니다

2. package.json의 “scripts” 항목 수정.
    TypeScript 프로젝트 실행을 편하게 하고자 함
"scripts": {
    "start": "tsc && node ./dist/index.js",
    "build": "tsc --build",
    "clean": "tsc --build --clean"
},

3. src 디렉토리 생성

-참고
  Visual Studio Code는 터미널에서
    code .
로 해당 디렉토리 위치를 기반으로 편집기를 열수 있다.