TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解（学习总结—从入门到深化）

文章目录

第三方声明文件

自定义声明文件

tsconfig.json文件简介

tsconfig.json 文件结构与配置 

tsconfig.json文件常见配置示例

与Webpack构建工具整合

第三方声明文件

声明文件分为三种类型

1、typescript内置声明文件

2、第三方声明文件

3、自定义声明文件 

内置声明文件

当我们安装typescript的同时就已经安装了内置的声明文件，typescript内置的声明文件存放在typescript安装目录下的lib文件夹中 

第三方声明文件

如果在项目中使用某一个第三方库，通常也需要安装该库的声明文件，这样typescript能够对该库的代码进行类型检查，同时也提供该库的类型提示

这里我们用 jQuery 做例子

当然，jQuery 的声明文件不需要我们定义了，社区已经帮我们定义好了jQuery in DefinitelyTyped 我们可以直接下载下来使用直接用 npm 安装对应的声明模块即可

npm install @types/jquery --save-dev 

当然你还需在项目中引入jQuery

$("#root").append("加载jQuery成功") 

自定义声明文件

声明文件分为三种类型

1、typescript内置声明文件

2、第三方声明文件

3、自定义声明文件 

 当一个第三方库(公司内部提供的库)没有提供声明文件时，我们就需要自己书写声明文件了

// add.js
function add(x,y){
  console.log(x,y)
}

 编写声明文件

// add.d.ts
declare function add(x:number,y:number):void;

// index.ts
add(10,20)

温馨提示

此时注意：如果 add.d.ts 没有被打开，仍然不可以使用，可以配置 tsconfig.json 文件

{
  "files":[
  "add.d.ts",
    "index.ts"
 ]
}

tsconfig.json文件简介

TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript 项目的根目录

通常 tsconfig.json 文件主要包含两部分内容：指定待编译文件和定义编译选项 

 为什么使用 tsconfig.json

通常我们可以使用 tsc 命令来编译少量 TypeScript 文件，但如果实际开发的项目，很少是只有单个文件，当我们需要编译整个项目时，就可以使用 tsconfig.json 文件，将需要使用到的配置都写进

tsconfig.json 文件，这样就不用每次编译都手动输入配置，另外也方便团队协作开发 

初始化 tsconfig.json

1、手动在项目根目录（或其他）创建 tsconfig.json 文件并填写配置

2、通过 tsc –init 初始化 tsconfig.json 文件 

编写typescript代码 

function getVersion(version:string) {
  if (!version) {
    version = "1.0.0";
 }
  return version;
}
console.log(getVersion("1.0.1"));

 使用常见配置选项

{
  "compilerOptions": {
    "target": "ES6", // 目标语言的版本
    "removeComments": true, // 删除注释
    "outDir": "./dist/", // 编译输出路径
    "sourceMap": true, // 生成目标文件的sourceMap文件
},
"files": [  // 指定待编译文件
    "./src/index.ts" 
 ]
}

 温馨提示

sourceMap

本质上是一个信息文件,里面储存着代码转换前后的对应位置信息，它记录了转换压缩后的代码所对应的转换前的源代码位置,是源代码和生产代码的映射

files

files 配置项值是一个数组，用来指定了待编译文件，即入口文件。

当入口文件依赖其他文件时，不需要将被依赖文件也指定到 files中，因为编译器会自动将所有的依赖文件归纳为编译对象

tsconfig.json 文件结构与配置 

在 tsconfig.json 文件中按照顶层属性，分为以下几类 

 1配置说明

compilerOptions
compilerOptions 属性作用是配置编译选项 

{
  "compilerOptions": {
    "target": "ES6", // 目标语言的版本
    "removeComments": true, // 删除注释
    "outDir": "./dist/", // 编译输出路径
    "sourceMap": true, // 生成目标文件的sourceMap文件
  }
}

 compileOnSave

 compileOnSave 属性作用是设置保存文件的时候自动编译，但需要编译器支持

{
 "compileOnSave": false,
}

 温馨提示

vsCode配置：终端 -> 运行任务 -> typescript -> tsc:监视

files 

files 属性作用是指定需要编译的单个文件列表

{
  "files": [
 "./src/index.ts"
]
}

exclude

exclude 属性作用是指定编译器需要排除的文件或文件夹 

默认排除 node_modules 文件夹下文件

{
 "exclude": [
  "src/lib"
]
}

include

include 属性作用是指定编译需要编译的文件或目录 

{
 "include": [
  // "src" // 会编译src目录下的所有文件，包括子目录
  // "src/*" // 只会编译src一级目录下的文件
  "src/*/*" // 只会编译src二级目录下的文件
]
}

extends

extends 属性作用是引入其他配置文件，继承配置 

