1.新建一个文件夹

新建一个文件夹，在文件夹的根目录下分别创建src和dist子文件夹
    

1.1：打开终端，在根目录安装对应的express文件

npm install express
npm install @types/express -D

2.使用 tsc --init 初始化项目

修改tsconfig.json配置文件
  

3.在项目的根目录src下创建 相关文件

3.1在index.ts文件中写入对应的代码

​
import express from 'express';

import cors from 'cors';

import { taskAccessor } from './TaskAccess';

const app = express();

// 定义端口号为8000

const port = 8000;

// 请求中以json格式传递

app.use(express.json());

// 解决跨域问题

app.use(cors());

// 测试方法

app.get('/hello', (req, res) => {

    res.send('你好111111');

});

// 获取所有任务

app.get('/tasks', (req, res) => {

    res.send(taskAccessor.tasks);

})

// 新增任务

app.post('/task', (req, res) => {

    const { name, description } = req.body;

    if (!name?.trim() || !description?.trim()) {

        res.status(400).send('缺少必要参数 name 或者 description');

    }

    let newTask = taskAccessor.addTask(req.body);

    res.status(200).send(newTask);

})

// 删除任务

app.delete('/task/:id', (req, res) => {

    let deleteSuccess = taskAccessor.deleteTask(Number(req.params.id));

    if (!deleteSuccess) {

        res.status(400).send('没有此项任务');

    }

    res.status(200).send(deleteSuccess);

})

// 修改任务

app.put('/task/:id', (req, res) => {

    let setSuccess = taskAccessor.setTaskDone(Number(req.params.id));

    if (!setSuccess) {

        res.status(400).send('没有此项任务');

    }

    res.status(200).send(setSuccess);

})

app.listen(port, () => {

    return console.log('8000端口正在监听中......');

})

​

3.2写入对应的TaskAccess.ts代码

class TaskAccessor{

    tasks:Task[] = [{

        id:1,

        name:"完成报告",

        description:"完成上个月的工作报告",

        isDone:false

    }];

    taskIdIndex = 1;

    // 添加任务

    addTask(task:Task):Task{

        let newTask = {

            id:++this.taskIdIndex,

            name:task.name,

            description:task.description,

            isDone:task.isDone

        };

        this.tasks.push(newTask);

        return newTask;

    }

    // 删除任务

    deleteTask(taskId:number):boolean{

        let index = this.tasks.findIndex(p => p.id == taskId);

        if(index < 0){

            return false;

        }else{

            this.tasks.splice(index,1);

            return true;

        }

    }

    // 修改任务

    setTaskDone(taskId:number):boolean{

        console.log("1:"+taskId);

        let index = this.tasks.findIndex(p => p.id == taskId);

        console.log("2:"+index);

        if(index < 0){

            return false;

        }else{

            this.tasks[index].isDone = true;

            return true;

        }

    }

}

// 将实例化的taskAccessor对象导出

export const taskAccessor = new TaskAccessor();

3.3在type.d.ts中写入对应的代码

interface Task{

    id:number,

    name:string,

    description:string,

    isDone:boolean

}

4.修改package.json文件的代码

5.编译index.ts文件

在终端输入  npm start  执行编译命令

{

  "dependencies": {

    "cors": "^2.8.5",

    "express": "^5.1.0"

  },

  "devDependencies": {

    "@types/cors": "^2.8.19",

    "@types/express": "^5.0.3"

  },

  "name":"front_sever",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "tsc && node dist/index.js"

  },

  "author": "",

  "license":"ISC",

  "description": ""

}

6.通过浏览器窗口访问后台

localhost:8000/hello访问ts的后台服务