《TypeScript入门与全栈式网站开发实战》 课件 ch8类型声明文件

第8章类型声明文件TypeScript入门与全栈式网站开发实战TypeScriptProgramming8.1获取类型声明文件目录/CONTENTS8.1.1获取内置API的类型声明文件8.2定义类型声明文件类型声明文件（.d.ts）用来为JS代码资源(变量、函数、类、接口)提供类型标注。通过引入类型声明文件，在TS项目开发环境下，集成JS库，自动完成、类型检查与推断、错误提示等功能。8.1.2获取常用第三方JS库的类型声明文件8.2.18.2.1对JavaScript文件的直接支持8.2.28.2.2为.js文件编写类型声明文件8.3实战闯关——类型声明文件8.1PART获取类型声明文件8.1获取类型声明文件TypeScript已为标准化内置API提供了类型声明文件；常用第三方JavaScript库的类型声明文件一般由开发者提供。8.1.1获取内置API的类型声明文件VSCode输入，newSet([1,2,3])Ctrl键加单击Set：图8-1.d.ts8.1获取类型声明文件8.1.2获取常用第三方JS库的类型声明文件(1)TS项目目录中安装axios：npminstallaxios(2)test.ts导入axios:importaxiosfrom'axios',Ctrl键+单击“axios”，跳转index.d.ts图2-21.直接获取JavaScript库自带的类型声明文件例axios，自带了.d.ts文件三种方式:：1.直接获取JavaScript库自带的类型声明文件；

2.使用“npminstall@types/库名”命令，获取JS库的类型声明文件；

3自定义类型声明文件（8.2）8.1获取类型声明文件8.1.2获取常用第三方JS库的类型声明文件2.使用“npminstall@types/库名”命令，获取JS库类型声明文件进入GitHub上名为DefinitelyTyped的公共库：/DefinitelyTyped查询相应JS库的类型声明文件“库名.d.ts”，执行“npminstall@types/库名”例JQuery(1)安装JQuery库和的类型声明包npminstalljquerynpminstall@types/jquery(2)引入JQuery类型声明文件。test.ts文件，引入JQuery：///<referencepath="node_modules/@types/jquery/index.d.ts"/>$(function(){$('#say').html('WelcomeTS+JQuery')})鼠标移至可显示相应类型声明文件index.d.ts注：GitHub若网络问题无法显示，可寻找镜像处理如：/mirrors/definitelytyped。例：7ziptypes目录上找7zip，然后安装和使用npminstall7zip-minnpminstall@types/7zip-minimport_7z=require("7zip-min")_7z.pack('./node_modules','md.7z',err=>{})8.2PART定义类型声明文件8.2定义类型声明文件8.2.1对JavaScript文件的直接支持(1)配置tsconfig.json文件：

"allowJs":true,"module":"commonjs",(2)编写JS模块文件my.js，导出资源：module.exports={max}(3)编写ts文件，调用.js中导出的资源：import{max}from"./my";max(1,2)

或letres=require('./my')例：.ts文件中调用.js文件中导出的类型最简单的方式：tsconfig.json文件中启用“allowJs”选项，直接支持JS8.2定义类型声明文件8.2.2为.js文件编写类型声明文件(1)编写文件tools.js:letx=0;letpoint={x:0,y:0};functionmax(x,y){

returnx>y?x:y}classCircle{

radius=0;

point={x:0,y:0}area=function(){return3.14*this.radius*this.radius}}module.exports={x,point,max,Circle}//导出4种资源例:为.js文件编写类型声明文件(2)编写tools.js的类型声明文件tools.d.ts(注意同名)declarevarx:numberinterfacePoint{x:number,y:number}declareletpoint:Pointdeclarefunctionmax(x:number,y:number):numberdeclareclassCircle{radius:number;point:Point;area:()=>number}export{x,Point,max,Circle}//declare后需export(3)编写文件demo.ts，调用类型声明文件tools.d.ts导出的资源import{x,Point,max,Circle}from'./tools'//导入tools.d.ts导出的资源console.log(x)//测试变量x可用letpoint0:Point={x:0,y:0}//测试Point类型可用letmaxVal=max(1,2)//测试max函数可用letc=newCircle();c.radius=10