{
"extends": "./tsconfig.base.json"
}

references

references 属性作用是指定工程引用依赖。 在项目开发中，有时候我们为了方便将前端项目和后端 node 项目放在同一个目录下开发，两个项目依赖同一个配置文件和通用文件，但我们希望前后端项目进行灵活的分别打包，那么我们可以进行如下配置 (但我们并不推荐这么操作) 

{
 "references": [
  {"path": "./common"}
]
}

 typeAcquisition

typeAcquisition 属性作用是设置自动引入库类型定义文件(.d.ts)相关。

包含 3 个子属性 

enable : 布尔类型，是否开启自动引入库类型定义文件(.d.ts)，默认为 false
include : 数组类型，允许自动引入的库名，如：[“jquery”, “lodash”]
exculde : 数组类型，排除的库名

{
 "typeAcquisition": {
  "enable": false,
  "exclude": ["jquery"],
  "include": ["jest"]
}
}

tsconfig.json文件常见配置示例

tsconfig.json 中 compilerOptions 编译选项配置非常繁杂，接下来我们就介

绍一下这个 

 我们先给出大家列出最常用的配置列表

{
 // ...
 "compilerOptions": {
  "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度
  "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置
  "diagnostics": true, // 打印诊断信息
  "target": "ES5", // 目标语言的版本
  "module": "CommonJS", // 生成代码的模板标准
  "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD",
  "lib": ["DOM", "ES2015", "ScriptHost","ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
  "allowJS": true, // 允许编译器编译JS，JSX文件
  "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
  "outDir": "./dist", // 指定输出目录
  "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
  "declaration": true, // 生成声明文件，开启后会自动生成声明文件
  "declarationDir": "./file", // 指定生成声明文件存放目录
  "emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件
  "sourceMap": true, // 生成目标文件的sourceMap文件
  "inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中
  "declarationMap": true, // 为声明文件生成sourceMap
  "typeRoots": [], // 声明文件目录，默认时node_modules/@types
  "types": [], // 加载的声明文件包
  "removeComments":true, // 删除注释
   "noEmit": true, // 不输出文件,即编译后不会生成任何js文件
  "noEmitOnError": true, // 发送错误时不输出任何文件
  "noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用
  "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块
  "downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
  "strict": true, // 开启所有严格的类型检查
  "alwaysStrict": true, // 在代码中注入'usestrict'
  "noImplicitAny": true, // 不允许隐式的any类型
  "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
  "strictFunctionTypes": true, // 不允许函数参数双向协变
  "strictPropertyInitialization": true, //类的实例属性必须初始化
  "strictBindCallApply": true, // 严格的bind/call/apply检查
  "noImplicitThis": true, // 不允许this有隐式的any类型
  "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)
  "noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)
  "noFallthroughCasesInSwitch": true, //防止switch语句贯穿(即如果没有break语句后面不会执行)
 "noImplicitReturns": true, //每个分支都会有返回值
  "esModuleInterop": true, // 允许export=导出，由import from 导入
  "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块
  "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
  "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
  "paths": { // 路径映射，相对于baseUrl
   // 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置
   "jquery":["node_modules/jquery/dist/jquery.min.js"]
 },
  "rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错
  "listEmittedFiles": true, // 打印输出文件
  "listFiles": true// 打印编译的文件(包括引用的声明文件)
   }
}

与Webpack构建工具整合

当真实开发场景中，一般会采用工程化方式管理项目，所以我们需要与构建工具整合，当前主要的构建工具就是 webpack 了 

 获取Webpack基础环境

1、在工程化课程中的源码中获取 webpack-demo 项目

2、在本课程源码中获取 webpack-ts 项目

增加配置文件 tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true, // 在ts文件中允许引入js文件
    "moduleResolution": "node" // 引入模块的方式
 }
}

下载解析 typescript 依赖

npm install --save-dev typescript@4.9.4 ts-loader@9.4.2

修改配置文件 webpack.config.js

// 配置入口文件
entry: "./src/app.ts",
// 省略后缀
resolve: {
 extensions: ['.tsx', '.ts', '.js'],
},

增加转码规则

rules: [
 {
    test: /\.ts$/,
    use: [
     {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
       }
     },
      'ts-loader'
   ],
    exclude: /node_modules/
 }
]

修改 js 代码为 ts

// Person.ts
export default class Person {
  public name:string
  public age:number
  constructor(name:string,age:number){
    this.name = name
    this.age = age
 }
  getInfo(){
    return this.name + "," + this.age
 }
}

// app.ts
import Person from "./Person"
import "./css/app.css"
import "./css/app.less"
import "./css/app.scss"
const p = new Person("itbaizhan",12)
document.getElementById('root').innerText = 'Hello:' + p.getInfo();