Typescript로 Node.js 및 Express.js API를 빌드합니다.

파일 구조

├── build
├── node_modules
├── src
│   ├── data
│   │   └── tasks.json
│   ├── routes
│   │   └── task-routes.ts
│   ├── services
│   │   └── task-service.ts
│   ├── index.ts
|   └── types.d.ts
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

프로젝트 초기화

먼저 프로젝트를 초기화해야 합니다.

npm init -y

패키지 설치

프로젝트의 종속성을 설치합니다.

npm install --save express

그리고 프로젝트의 dev 종속성을 설치합니다.

npm install --save-dev @types/express typescript ts-node-dev

express: Node.js 웹 애플리케이션 프레임워크입니다.

@types/express: express 모듈용 TypeScript 정의 파일입니다.

typescript: TypeScript 컴파일러입니다.

ts-node-dev: TypeScript로 서버를 실행하는 TypeScript 컴파일러입니다.

package.json에 스크립트 추가

package.json에 스크립트를 추가합니다.

"scripts": {
    "dev": "ts-node-dev src/index.ts",
    "start": "node build/index.js",
    "tsc": "tsc"
}

dev:는 TypeScript로 서버를 실행하는 명령입니다.

start: 서버를 실행하는 명령입니다.

tsc:는 TypeScript 코드를 컴파일하는 명령입니다.

TypeScript 초기화

이제 TypeScipt를 초기화합니다.

$ npm run tsc -- --init

이렇게 하면 TypeScript 구성 파일인 tsconfig.json 파일이 생성됩니다.

TypeScript 구성

이 프로젝트에서는 다음 구성을 사용합니다.

{
    "compilerOptions": {
        "target": "es2016",
        "module": "commonjs",
        "resolveJsonModule": true,
        "outDir": "./build",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "skipLibCheck": true
    }
}

구성에 대한 자세한 내용은 TypeScript Configuration을 참조하십시오.

서버 만들기

이 프로젝트에서는 Express.js로 서버를 생성합니다.

// src/index.ts
import express from 'express';
const app = express();
const PORT = 3000;

app.use(express.json());

app.get('/', (_req, res) => {
    res.send('Hello World!');
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

그리고 서버를 컴파일합니다.

$ npm run dev

서버에 데이터 추가

이 프로젝트에서는 다음 데이터를 사용합니다.

// src/data/tasks.json
[
    {
        "id": 1,
        "title": "Task 1",
        "description": "Description 1",
        "priority": "High",
        "completed": false,
        "createdAt": "2020-01-01"
    },
    {
        "id": 2,
        "title": "Task 2",
        "description": "Description 2",
        "priority": "Low",
        "completed": false,
        "createdAt": "2020-01-02"
    },
    {
        "id": 3,
        "title": "Task 3",
        "description": "Description 3",
        "priority": "Medium",
        "completed": false,
        "createdAt": "2020-01-03"
    },
    {
        "id": 4,
        "title": "Task 4",
        "description": "Description 4",
        "priority": "High",
        "completed": false,
        "createdAt": "2020-01-04"
    },
    {
        "id": 5,
        "title": "Task 5",
        "description": "Description 5",
        "priority": "Low",
        "completed": false,
        "createdAt": "2020-01-05"
    },
    {
        "id": 6,
        "title": "Task 6",
        "description": "Description 6",
        "priority": "Medium",
        "completed": false,
        "createdAt": "2020-01-06"
    },
    {
        "id": 7,
        "title": "Task 7",
        "description": "Description 7",
        "priority": "High",
        "completed": false,
        "createdAt": "2020-01-07"
    },
    {
        "id": 8,
        "title": "Task 8",
        "description": "Description 8",
        "priority": "Low",
        "completed": false,
        "createdAt": "2020-01-08"
    },
    {
        "id": 9,
        "title": "Task 9",
        "description": "Description 9",
        "priority": "Medium",
        "completed": false,
        "createdAt": "2020-01-09"
    }
]

tasks.json 파일에 유형을 추가해야 합니다.

// src/types.d.ts
export type Priority = 'Low' | 'Medium' | 'High';

export interface BaseTask {
    title: string;
    description: string;
    priority: Priority;
    completed: boolean;
    createdAt: string;
}

export interface Task extends BaseTask {
    id: number;
}

서비스를 만듭니다.

이제 요청을 처리할 서비스가 필요합니다.

// src/services/task-services.ts
import tasksData from '../data/tasks.json';
import { Task, BaseTask } from '../types';

const tasks: Task[] = tasksData as Task[];

export const getAllTasks = ():Task[] => tasks;

export const getTask = (id: number):Task | undefined => tasks.find(task => task.id === id);

export const addTask = (task: BaseTask):void => {
    const newTask = { ...task, id: tasks.length + 1 };
    tasks.push(newTask);
};

export const updateTask = (id: number, task: BaseTask):void => {
    const taskIndex = tasks.findIndex(t => t.id === id);
    if (taskIndex > -1) {
        tasks[taskIndex] = { ...tasks[taskIndex], ...task };
    }
};

export const deleteTask = (id: number):void => {
    const taskIndex = tasks.findIndex(t => t.id === id);
    if (taskIndex > -1) {
        tasks.splice(taskIndex, 1);
    }
};

서버에 경로 추가

서버에 경로를 추가합니다.

// src/routes/task-routes.ts
import express from "express";
const router = express.Router();
import {getAllTasks, getTask, addTask, updateTask, deleteTask} from "../services/task-services";
import {BaseTask} from "../types";

router.get('/', (_req, res) => {
    res.send(getAllTasks());
});

router.get('/:id', (req, res) => {
    const {id} = req.params;
    const task = getTask(Number(id));
    if (task) {
        res.send(task);
    } else {
        res.sendStatus(404);
    }
});

router.post('/', (req, res) => {
    const {title, description, priority, completed, createdAt} = req.body;
    const task: BaseTask = {
        title,
        description,
        priority,
        completed,
        createdAt
    };
    addTask(task);
    res.send({message: 'Task added successfully'});
});

router.put('/:id', (req, res) => {
    const {id} = req.params;
    const {title, description, priority, completed, createdAt} = req.body;
    const task: BaseTask = {
        title,
        description,
        priority,
        completed,
        createdAt
    };
    updateTask(Number(id), task);
    res.send({message: 'Task updated'});
});

router.delete('/:id', (req, res) => {
    const {id} = req.params;
    deleteTask(Number(id));
    res.send({message: 'Task deleted'});
});

module.exports = router;

이제 서버에 경로를 추가해야 합니다.

// src/index.ts
app.use("/api/tasks", require("./routes/task-routes"));

이제 작업 가져오기, 작업 가져오기, 추가, 업데이트 및 삭제에 사용할 수 있는 서버 API를 만들었습니다.