基于TypeScript+Node.js+Express搭建服务器

FastZero 发布于23天前
0 条问题

鉴于 JavaScript 是 弱类型语言动态类型语言 ,因此 JavaScript 在变量声明的时候无需指定变量的类型,在声明之后便可为其赋值不同的类型。因此在多人团队的开发里面,JavaScript的这种“便捷”反而会带来很多麻烦。

Cannot read property 'xxx' of undefined
'xxx' is not a function/object
'xxx' is not defined
复制代码

TypeScript 就是为了解决 JavaScript 的问题而产生。 与 JavaScript 截然相反, TypeScript 使用的是 强类型语言静态类型语言 ,有写过 Java 的同学应该会感到非常亲切。 TypeScript 在多人团队开发时候便成为了不错的选择。

强/弱类型、动/静类型、GC 和 VM,你真的分清楚了么?

编译器推荐使用 VS CODE ,对 TyepScript 的支持非常友好

开始

初始化项目

在你的项目新建一个文件夹,如helloTS,打开helloTS

快速的创建一个 package.json

npm init -y
复制代码

安装TypeScript

npm install typescript -s
复制代码

新建 tsconfig.json 文件

tsc --init
复制代码

tsconfig.json结构如下

{
  "compilerOptions": {
    ···
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ···
  }
}
复制代码

在helloTS目录下新建build、src文件夹,此时的目录结构为

├──helloTS
       ├──build
       ├──src
       └──tsconfig.json
复制代码

将tsconfig.json下的 outDir 路径修改为 ./build , rootDir 路径修改为 ./src

此时 tsconfig.json 结构如下

{
  "compilerOptions": {
    ···
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./build",                   /* Redirect output structure to the directory. */
    // "rootDir": "./src",                    /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
    ···
  }
}
复制代码

至此, tsconfig.json 的配置到此结束,其余配置可查阅tsconfig配置文档

安装Express

npm install express -s
复制代码

由于我们使用到了 TypeScript ,因此需要继续引入相应的 d.ts 来识别

npm install @types/express -s
复制代码

开始编写

在我们的项目helloTS中,我们将创建一个名为的文件夹app作为启动项。在此文件夹中,我们将创建一个名为app.ts以下内容的文件,此时的目录结构为

├──helloTS
       ├──build
       ├──src
          ├──app
             ├──app.ts
       └──tsconfig.json
复制代码

app.ts

import express = require('express');

// Create a new express application instance
const app: express.Application = express();

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

app.listen(3000, ()=> {
  console.log('Example app listening on port 3000!');
});
复制代码

进行编译

执行命令行

tsc
复制代码

你会发现 build 目录里生成了相应的 js 代码,目录结构如下

├──helloTS
       ├──build
          ├──app
             ├──app.js
       ├──src
          ├──app
             ├──app.ts
       └──tsconfig.json
复制代码

再次执行命令行

node ./build/app/app.js
复制代码

若提示 Example app listening on port 3000! ,恭喜你已经成功搭建好一个相对 简陋 的服务器了。

问题

TypeScript调试

经过上述的操作,我们会发现每次编译的时候都需要使用 tsc 构建,然后再通过 node 开启服务,若要进行开发,则会大大降低开发效率。

解决方法

使用 ts-node

参考 使用ts-node和vsc来调试TypeScript代码

首先安装 ts-node

npm install ts-node -s-d
复制代码

打开 .vscode/launch.json 配置文件(如果没有此文件,请点击菜单栏的 调试 -> 打开配置 )修改为

{
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "runtimeArgs": [
                "--nolazy",
                "-r",
                "ts-node/register"
            ],
            "args": [
                "${workspaceRoot}/src/app/app.ts"
            ],
            "env": { "TS_NODE_PROJECT": "tsconfig.json" },
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}
复制代码

之后直接在 VS Code 上按 F5 刷新即可开启,这下就可以愉快地调试Ts了。

查看原文: 基于TypeScript+Node.js+Express搭建服务器

  • lazydog
  • tinykoala
  • orangeelephant
  • bluefrog
  • greenkoala
  • ZephaniahBeverly
  • EffieAmelia
  • GuntherHenry
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。