当前位置：首页>后端>正文

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

后端2024-04-20 08:23:11

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

导读

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

正文

TS与代码转义工具Babel

Babel程序转义器，将高版本JS转义成低版本的JS，使高版本代码能在低版本环境中运行
TS编译器->能够对TS，JS进行静态类型检查，又能将TS，JS转义成为JS代码
TS编译器包含Babel的主要功能，TS与Babel能够结合使用，TS负责静态类型加成，Babel负责转义
比如：为一个已经依赖Babel的JS项目添加静态类型检查，将babel工作流中加入TS编译器静态类型检查
编译器：将高级语言转化为高级语言
转义器：将高级语言转化为高级语言
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 在安装时默认配置了环境变量。

配置一个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

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

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

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')
  }
}

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

TS和静态代码分析工具ESLint

静态代码检查工具 eslint，定义代码规范提高代码质量，发现代码存在缺陷，对代码运行之前进行分析检查包括代码缩进
$ cnpm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
.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"
        }
      ]
    }
  }

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

VSCode中使用TS

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

查看全文

https://www.xamrdz.com/backend/3s21923422.html

导读

正文

TS与代码转义工具Babel

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

TS和静态代码分析工具ESLint

VSCode中使用TS

相关文章：