개발공부일지
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
'TypeScript' 카테고리의 다른 글
Typescript - 2) more on design patterns with TS (0) | 2024.01.11 |
---|---|
Typescript - design patterns with TS ① (0) | 2024.01.11 |
TypeScript - 전략패턴(Strategy Pattern) (0) | 2024.01.05 |
TypeScript - 제네릭(generics), tuple, interface (0) | 2024.01.05 |