TypeScript

---

목차

1. typescript란

2.  typescript를 사용하는 이유
3. typescript 설치

4. node 런타임 환경 실행

5. tsconfig 설정 : tsconfig.json

( compilerOptions, include, exclude)

6. paths 별칭 사용시 주의

7. build

---

 

 

1. typescript란

- javascript에 타입의 정의가 추가된 언어
- 클래스형으로 작성하고 타입을 지정함 (오류방지가능함)
- js의 확장된 언어 → javascript의 상위 집합 슈퍼셋(상위확장)
- path(경로) 변수처럼 별칭을 정해서 사용가능함
- 런타임 환경없음, 컴파일 언어 (컴파일러가 존재) ts → js
   - ts로 작성한 코드는 브라우저에서 읽을 수 없어서 해석가능한 js로 코드변한해서 사용(컴파일)
   - 리액트 빌드한것처럼 사용한다!

 

 

 

 

2.  typescript를 사용하는 이유

- js : 타입제한이 없어 편하게 개발에 사용, nodejs에서도 사용
   - 하지만, 예측할수없는 문제 발생 시 실행할때(동작했을때) 오류 발생
   - 대규모 프로젝트의 경우 실행환경에서 에러 찾기 번거로움

- 클래스, 상속, 캡슐화, 다형성, 추상화
   - 추상클래스와 인터페이스를 통해 구현한다.
   - 추상이라는 것은 구체적인 실제의 것에서 생각을 시작해서 불필요한 요소를 제거
      →  특징중에 핵심을 구조화 시키는것
   - 추상화 개념을 사용하는 이유는 유지보수 및 개발 속도 향상
     - 개발할때는 필요한 객체 내용을 클래스로 정의하고 상위 요소부터 개발
     - 하위 요소에게 추상화한 상위 요소 상속함

- ts를 사용해서 타입 검사와 추론의 기능 사용

- c++, c# 등 객체 지향 프로그래밍 지원

 

 

 

 

3. typescript 설치

# 개발단계에서 사용
# -D == --save-dev
npm install -D typescript

# 버전확인
npx tsc --version
# Version 5.3.3 나옴

 

 

4. node 런타임 환경 실행

 

- ts-node 사용하면 개발환경에서 ts코드 실행은 시켜볼수있음! (라이브러리사용)

npm install ts-node @types/node

- ts코드를 내부 컴파일러(ts → js)를 사용해서 메모리상에 js코드로 내용을 가지고있고 (js파일로 가지고있는게 아님)
- nodejs 런타임환경으로 실행 코드 결과 출력 (메모리상에 있던 js코드)
- nodejs의 내장함수 및 모듈의 타입 정보가 필요함! 정의되어있는 패키지설치해야함!

 

npx ts-node [파일경로]

 

 

5. tsconfig 설정 : tsconfig.json

# tsconfig.json 생성
npx tsc --init

- 가장 많이 사용하는 필수 속성 (지정, 제외, 컴파일러옵션)
https://www.typescriptlang.org/ko/tsconfig

 

① include : 컴파일 진행할 폴더 및 파일 지정
- 경로에있는 ts 파일 컴파일
- ./* : 현재 경로의 `모든 파일`을 전부 컴파일 대상을 지정
- ./**/* : `모든 폴더`를 지정


② exclude : 컴파일 대상에서 제외할 폴더 지정
- include와 같은 방법으로 사용함

 

③ compilerOptions : ts파일을 컴파일할때 어떤 현태로 컴파일 진행할지 속성 정의

- module : 모듈 시스템 지정
- outDir : 내보낼 경로 지정
- target : 번들링 문법 지정
- esModuleInterop : import/export 문법을 바꿔줌 (commonjs와 es6 혼용을 자연스럽게 통합해줌)
- struct : true로 두는 엄격모드 (프로젝트에 사용할거라면 false로 지정)
- baseUrl : 모듈의 상대 경로를 기본값으로 설정 → ./src
- paths : baseUrl로 부터 설정한 경로를 기준으로 상대 위치 가져오는 매핑값 작성 (경로를 변수처럼 사용가능함)

{
  "include": ["src/**/*"],
  "exclude": ["**/*.test.ts"],
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./dist",
    "target": "ES6",
    "esModuleInterop": true,
    "strict": true,
    "baseUrl": "./src",
    "paths": {
      // 별칭 지정 @로 작성
      // key = 사용할 별칭
      // value = 실제경로
      "@user/*": ["user/*"]
    }
  }
}

 

 

 

 

 

6. paths 별칭 사용시 주의

 

- 별칭을 사용해서 컴파일 진행하면 @ 그대로 컴파일되버림!

const user_server_1 = __importDefault(require("@user/server/user.server"));

 

- 해결방안으로 컴파일 당시 실제 경로로 지정해줘야함 → tsc-alias 패키지 설치 사용하면 됨!

npm install -D tsc-alias

- 사용방법 : package.json에 scripts 추가하기

{
  "name": "03.tsconfig",
  "version": "1.0.0",
  "description": "- compilerOptions\r - include\r - exclude",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc && tsc-alias"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tsc-alias": "^1.8.8",
    "typescript": "^5.3.3"
  }
}

 

7. build

npm run build

 

 

---

※ 환경구축

npm init -y
npm install -D typescript
npm install ts-node @types/node
npm install -D tsc-alias
npx tsc --init
npm run build

 

※ 사용방법

- 변수명 : 타입 = 초기값

// user/server/user.server.ts
const str: string = "name: boram";
export default str;

// src/message.ts
import str from "@user/server/user.server";

const message2: string = "hello typescript";
console.log(message2);
console.log(str);

npm run build
node dist/message.js

# hello typescript
# name: boram