共计 7399 个字符，预计需要花费 19 分钟才能阅读完成。
Create by jsliang on 2021-05-12 11:00:03
Recently revised in 2021-06-12 16:58:04
——————————☆☆☆——————————
Node 系列相应地址：
- 代码仓库：https://github.com/LiangJunro…
- 文章仓库：https://github.com/LiangJunro…
——————————☆☆☆——————————
TypeScript 是 JavaScript 的超集，为语言减少了新的性能（上面简称 TS）。
jsliang 艳羡 TypeScript 很久了，始终没有本人去搭建过，都是用他人搭建好的，恰好这次要尝试，那就折腾个畅快。
这篇文章通过配置 Node.js 集成 TS，来疾速解说 TS 的应用。
一 目录
不折腾的前端，和咸鱼有什么区别
| 目录 |
|---|
| 一 目录 |
| 二 Node.js 疾速集成 TS |
| 2.1 目录构造 |
| 2.2 初始化步骤 |
| 三 tsconfig.json 解说 |
| 3.1 compilerOptions 可配置项 |
| 3.2 files 可配置项 |
| 3.3 include 和 exclude 可配置项 |
| 四 ESLint |
| 五 总结 |
| 六 参考文献 |
二 Node.js 疾速集成 TS
返回目录
2.1 目录构造
返回目录
在这之前，咱们先明确行将构建的目录：
util
- src
- index.ts
- tsconfig.json
- package.jsonutil 就是仓库名称（文件夹名称），能够随便换个其余文件夹
除了
index.ts是人工增加的，其余文件均有命令行生成，能够不理睬
那么，Here We go~
返回目录
首先 ，初始化 package.json：
npm init --yes
如果仓库名为中文名，须要
npm init逐项填写
而后 ，如果在 index.ts 中，编写了以下代码：
index.ts
const path = require('path');
console.log(path); 此时执行 node src/index.ts，会看到报错：
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'F:\jsliang\index.ts'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []}也有可能不报错！
如果你应用的是 VS Code 开发软件，会看到提醒：
找不到名称 "require"。是否须要为节点装置类型定义? 请尝试应用 `npm i --save-dev @types/node`。ts(2580) 意思就是 path 和 require 模块都是 Node.js 的货色，应用它须要装置 Node.js 的申明文件，即装置 @types/node 这个包。
接着 ，如果单单装置 @types/node，是还不够的，因为 @types/node 仅仅是 TS 文件做申明作用的，即 xxx.d.ts，所以还须要其余内容：
- 装置
@types/node：npm i @types/node -D - 装置
typescript：npm i typescript -D - 装置
ts-node：npm i ts-node -D
合在一块执行：
npm i @types/node typescript ts-node -D【2021-06-12 16:42:05】发现一个漏点，照着本人这篇文章，装置这几个包之后，如果执行
node src/index.ts还是会报：SyntaxError: Unexpected identifier，所以应该装置npm i ts-node -g，而后再执行ts-node src/index.ts
此时再执行 node src/index.ts，会发现 path 的信息打印进去了，可行，打算通~
此时会生成
node_modules和package-lock.json，这 2 个具体不介绍，请自行 Google
最初 ，还能够深度配置 TS 内容：
- 创立
tsconfig.json：tsc --init
tsc 须要全局装置
typescript，所以须要先执行npm i typescript -g
执行完命令之后，会主动创立 tsconfig.json，内容如下：
jsliang 于
2021-05-11通过tsc --init获取到的tsconfig.json，并通过机器翻译后开明了限度的几条（毕竟 jsliang 4 级都没过，想啥呢~）
{
"compilerOptions": {
/* 拜访 https://aka.ms/tsconfig.json 查看更多 */
/* 根本选项 */
// "incremental": true, /* 启用增量编译 */
"target": "es5", /* 指定 ECMAScript 指标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 或者 'ESNEXT'. */
"module": "commonjs", /* 指定应用模块: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 或者 'ESNext'. */
// "lib": [], /* 指定要蕴含在编译中的库文件 */
// "allowJs": true, /* 容许编译 javascript 文件 */
// "checkJs": true, /* 报告 javascript 文件中的谬误 */
// "jsx": "preserve", /* 指定 jsx 代码的生成: 'preserve', 'react-native', 'react', 'react-jsx' 或者 'react-jsxdev'. */
// "declaration": true, /* 生成相应的 '.d.ts' 文件 */
// "declarationMap": true, /* 对每个 '.d.ts' 文件进行遍历 */
// "sourceMap": true, /* 生成相应的 '.map' 文件 */
// "outFile": "./", /* 将输入文件合并为一个文件 */
"outDir": "./dist", /* 指定输入目录 */
// "rootDir": "./", /* 用来管制输入目录构造 --outDir */
// "composite": true, /* 启用我的项目编译 */
// "tsBuildInfoFile": "./", /* 指定文件来存储增量编译信息 */
"removeComments": true, /* 删除编译后的所有的正文 */
// "noEmit": true, /* 不生成输入文件 */
// "importHelpers": true, /* 从 tslib 导入辅助工具函数 */
// "downlevelIteration": true, /* 在 ES5 和 ES3 中全面反对 for-of */
// "isolatedModules": true, /* 将每个文件作为独自的模块（与 'ts.transpileModule' 相似）*/
/* 严格的类型查看选项 */
"strict": true, /* 启用所有严格类型查看选项 */
// "noImplicitAny": true, /* 在表达式和申明上有隐含的 any 类型时报错 */
// "strictNullChecks": true, /* 启用严格的 null 查看 */
// "strictFunctionTypes": true, /* 启用严格的 function 类型查看 */
// "strictBindCallApply": true, /* 启用严格的 bind、call、apply 办法参数查看 */
// "strictPropertyInitialization": true, /* 启用严格的类的属性初始化查看 */
// "noImplicitThis": true, /* 当 this 表达式值为 any 类型的时候，生成一个谬误 */
// "alwaysStrict": true, /* 以严格模式查看每个模块，并在每个文件里退出 'use strict' */
/* 额定的查看 */
"noUnusedLocals": true, /* 有未应用的变量时，抛出谬误 */
"noUnusedParameters": true, /* 有未应用的参数时，抛出谬误 */
// "noImplicitReturns": true, /* 并不是所有函数里的代码都有返回值时，抛出谬误 */
// "noFallthroughCasesInSwitch": true, /* 报告 switch 语句的 fallthrough 谬误。（即，不容许 switch 的 case 语句贯通）*/
// "noUncheckedIndexedAccess": true, /* 在索引签名后果中蕴含 undefined */
// "noPropertyAccessFromIndexSignature": true, /* 须要索引签名中未声明的属性能力应用元素拜访 */
/* Module Resolution Options */
// "moduleResolution": "node", /* 抉择模块解析策略：'node' (Node.js) or 'classic' (TypeScript pre-1.6) */
// "baseUrl": "./", /* 用于解析非绝对模块名称的基目录 */
// "paths": {}, /* 模块名到基于 baseUrl 的门路映射的列表 */
// "rootDirs": [], /* 根文件夹列表，其组合内容示意我的项目运行时的构造内容 */
// "typeRoots": [], /* 蕴含类型申明的文件列表 */
// "types": [], /* 须要蕴含的类型申明文件名列表 */
// "allowSyntheticDefaultImports": true, /* 容许从没有设置默认导出的模块中默认导入 */
"esModuleInterop": true, /* 通过为所有导入创立名称空间对象，启用 CommonJS 和 ES 模块之间的的互动性 */
// "preserveSymlinks": true, /* 不解析符号链接的实在门路 */
// "allowUmdGlobalAccess": true, /* 容许从模块拜访 UMD 全局变量 */
/* Source Map Options */
// "sourceRoot": "", /* 指定调试器应该找到 TypeScript 文件而不是源文件的地位 */
// "mapRoot": "", /* 指定调试器应该找到映射文件而不是生成文件的地位 */
// "inlineSourceMap": true, /* 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件 */
// "inlineSources": true, /* E 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性 */
/* Experimental Options */
// "experimentalDecorators": true, /* 启用装璜器 */
// "emitDecoratorMetadata": true, /* 为装璜器提供元数据的反对 */
/* Advanced Options */
"skipLibCheck": true, /* 跳过申明文件的类型查看 */
"forceConsistentCasingInFileNames": true /* 进制对同一文件应用大小写不统一的援用 */
}
}
这个文件的作用，是让 TypeScript 将此目录和子目录下的 .ts 文件作为编译上下文的一部分，并且蕴含一部分默认的编译选项。
另外还有一些配置项能够查看上面的解说内容。
返回目录
tsconfig.json 文件次要是为了养成一些良好的习惯，例如遵循不要通篇代码写 any 类型，不要 import 一些没用的包。
如果须要测验这个配置项，小伙伴们能够往 index.ts 写入上面代码：
import path from 'path';
console.log('jsliang 的 Node 工具库'); 执行 node src/index.ts 就会报错：
这样就起到束缚的作用。
上面解说下一些配置项。
返回目录
用来配置 TS 中的一些项：
{
"compilerOptions": {/* 根本选项 */}
}返回目录
通过 files 指定须要编译的文件：
{
"files": ["./some/file.ts"]
}返回目录
通过 include 和 exclude 指定须要蕴含的文件和排除的文件：
{
"include": ["./folder"],
"exclude": [
"./folder/**/*.spec.ts",
"./folder/someSubFolder"
]
}返回目录
你能够通过 TSLint 或者 ESLint 来束缚代码标准。
然而 TSLint 官网示意 2019 及当前它被抛弃了，改用 ESLint，所以这里咱们装置 ESLint 吧。
参考文献：https://palantir.github.io/ts…
执行命令：
npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
而后创立 .eslintrc.js 来寄存上面内容：
module.exports = {
// 解析器
parser: "@typescript-eslint/parser", // 把 TS 转换成 ESTree 兼容格局的解析器，这样就能够在 eslint 中应用了
// 拓展：用来继承已有的 ESLint 配置
extends: ["plugin:@typescript-eslint/recommended"],
// 插件
plugins: ["@typescript-eslint"],
// 环境：设置代码环境，eslint 可能自动识别对应环境所有的全局变量
env: {
node: true,
commonjs: true,
amd: true,
es6: true,
},
/**
* "off" 或 0 - 敞开规定
* "warn" 或 1 - 开启规定，应用正告级别的谬误：warn (不会导致程序退出),
* "error" 或 2 - 开启规定，应用谬误级别的谬误：error (当被触发的时候，程序会退出)
*/
rules: {
/* Possible Errors - 这些规定与 JavaScript 可能的谬误或者逻辑谬误无关 */
"no-dupe-args": 2, // 禁止 function 定义中呈现重名参数
"no-dupe-keys": 2, // 禁止对象字面量中呈现反复的 key
"no-empty": 2, // 禁止呈现空语句块
"no-func-assign": 2, // 禁止对 function 申明从新赋值
"no-irregular-whitespace": 2, // 禁止不规则的空白
"no-unreachable": 2, // 禁止在 return、throw、continue 和 break 语句之后呈现不可达代码
/* Best Practices - 这些规定是对于最佳实际的，帮忙防止一些问题 */
"eqeqeq": 2, // 要求应用 === 和 !==
"curly": 2, // 强制所有管制语句应用统一的括号格调
/* Variables - 这些规定与变量无关 */
"no-delete-var": 2, // 禁止删除变量
"no-unused-vars": 2, // 进制呈现未应用过的变量
/* Node.js and CommonJS - 对于 Node.js 相干的规定 */
"global-require": 2, // 要求 require() 呈现在顶层模块作用域中
"handle-callback-err": 2, // 要求回调函数中有容错解决
},
};
配置胜利之后，咱们能够在 index.ts 上看到：
图中这个配置项被敞开了，不能
console也太奇葩了小 Tips：配合 VS Code 的【ESlint】插件食用更香
返回目录
当前目录构造如下：
+ src
- index.ts
- .eslintrc.js
- package.json
- tsconfig.json 相应的内容在下面咱们也解说过了，以后执行 node src/index.ts 也能够运行起来，TS 结构结束。
最初贴一下 package.json 以后内容，防止小伙伴们走错路：
{
"name": "jsliang",
"version": "1.0.0",
"description": "Fe-util, Node 工具库",
"main": "index.js",
"scripts": {"test": "echo \"Error: no test specified\"&& exit 1"},
"keywords": [
"jsliang",
"Node 工具库",
"Node"
],
"author": "jsliang",
"license": "ISC",
"devDependencies": {
"@types/node": "^15.12.2",
"@typescript-eslint/eslint-plugin": "^4.26.1",
"@typescript-eslint/parser": "^4.26.1",
"eslint": "^7.28.0",
"ts-node": "^10.0.0",
"typescript": "^4.3.2"
}
}
那么咱们下期见~
返回目录
- TSLint
- ESLint
- ESLint 中文网
- ESLint: 配置规定
- CSDN: eslint 简略配置
- snowdream: ESLint 配置参数
jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。
jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。
