Node.js에서 TypeScript를 사용하는 방법에 대해 알아보겠습니다.
이 포스팅에서는 TypeScript의 소개와 장단점, Node.js에서 TypeScript를 사용하는 방법 및 프로젝트 구조를 설명합니다.
Typescript 소개
Typescript 란 무엇인가?
TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합(슈퍼셋)입니다.
TypeScript는 정적 타입 검사와 최신 JavaScript 기능을 제공하여 코드의 오류를 사전에 방지하고, 유지보수성을 향상시킵니다.
모든 JavaScript 코드가 유효한 TypeScript 코드가 됩니다.
TypeScript 코드는 TypeScript 컴파일러(tsc)를 통해 JavaScript 코드로 변환됩니다.
Typescript 사용 장점
- 정적 타입 검사: 코드 작성 시점에 타입 오류를 발견할 수 있어 디버깅 시간을 줄여줍니다.
- 가독성 향상: 명확한 타입 정의로 코드의 가독성과 유지보수성을 높입니다.
- 최신 JavaScript 기능 사용 가능: 최신 ECMAScript 기능을 사용할 수 있으며, 하위 호환성을 유지할 수 있습니다.
- 강력한 IDE 지원: Visual Studio Code 등 주요 IDE에서 풍부한 코드 완성 및 리팩토링 기능을 제공합니다.
Typescript 사용 단점
- 학습 곡선: JavaScript 개발자가 TypeScript의 타입 시스템을 익히는 데 시간이 걸릴 수 있습니다.
- 컴파일 단계 추가: TypeScript 코드를 JavaScript로 컴파일해야 하므로 빌드 시간이 증가할 수 있습니다.
- 설정 복잡성: 프로젝트 초기 설정이 복잡할 수 있으며, 다양한 설정 옵션을 이해해야 합니다.
Typescript 기본
1. 기본 타입 (Basic Types)
TypeScript는 JavaScript의 기본 타입을 확장하여 더 엄격한 타입 검사를 제공합니다.
- 숫자 (Number):
let age: number = 30; - 문자열 (String):
let name: string = 'John'; - 불리언 (Boolean):
let isStudent: boolean = true; - 배열 (Array):
let numbers: number[] = [1, 2, 3]; - 튜플 (Tuple):
let person: [string, number] = ['John', 30]; - 열거형 (Enum):
enum Color { Red, Green, Blue }
let c: Color = Color.Green;2. 인터페이스 (Interface)
인터페이스는 객체의 구조를 정의하여 일관된 코드를 작성하는 데 도움을 줍니다.
interface User {
id: number;
name: string;
email: string;
}
let user: User = {
id: 1,
name: 'John Doe',
email: 'john@example.com'
};3. 클래스 (Class)
TypeScript는 객체 지향 프로그래밍(OOP)을 지원하여 클래스와 상속을 사용할 수 있습니다.
class Person {
private name: string;
constructor(name: string) {
this.name = name;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const john = new Person('John');
john.greet(); // Output: Hello, my name is John4. 제네릭 (Generics)
제네릭은 함수나 클래스를 작성할 때, 타입을 변수처럼 사용할 수 있게 해줍니다.
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>('myString');
5. 유니언 타입 (Union Types)
유니언 타입을 사용하면 변수에 여러 타입을 지정할 수 있습니다.
let value: string | number; value = 'Hello'; value = 42;
6. 타입 앨리어스 (Type Aliases)
타입 앨리어스를 사용하면 복잡한 타입을 단순화할 수 있습니다.
type StringOrNumber = string | number; let value: StringOrNumber; value = 'Hello'; value = 42;
7. 함수 (Functions)
TypeScript에서 함수의 매개변수와 반환 값에 타입을 지정할 수 있습니다.
function add(a: number, b: number): number {
return a + b;
}
const sum = add(1, 2); // Output: 38. 비구조화 할당 (Destructuring)
비구조화 할당을 사용하면 배열이나 객체의 값을 쉽게 추출할 수 있습니다.
const point = { x: 10, y: 20 };
const { x, y } = point;
const numbers = [1, 2, 3, 4];
const [first, second] = numbers;
9. 비동기 프로그래밍 (Asynchronous Programming)
TypeScript는 비동기 프로그래밍을 위해 async와 await를 지원합니다.
async function fetchData(url: string): Promise<void> {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}Nodejs에서 Typescript 사용하기
패키지 설치 및 설정
1. Node.js와 npm설치
Node.js와 npm(Node Package Manager)을 설치합니다.
설치 방법은 앞선 포스팅([Node.js – 기초 강좌] 2. nodejs 모듈(module)의 이해와 패키지 관리 (with npm)) 을 참조하세요.
2. Typescript 설치
npm을 이용하여 TypeScript를 글로벌로 설치합니다.
$ npm install -g typescript
3. 프로젝트 초기화
프로젝트 폴더를 만들고 초기화합니다.
$ mkdir 03_typescript $ cd 03_typescript $ npm init -y
4. Typescript 설정 파일(tsconfig.json) 생성
TypeScript 설정 파일을 생성합니다.
$ tsc --init
생성된 tsconfig.json파일의 옵션을 통해 tsc 컴파일러가 코드를 어떻게 처리할지 결정합니다.
참조: https://www.typescriptlang.org/ko/docs/handbook/tsconfig-json.html
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
}
}위에서 target은 ES6 이고 module은 commonjs인 이유는 typescript에서 최신 ES6 기능을 활용하면서도 Node.js 환경에서 동작하는 코드를 작성하기 위함입니다.
TypeScript 컴파일러는 ES6의 문법과 기능을 지원하면서도, Node.js에서 호환되는 CommonJS 모듈 시스템을 사용할 수 있게 해줍니다.
5. 개발 환경을 위한 패키지 설치
필요한 개발 도구를 설치합니다.
$ npm install --save-dev ts-node @types/node
6. Visual studio code에서 개발시 유용한 Extensions
1. ESLint
- 설명: JavaScript 및 TypeScript 코드를 분석하여 코드 품질을 유지합니다. 일관된 코딩 스타일을 유지하고 오류를 사전에 방지할 수 있습니다.
- 설치 명령어:
ext install dbaeumer.vscode-eslint
2. Prettier – Code Formatter
- 설명: 코드 포맷터로, 일관된 코드 스타일을 유지합니다. 코드를 자동으로 정리하여 가독성을 높여줍니다.
- 설치 명령어:
ext install esbenp.prettier-vscode
Node.js에서 Typescript 사용하는 프로젝트 구조
프로젝트 디렉토리 구조
TypeScript와 Node.js를 사용하여 서버를 만들 때, 모듈화와 유지보수를 고려한 폴더 구조를 사용하는 것이 좋습니다.
아래는 일반적으로 많이 사용하는 아키텍처와 프로젝트 폴더 구조입니다
03_typescript/ ├── src/ │ ├── controllers/ │ │ └── userController.ts │ ├── models/ │ │ └── userModel.ts │ ├── routes/ │ │ └── userRoutes.ts │ ├── services/ │ │ └── userService.ts │ ├── middlewares/ │ │ └── authMiddleware.ts │ ├── utils/ │ │ └── logger.ts │ ├── config/ │ │ └── dbConfig.ts │ ├── index.ts │ └── app.ts ├── dist/ ├── node_modules/ ├── package.json ├── tsconfig.json ├── tslint.json └── .env
위 예제 진행을 다음 명령어를 통해 패키지를 설치하였습니다.
$ npm install express mongoose dotenv $ npm install --save-dev typescript @types/node @types/express @types/mongoose ts-node nodemon
각 폴더 및 파일 설명
- src/
- 소스 코드를 담는 디렉토리입니다.
- controllers/
- 요청을 처리하고 적절한 서비스 계층을 호출합니다.
- 비즈니스 로직이 아닌 요청과 응답의 처리를 담당합니다.
- 예:
userController.ts는 사용자 관련 요청을 처리합니다.
- models/
- 데이터베이스 스키마와 ORM 모델을 정의합니다.
- 예:
userModel.ts는 사용자 데이터베이스 모델을 정의합니다.
- routes/
- 경로와 컨트롤러를 연결합니다. 각 API 엔드포인트를 정의합니다.
- 예:
userRoutes.ts는 사용자 관련 경로를 정의합니다.
- services/
- 실제 비즈니스 로직을 처리합니다. 데이터베이스 접근, 외부 API 호출 등을 담당합니다.
- 예:
userService.ts는 사용자 관련 비즈니스 로직을 처리합니다.
- middlewares/
- 요청이 컨트롤러에 도달하기 전에 실행되는 미들웨어를 정의합니다. 인증, 권한 부여, 로깅 등을 처리합니다.
- 예:
authMiddleware.ts는 인증 관련 로직을 처리합니다.
- utils/
- 유틸리티 함수나 도구를 모아놓은 폴더입니다.
- 예:
logger.ts는 로깅 기능을 제공합니다.
- config/
- 데이터베이스 설정 등 각종 설정 파일을 모아놓은 폴더입니다.
- 예:
dbConfig.ts는 데이터베이스 연결 설정을 정의합니다.
- index.ts
- 서버를 시작하는 파일로,
app.ts에서 Express 앱을 가져와 서버를 시작합니다.
- 서버를 시작하는 파일로,
- app.ts
- Express 애플리케이션을 설정하고 미들웨어, 라우트 등을 등록합니다.
- dist/
- 컴파일된 JavaScript 파일이 저장되는 디렉토리입니다.
- package.json
- 프로젝트의 메타데이터와 종속성 목록을 포함하는 파일입니다.
- tsconfig.json
- TypeScript 컴파일러 옵션을 정의하는 파일입니다.
- tslint.json
- TypeScript 코드 린팅 규칙을 정의하는 파일입니다.
- .env
- 환경 변수를 저장하는 파일입니다.
참고 링크
- Typescript 공식 문서
- Typescript tutorial
- devitworld nodejs tutorial repository
- https://github.com/jh4843/devitworld-nodejs-basic/03_typescript
