5. TypeScript项目实战 - 《TypeScript入门与实战》读后总结

• 导读
• 正文
  • TS与代码转义工具Babel
  • TS和代码打包工具Webpack,要配置ts-loader
  • TS和静态代码分析工具ESLint
  • VSCode中使用TS

导读

TS工程化思路，如果要作项目，必看

正文

TS与代码转义工具Babel

1. Babel程序转义器，将高版本JS转义成低版本的JS，使高版本代码能在低版本环境中运行
2. TS编译器->能够对TS，JS进行静态类型检查，又能将TS，JS转义成为JS代码
3. TS编译器包含Babel的主要功能，TS与Babel能够结合使用，TS负责静态类型加成，Babel负责转义
4. 比如：为一个已经依赖Babel的JS项目添加静态类型检查，将babel工作流中加入TS编译器静态类型检查
5. 编译器：将高级语言转化为高级语言
6. 转义器：将高级语言转化为高级语言
7. npx 与 npm 有什么区别？

• npx 是 npm 中的一部分，主要用于解决本地安装的包中 cli 命令，能在本地运行，无需再手动配置环境变量。它运行本地命令的原理：a.本地安装的包中的 cli 命令都统一加入到 node_modules 中的.bin 目录中。b.使用 npx 运行命令时，会从.bin 目录中查找。对于不存在的指令，npx 支持临时下载包到内存中临时使用此包中的指令，使用完则会释放内存。(总结：npx 用于运行本地安装包中的指令的)
  npx作用：
  1. 默认情况下，首先检查路径中是否存在要执行的包（即在项目中）；
  2. 如果存在，它将执行；
  3. 若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它；
• npm 是对包进行管理的，进行包的下载、删除、更新、查询等操作的。npm 主要由两部分组成，一部分就是 npmregistry，另一部分 npmcli。npmregistry 存储着几乎所有的包，npmcli 是管理包的方式。再就是 npm 官网。npm 支持全局安装以及本地安装。全局安装的包，可以直接运行包中的命令行指令，因为 npm 在安装时默认配置了环境变量。

1. 配置一个TS与Babel结合使用，TS静态类型检查，Babel转义代码

• $ npm init --yes
• $ cnpm install @babel/core @babel/cli @babel/preset-env @babel/preset-typescript --save-dev
• package.json

{
  "scripts": {
    "type-check": "tsc --noEmit",
    "build": "babel src --out-dir lib --extensions .ts,.tsc --source-maps inline"
  }
}

• .babel.json

  {
    "presets": [
      "@babel/env",
      "@babel/typescript"
    ]
  }

• scr/index.ts

  export function toUpper(strs: string[]): string[] {
    return strs.map((str: string) => str.toUpperCase());
  }

• tsconfig.json

  {
    "compilerOptions": {
      "target": "ES5",
      "outDir": "lib",
      "strict": true,
      "isolatedModules": true
    }
  } 

• 先运行 类型检查-再运行转义
• --isolatedModules 当编译器发现无法被正确处理的语言时给出提示，Babel能够转义绝大多数的TS，然然存在一些语言结构无法处理
  使用情景：
• 为程序添加静态类型检查，使用TS
• 将TS、JS转义为兼容某一环境的JS既可以使用tsc又可以使用babel
• 如果一个项目已经存在TS，推荐继续使用TS编译器转义代码
• 如果已经存在Babel，可以继续使用babel转义代码，然后同tsc进行静态代码类型检查
• 如果使全新的项目开发，直接用TS进行开发不需要引入Babel

TS和代码打包工具Webpack,要配置ts-loader

1. $ cnpm install --save-dev typescript
2. $ cnpm install --save-dev webpack webpack-cli ts-loader
3. tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "outDir": "dist",
    "strict": true,
  }
}

1. webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'boundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

1. src/
   index.ts
   utils.ts
2. npx webpack => 输出正确

TS和静态代码分析工具ESLint

1. 静态代码检查工具 eslint，定义代码规范提高代码质量，发现代码存在缺陷，对代码运行之前进行分析检查包括代码缩进
2. $ cnpm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
3. .eslintrc.json

  {
    "root": true, //是否根配置文件,是则不会向上查找
    "parser": "@typescript-eslint/parser", //解析器,js可忽略,因为eslint内置js解析器
    "plugins": [ //插件扩展功能,添加了对应的插件才能检查制定的代码规则
      "@typescript-eslint"
    ],
    "extends": [ //继承一些推荐的检查规则
      "eslint:recommended", //eslint内置检查规则
      "plugin:@typescript-eslint/eslint-recommended", //禁用了一部分eslint:recommended规则,ts已经提供不必重复检查
      "plugin:@typescript-eslint/recommended" //插件提供推荐的检查规则
    ],
    "rules": { //针对单个检查规则的详细配置
      "no-console": "warn", //console警告
      "@typescript-eslint/array-type": [ //数组推荐使用泛型
        "error",
        {
          "default": "generic"
        }
      ]
    }
  }

4. .eslintignore
   node_modules
   dist
5. npx eslint . --ext .ts
6. npx eslint . --ext .ts --fix
7. 集成 vscode
   Eslint 能与大部分的集成开发环境和构建工具集成集成
8. TS也能根据代码静态类型信息作进一步检查，功能上与eslint有一部分重叠，但在项目中应该使用eslint，更加全面

VSCode中使用TS

1. codelens 显示被哪些代码调用
2. 组织模块导入 source Action>origanize inports
3. 代码格式化
4. 代码导航