Create Project

 $ mkdir mongo-express-ts-demo
 $ cd  mongo-express-ts-demo

使用npm初始化package.json文件

$ npm init -y

Hello, world!

首先安装 express

$ npm install express

接下来选择你喜欢的编辑器开始编码吧

创建一个名为src的文件夹，并在次文件夹中添加一个名为index.js的文件。内容如下

/src/index.js

const express = require( "express" );
const app = express();
const port = 8080;

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

app.listen( port, () => {
  console.log( `server started at http://localhost:${ port }` );
} );

接下来更新package.json指导npm如何运行程序，将main属性值更改为指向src/index.js，然后将start脚本添加到scripts对象。

 "main": "src/index.js",
  "scripts": {
    "start": "node .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

现在可以在终端中启动项目了

$ npm   start

如果一切顺利，此时应该看到终端中显示

server started at http://localhost:8080

启动浏览器输入http://localhost:8080可以看到文本Hello world！。

TypeScript

老规矩，第一步还是先安装依赖

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

下一步是添加tsconfig.json文件

tsconfig.json

{
 "compilerOptions": {
   "module": "commonjs",
   "esModuleInterop": true,
   "target": "es6",
   "noImplicitAny": true,
   "moduleResolution": "node",
   "sourceMap": true,
   "outDir": "dist",
   "baseUrl": ".",
   "paths": {
     "*": ["node_modules/*", "src/types/*"]
   }
 },
 "include": ["src/**/*"]
}

配置的内容可自行搜索查询

修改/src.index.js

import express , { Request, Response }  from "express" ;
const app = express();
const port = 8080; 

app.get( "/", ( req: Request, res: Response) => {
 res.send( "Hello world!" );
} );

app.listen( port, () => {
 console.log( `server started at http://localhost:${ port }` );
} );

如果你有代码整洁强迫症，添加tslint并创建一个tslint.json指示编辑器如何整理代码也是一个很好的方法。

npm install --save-dev tslint

下面我们创建tslint.json，添加以下配置

{
 "rules": {
   "class-name": true,
   "comment-format": [true, "check-space"],
   "indent": [true, "spaces"],
   "one-line": [true, "check-open-brace", "check-whitespace"],
   "no-var-keyword": true,
   "quotemark": [true, "double", "avoid-escape"],
   "semicolon": [true, "always", "ignore-bound-class-methods"],
   "whitespace": [
     true,
     "check-branch",
     "check-decl",
     "check-operator",
     "check-module",
     "check-separator",
     "check-type"
   ],
   "typedef-whitespace": [
     true,
     {
       "call-signature": "nospace",
       "index-signature": "nospace",
       "parameter": "nospace",
       "property-declaration": "nospace",
       "variable-declaration": "nospace"
     },
     {
       "call-signature": "onespace",
       "index-signature": "onespace",
       "parameter": "onespace",
       "property-declaration": "onespace",
       "variable-declaration": "onespace"
     }
   ],
   "no-internal-module": true,
   "no-trailing-whitespace": true,
   "no-null-keyword": true,
   "prefer-const": true,
   "jsdoc-format": true
 }
}

配置内容可根据个人的习惯修改

再次更新package.json中的内容

  "main": "dist/index.js",
 "scripts": {
   "prebuild": "tslint -c tslint.json -p tsconfig.json --fix",
   "build": "tsc",
   "prestart": "npm run build",
   "start": "node .",
   "test": "echo \"Error: no test specified\" && exit 1"
 },

最后，将src/index.js文件的扩展名从.js更改.ts，然后运行启动脚本。

npm run start