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

第8章类型声明文件TypeScript入门与全栈式网站开发实战TypeScriptProgramming

8.1获取类型声明文件目录/CONTENTS8.1.1获取内置API的类型声明文件8.2定义类型声明文件类型声明文件（.d.ts）用来为JS代码资源(变量、函数、类、接口)提供类型标注。通过引入类型声明文件，在TS项目开发环境下，集成JS库，自动完成、类型检查与推断、错误提示等功能。8.1.2获取常用第三方JS库的类型声明文件.1对JavaScript文件的直接支持.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.ts

8.1获取类型声明文件8.1.2获取常用第三方JS库的类型声明文件(1)TS项目目录中安装axios：npminstallaxios(2)test.ts导入axios:importaxiosfromaxios,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”选项，直接支持JS

8.2定义类型声明文件8.2.2为.js文件编写类型声明文件(1)编写文件tools.js:letx=0;letpoint={x:0,y:0};functionmax(x,y){returnxy?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文件编写类