使用ts 开发node.js 项目搭建入门项目

京机帝国 發表於 2020-1-31 13:10:00

使用ts 开发node.js 项目搭建入门项目

1. 初始化项目
　　npm init  生成 package.json 文件
<div class="cnblogs_code">
<pre>{
"name": "node.redis",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}</pre>
</div>
2. 安装  node 模块的 ts 声明文件
　　npm install --save typescript  (需要确认）
　　npm i --save @types/node
　　　　安装 @types/node 以后, node 会有对应的ts 声明，并且 vscode 可以提供相应的代码感知
　　　　安装前:
　　　　　　　　<img src="https://img2018.cnblogs.com/i-beta/1489745/202001/1489745-20200131010952884-819507588.png">
　　　　安装后:
　　　　　　　　<img src="https://img2018.cnblogs.com/i-beta/1489745/202001/1489745-20200131011052720-1726850150.png">
<div>
3.  npm 第三方库的 ts 支持
　　以 restify 为例.
　　3.1. 安装 restify 依赖
　　　　npm i --save restify
　　　　server.js 中引用 restify 成功:
　　　　<img src="https://img2018.cnblogs.com/i-beta/1489745/202001/1489745-20200131011546493-2026741719.png">
　　　　server.ts 中 import restify 时失败，此时还没有安装 restify 的 ts 引用.
　　　　<img src="https://img2018.cnblogs.com/i-beta/1489745/202001/1489745-20200131012512396-627653414.png">
　　3.2 安装 restify ts 依赖.(为js 库，提供 index.d.ts 声明)
　　　　npm i --save @types/restify
　　　　<img src="https://img2018.cnblogs.com/i-beta/1489745/202001/1489745-20200131012618397-424428241.png">
4. 编译运行 ts 项目
　　4.1 编译 ts
　　　　生成 tsconfig.json 文件: tsc --init 
<div class="cnblogs_code">
<pre>{
"compilerOptions": {
 "module": "commonjs", //指定生成哪个模块系统代码
 "target": "es6", //目标代码类型
 "noImplicitAny": false, //在表达式和声明上有隐含的'any'类型时报错。
 "sourceMap": true, //用于debug 
 "rootDir": "./src", //根目录
 "outDir": "./build", //重定向输出目录。 
 "watch": true //在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。
}
}</pre>
</div>
　　4.2　vscode 编译
　　　　菜单 -> 任务 -> Run Build task -> tsc: build - tsconfig.json;
　　　　运行 node build/server.js
　　4.3  使用 ts-node 
　　　　安装 ts-node: npm  install -g ts-node
　　　　配置 vscode 调试 launch.json
<div class="cnblogs_code">
<pre>{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
 {
 "name": "调试 TS Node 程序 - args",
 "type": "node",
 "request": "launch",
 "runtimeExecutable": "node",
 "runtimeArgs": [
 "-r",
 "ts-node/register"
 ],
 "args": [
 "${workspaceFolder}/src/index.ts"
 ]
 }
]
}</pre>
</div>
　　　　参考：https://www.barretlee.com/blog/2019/03/18/debugging-in-vscode-tutorial/
</div> 
来源：https://www.cnblogs.com/xubd/p/12244523.html

頁: [1]

琼殿技术论坛's Archiver

使用ts 开发node.js 项目 搭建入门项目

使用ts 开发node.js 项目搭建入门项目