目录五、TypeScript 类型声明文件概述5.1 TS中的两种文件类型5.2 类型声明文件的使用说明六、在 React 中使用 TypeScript概述6.1 使用CRA创建支持TS的项目6.2 TS 配置文件 tsconfig.json6.3 React 中的常用类型五、TypeScript 类型声明文件概述今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用TS编写的最终都要编译成JS代码才能发布给开发者使用。我们知道是TS提供了类型才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时你会发现它们几乎都有相应的TS类型这些类型是怎么来的呢类型声明文件类型声明文件用来为已存在的JS库提供类型信息。这样在TS项目中使用这些库时就像用TS一样都会有代码提示、类型保护等机制了。TS的两种文件类型类型声明文件的使用说明5.1 TS中的两种文件类型TS中有两种文件类型.ts文件.d.ts文件.ts 文件既包含类型信息又可执行代码。可以被编译为js文件然后执行代码。用途编写程序代码的地方。.d.ts 文件只包含类型信息的类型声明文件。不会生成js文件仅用于提供类型信息。用途为JS提供类型信息。总结ts是implementation代码实现文件.d.ts是declaration类型声明文件。如果要为JS库提供类型信息要使用.d.ts文件。5.2 类型声明文件的使用说明在使用TS开发项目时类型声明文件的使用包括以下两种方式使用已有的类型声明文件创建自己的类型声明文件学习顺序先会用别人的再会写自己的。使用已有的类型声明文件1. 内置类型声明文件 2. 第三方库的类型声明文件。1. 内置类型声明文件TS为JS运行时可用的所有标准化内置API都提供了声明文件。比如在使用数组时数组所有方法都会有相应的代码提示以及类型信息实际上这都是TS提供的内置类型声明文件。可以通过Ctrl鼠标左键Macoption鼠标左键来查看内置类型声明文件内容。比如查看forEach方法的类型声明在VSCode中会自动跳转到lib.es5.d.ts类型声明文件中。当然像window、document等BOM、DOMAPI也都有相应的类型声明lib.dom.d.ts。2. 第三方库的类型声明文件目前几乎所有常用的第三方库都有相应的类型声明文件。第三方库的类型声明文件有两种存在形式1. 库自带类型声明文件 2.由DefinitelyTyped提供。1. 库自带类型声明文件比如axios。解释这种情况下正常导入该库TS就会自动加载库自己的类型声明文件以提供该库的类型声明。2. 由DefinitelyTyped提供。DefinitelyTyped是一个github仓库用来提供高质量TypeScript类型声明。可以通过npm/yarn来下载该仓库提供的TS类型声明包这些包的名称格式为types/*。比如types/react、types/lodash等。说明在实际项目开发时如果你使用的第三方库没有自带的声明文件VSCode会给出明确的提示。解释当安装types/*类型声明包后TS也会自动加载该类声明包以提供该库的类型声明。补充TS官方文档提供了一个页面可以来查询types/*库。创建自己的类型声明文件1. 项目内共享类型 2. 为已有JS文件提供类型声明。1. 项目内共享类型如果多个.ts文件中都用到同一个类型此时可以创建.d.ts文件提供该类型实现类型共享。操作步骤创建index.d.ts类型声明文件。创建需要共享的类型并使用export导出TS中的类型也可以使用 import/export 实现模块化功能。在需要使用共享类型的.ts文件中通过import导入即可.d.ts后缀导入时直接省略。创建自己的类型声明文件1. 项目内共享类型 2. 为已有JS文件提供类型声明。2. 为已有JS文件提供类型声明在将JS项目迁移到TS项目时为了让已有的js文件有类型声明。成为库作者创建库给其他人使用。注意类型声明文件的编写与模块化方式相关不同的模块化方式有不同的写法。但由于历史原因JS模块化的发展经历过多种变化AMD、CommonJS、UMD、ESModule等而TS支持各种模块化形式的类型声明。这就导致类型声明文件相关内容又多又杂。演示基于最新的ESModuleimport/export来为已有 .js 文件创建类型声明文件。开发环境准备使用webpack搭建通过 ts-loader 处理 .ts文件。2. 为已有JS文件提供类型声明说明TS 项目中也可以使用 .js文件。说明在导入 .js文件时TS会自动加载与 .js同名的 .d.ts文件以提供类型声明。declare关键字用于类型声明为其他地方比如js文件已存在的变量声明类型而不是创建一个新的变量。对于type、interface等这些明确就是TS类型的只能在TS中使用的可以省略declare关键字。对于let、function等具有双重含义在JS、TS中都能用应该使用declare关键字明确指定此处用于类型声明。六、在 React 中使用 TypeScript概述现在我们已经掌握了TS中基础类型、高级类型的使用了。但是如果要在前端项目开发中使用TS还需要掌握React、Vue、Angular等这些库或框架中提供的API的类型以及在TS中是如何使用的。接下来我们以React为例来学习如何在React项目中使用TS。包括以下内容使用CRA创建支持TS的项目TS 配置文件 tsconfig.jsonReact 中的常用类型6.1 使用CRA创建支持TS的项目React 脚手架工具 create-react-app简称CRA默认支持 TypeScript。创建支持TS 的项目命令npx create-react-app 项目名称 --template typescript。当看到以下提示时表示支持TS的项目创建成功更多在已有项目中使用TS相对于非TS项目目录结构主要由以下三个变化项目根目录中增加了 tsconfigjson 配置文件指定TS的编译选项比如编译时是否移除注释。React组件的文件扩展名变为*.tsx。src目录中增加了react-app-env.d.tsReact 项目默认的类型声明文件。react-app-env.d.tsReact 项目默认的类型声明文件。三斜线指令指定依赖的其他类型声明文件types表示依赖的类型声明文件包的名称。解释告诉TS帮我加载react-scripts这个包提供的类型声明。react-scripts的类型声明文件包含了两部分类型react、react-dom、node 的类型图片、样式等模块的类型以允许在代码中导入图片、SVG等文件。TS会自动加载该 .d.ts文件以提供类型声明通过修改 tsconfigjson 中的 include 配置来验证。6.2 TS 配置文件 tsconfig.jsontsconfig.json 指定项目文件和项目编译所需的配置项。注意TS的配置项非常多100以CRA项目中的配置为例来学习其他的配置项用到时查文档即可。tsconfig.json 文件所在目录为项目根目录与package.json同级。tsconfig.json 可以自动生成命令tsc --init。除了在 tsconfigjson 文件中使用编译配置外还可以通过命令行来使用。使用演示tsc hello.ts --target es6。注意tsc后带有输入文件时比如tsc hello.ts将忽略 tsconfig.json文件。tsc后不带输入文件时比如tsc才会启用 tsconfig.json。推荐使用tsconfig.json配置文件。6.3 React 中的常用类型前提说明现在基于 class 组件来讲解 ReactTS 的使用最新的ReactHooks在后面讲解。在不使用TS时可以使用 prop-types 库为 React 组件提供类型检查。说明TS项目中推荐使用 TypeScript 实现组件类型校验代替 PropTypes。不管是 React 还是 Vue只要是支持TS的库都提供了很多类型来满足该库对类型的需求。注意React 项目是通过 types/react、types/react-dom 类型声明包来提供类型的。这些包CRA已帮我们安装好react-app-env.d.ts直接用即可。参考资料React文档-静态类型检查、ReactTS备忘单。React是组件化开发模式React开发主要任务就是写组件两种组件1.函数组件 2.class组件。1. 函数组件主要包括以下内容组件的类型组件的属性props组件属性的默认值defaultProps享事件绑定和事件对象函数组件的类型以及组件的属性实际上还可以直接简化为完全按照函数在TS中的写法函数组件属性的默认值defaultProps实际上还可以直接简化为完全按照函数在TS中的写法事件绑定和事件对象再比如文本框技巧在JSX中写事件处理程序e{}然后把鼠标放在e上利用TS的类型推论来查看事件对象类型。2. class组件主要包括以下内容组件的类型、属性、事件组件状态stateclass组件的类型class组件的属性和属性默认值class组件状态state和事件