关于前端:Node-系列-002-TypeScript

28次阅读

共计 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.json

util 就是仓库名称（文件夹名称），能够随便换个其余文件夹

除了 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/ 处取得。

正文完
前端
发表至： 前端
2021-06-12
 0
关于前端:Taro-React-底部自定义TabBar-使用React-useContext-解决-底部选中异常需要点两次才能选中的问题
关于前端:螺旋矩阵
关于前端:webpack-配置以及手写-plugins
关于前端:uniapp证书生成