巨应打字员

记录如何把现有 nodejs 工程改成 TypeScript 工程

---

## 初始化工程

在现有 JS 工程，或者空白工程。初始化 TypeScript：

```shell
tsc --init
```

该命令会生成 tsconfig.json。
参考[官网文档](http://www.TypeScriptlang.org/docs/handbook/tsconfig-json.html)按照你自己的需求进行修改。下面是我使用的配置：

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

## 移动源码位置

参考 tsconfig 的配置：

```json
{
 ....
    "include": [
        "src/**/*"
    ]
}
```

如果你是改造现有项目需要将 js 源码都移动到 src 目录下。如果是全新项目，直接在 src 目录下新建 ts 文件。

## 修改 package.json

### 添加编译命令

添加命令使 ts 文件编译成 js 文件。

```json
"build-ts": "tsc",
    "watch-ts": "tsc -w"
```

## JS 文件修改

需要 js 文件全部改为 ts 后缀。以下列举一些常见修改点：

### 修改 require

不再使用 node 的 require 方式引用模块，改为 import。例如：

```ts
var express = require("express");
//改为
import express from "express";
```

## 修改 module.exports

不再使用 node 的导出方式，改为 export。例如：
例一：

```ts
var User = {...};
module.exports = User;
//改为
const User = {...};
export default User;
```

例二：

```ts
//导出
exports.login = ()=>{...}
//导入
const member = require("../controller/member");
//--------------->改为
//导出
export let login =()=>{...}
//导入
import * as member from "../controller/member";
```

### 引用声明文件

要利用 ts 的代码提示功能优势以及正确编译。我们还需要引用声明文件，这是 ts 对 js 改造的最大优势，不然用 ts 干嘛呢。引用文件举例：

```shell
npm i @types/express --save-dev
```

大多类型定义都是@types/xxx。

### 声明类型

ts 所有对象最好都是用指定的类型，不要使用 any（否则就和 js 没有太大区别了）。
例如：Express 类型

```ts
import { Request, Response, NextFunction } from "express-serve-static-core";

export let login = async (req: Request, res: Response, next: NextFunction) => {...}
```



<p>记录如何把现有 nodejs 工程改成 TypeScript 工程</p>
<hr>
<h2>初始化工程</h2>
<p>在现有 JS 工程，或者空白工程。初始化 TypeScript：</p>
<pre><code>tsc --init
</code></pre>
<p>该命令会生成 tsconfig.json。
参考<a href="http://www.TypeScriptlang.org/docs/handbook/tsconfig-json.html">官网文档</a>按照你自己的需求进行修改。下面是我使用的配置：</p>
<pre><code>{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "src/types/*"]
    }
  },
  "include": ["src/**/*"]
}
</code></pre>
<h2>移动源码位置</h2>
<p>参考 tsconfig 的配置：</p>
<pre><code>{
 ....
    "include": [
        "src/**/*"
    ]
}
</code></pre>
<p>如果你是改造现有项目需要将 js 源码都移动到 src 目录下。如果是全新项目，直接在 src 目录下新建 ts 文件。</p>
<h2>修改 package.json</h2>
<h3>添加编译命令</h3>
<p>添加命令使 ts 文件编译成 js 文件。</p>
<pre><code>"build-ts": "tsc",
    "watch-ts": "tsc -w"
</code></pre>
<h2>JS 文件修改</h2>
<p>需要 js 文件全部改为 ts 后缀。以下列举一些常见修改点：</p>
<h3>修改 require</h3>
<p>不再使用 node 的 require 方式引用模块，改为 import。例如：</p>
<pre><code>var express = require("express");
//改为
import express from "express";
</code></pre>
<h2>修改 module.exports</h2>
<p>不再使用 node 的导出方式，改为 export。例如：
例一：</p>
<pre><code>var User = {...};
module.exports = User;
//改为
const User = {...};
export default User;
</code></pre>
<p>例二：</p>
<pre><code>//导出
exports.login = ()=>{...}
//导入
const member = require("../controller/member");
//--------------->改为
//导出
export let login =()=>{...}
//导入
import * as member from "../controller/member";
</code></pre>
<h3>引用声明文件</h3>
<p>要利用 ts 的代码提示功能优势以及正确编译。我们还需要引用声明文件，这是 ts 对 js 改造的最大优势，不然用 ts 干嘛呢。引用文件举例：</p>
<pre><code>npm i @types/express --save-dev
</code></pre>
<p>大多类型定义都是@types/xxx。</p>
<h3>声明类型</h3>
<p>ts 所有对象最好都是用指定的类型，不要使用 any（否则就和 js 没有太大区别了）。
例如：Express 类型</p>
<pre><code>import { Request, Response, NextFunction } from "express-serve-static-core";

export let login = async (req: Request, res: Response, next: NextFunction) => {...}
</code></pre>


TypeScript 迁移现有工程


## 1. 数据库

### 1.下载

官网地址： https://www.mongodb.com/download-center/community 2.安装
正常情况直接双击安装。但是如遇到安装卡老半天进度条都不走解决方案如下：
重启电脑再次安装，选自定义安装并且取消勾选 Install MongoDB Compass。

然后 window+r 输入 services.msc，打开服务窗口。把 MongoDB Server 设置为手动启动，因为我不想开机自动运行，不是每天都需要调试数据库。

## 2.可视化 GUI 工具

### 1.下载

官方下载地址：https://www.mongodb.com/download-center/compass?jmp=hero
下载社区版。

### 2.安装

首先按安装提示正常安装。

## 3.连接数据库

### 1.启动数据库

运行服务 MongoDB Server

### 2.使用 GUI 工具链接

打开 MongoDB Compass Community，按默认参数链接本地服务器。


<h2>1. 数据库</h2>
<h3>1.下载</h3>
<p>官网地址： https://www.mongodb.com/download-center/community 2.安装
正常情况直接双击安装。但是如遇到安装卡老半天进度条都不走解决方案如下：
重启电脑再次安装，选自定义安装并且取消勾选 Install MongoDB Compass。</p>
<p>然后 window+r 输入 services.msc，打开服务窗口。把 MongoDB Server 设置为手动启动，因为我不想开机自动运行，不是每天都需要调试数据库。</p>
<h2>2.可视化 GUI 工具</h2>
<h3>1.下载</h3>
<p>官方下载地址：https://www.mongodb.com/download-center/compass?jmp=hero
下载社区版。</p>
<h3>2.安装</h3>
<p>首先按安装提示正常安装。</p>
<h2>3.连接数据库</h2>
<h3>1.启动数据库</h3>
<p>运行服务 MongoDB Server</p>
<h3>2.使用 GUI 工具链接</h3>
<p>打开 MongoDB Compass Community，按默认参数链接本地服务器。</p>


Windows装MongoDB教程


1.添加环境变量

```powershell
[environment]::SetEnvironmentvariable("Path", [environment]::GetEnvironmentvariable("Path", "User")+";添加的路径", "User")
```


<p>1.添加环境变量</p>
<pre><code>[environment]::SetEnvironmentvariable("Path", [environment]::GetEnvironmentvariable("Path", "User")+";添加的路径", "User")
</code></pre>
