한입 크기로 잘라 먹는 타입스크립트 : 타입스크립트 개론

초반부 간단한 이론 정리!

 

타입스크립트란

1. C# 개발자가 개발하여 유사한 부분이 많음

2. 인기가 많음(점점 더 많아지는 중)

3. 타입스크립트 = 자바스크립트의 확장판

- 자바스크립트를 더 안전하게 사용할 수 있도록 확장함

- 자바스크립트에 타입을 정의하는 문법만 추가하면 타입스크립트가 됨

4. 배워야하는 이유 : 간단한 기능을 위해 개발된 유연한(버그 가능성이 높은) 자바스크립트에 node.js(자바스크립트 구동기)가 더해져 자바스크립트로 다양한 구현이 가능해짐. 따라서 복잡한 프로그램을 만들 때 버그 가능성을 낮추기 위해(안전하게 사용하기 위해) 타입스크립트가 필요

 

자바스크립트의 한계점

타입 시스템 : 언어의 타입 관련된 문법 체계

- 정적 타입 시스템 : 코드 실행 전 변수의 타입 고정적으로 결정 ex. JAVA

- 동적 타입 시스템 : 코드 실행 후 그때그때 유동적으로 변수 타입 결정 ex. python, javascript

 

Javascript : 변수의 타입이 하나로만 고정되지 않음

-> 변수에 문자열 담았다가 숫자열 담아도 실행이 됨! 그러나 오류가 뜸

let a = 'hello'
let a = 12345

a.toUpperCase() -> 오류

 

Java : 타입 관련된 오류 발생 시 에디터 상에서 바로 알려줌, 실행 전 타입을 모두 체크함

-> 단, 변수에 모두 타입을 지정해줘야 하기 때문에 작성해야 할 타이핑 양이 매우 증가함

 

타입스크립트의 독특한 타입 시스템

정적 타입 시스템 + 동적 타입 시스템

- a가 숫자값으로 초기화 되면, a는 숫자 타입으로 추론

-> 모든 변수에 타입 지정할 필요가 없음 = 점진적 타입 시스템 Gradual Type System

 

타입스크립트의 동작 방식

컴퓨터가 언어를 이해하는 법

사람 - 프로그래밍 언어 - 컴파일러(변환) - 바이트 코드(기계어) - 컴퓨터

 

컴파일러의 컴파일 과정

JavaScript

Js 코드 -> AST(추상 문법 트리) -> 바이트 코드 -> 실행

 

TypeScript

Ts 코드 -> AST -> 타입 검사(Type Checking, 검사 실패 시 컴파일 종료) -> 타입 검사를 통과한 Js 코드 -> AST -> 바이트 코드 -> 실행

 

Hello TypeScript 실습 시작!

설치

npm i @types/node

npm i typescript -g

Hello TypeScript

-> ts-node를 통해 typescript를 한번에 실행 가능

 

컴파일러 옵션

ex. 타입 오류를 얼마나 엄격하게 검사할지, 자바스크립트 코드의 버전은 어떻게 할지

- 실무에서는 보통 옵션을 커스터마이징하여 사용함

 

아래 명령어 실행 시 tsconfig.json 생성

tsc --init

{
  "compilerOptions": { // 더 세분화된 옵션
    "target": "ESNext", // 컴파일된 Javascript의 버전 설정, ESNext : Javascript 최신 버전
    "module": "ESNext", // Javascript의 모듈 시스템 설정
    "outDir": "dist", // 컴파일된 Javascript 파일 경로 설정
    "strict": false, // 타입 검사를 엄격하게 하도록 설정 ex. 함수의 매개변수 타입 설정 여부
    // Js -> Ts 변환 시 수많은 오류를 막기 위해 임의로 false로 설정하기도 함
    "moduleDetection": "force", // 전역모듈에 따른 변수명 중복 오류 해결 : 컴파일된 Js 파일에 export {}; 추가해줌
  },
  "ts-node": {
    "esm": true // 기본적으로 ts-node는 CommonJS를 따르기 때문에 해당 옵션 추가하여 ESM 따르도록 설정
  },
  "include": ["src"] // 해당 경로의 모든 파일을 포함하여 한번에 컴파일 = 컴파일 범위 지정
}

전역모듈 관련 설명

typescript는 모든 ts 파일을 전역 모듈로 보기 때문에 다른 파일에 같은 변수명 설정 시 오류를 일으킴

해결 방법

1. export {}; -> 모듈화

2. tsconfig.json에 moduleDetection 설정 : js로 컴파일 시 export {}; 구문 자동 추가

 

모듈 관련 Error

C:\workspace\onebite-typesript\section2>ts-node index
node:internal/modules/cjs/loader:1080
  throw err;
  ^

Error: Cannot find module './index'
Require stack:
- C:\workspace\onebite-typesript\section2\imaginaryUncacheableRequireResolveScript
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at requireResolveNonCached (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:549:16)
    at getProjectSearchDir (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:519:40)
    at phase3 (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:267:27)
    at bootstrap (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:47:30)
    at main (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:33:12)
    at Object.<anonymous> (C:\Users\JAY\AppData\Roaming\nvm\v18.17.0\node_modules\ts-node\dist\bin.js:579:5)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\workspace\\onebite-typesript\\section2\\imaginaryUncacheableRequireResolveScript'
  ]
}

Node.js v18.17.0

-> Package.json에 type 추가 필요

{
  "name": "section2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module", // <- 해당 옵션 추가 필요