目录0前情提要1TypeScriptj介绍1.1TypeScript是什么1.2TypeScript为什么要为JavaScript添加类型支持1.3TypeScript相比JavaScript的优势2TypeScriptc初体验2.1安装编译TS的安装包2.1.1在项目中安装​2.1.2终端全局安装npm安装报错2.2编译并运行TS代码同名变量ts报错2.2.1编译并运行TS代码2.2.2同名变量报错2.2.2.1关闭对应的js文件2.2.2.2在ts文件尾部添加export{}2.3简化运行TS的步骤ts-node不会生成和更新js文件3TypeScriptc常用类型3.1类型注解/约束3.2常用基础类型概述3.2.1JS已有类型2种3.2.1.1原始类型6种3.2.1.2对象类型3.2.1.2.1数组类型拓展联合类型|3.2.1.2.2函数类型2种方式3.2.1.2.2.1单独指定函数类型3.2.1.2.2.2同时指定函数类型3.2.1.2.2.3拓展void类型3.2.1.2.2.4拓展函数可选参数3.2.1.2.3对象函数可选属性3.2.1.2.3.1换行分隔3.2.1.2.3.2可选属性3.2.2TS新增类型3.2.2.1联合类型|3.2.2.2类型别名type3.2.2.3void类型3.2.2.4接口interface3.2.2.4.1接口3.2.2.4.2接口interface和类型别名type的区别3.2.2.5元组tuple3.2.2.6拓展类型推论3.2.2.7拓展类型断言as3.2.2.8字面量类型搭配联合类型使用推荐3.2.2.9枚举类型3.2.2.9.1枚举3.2.2.9.2枚举成员的值数字枚举3.2.2.9.3字符串枚举3.2.2.9.4枚举的特点及原理3.2.2.10any类型不推荐3.3TS中的typeof运算符类型上下文即变量或参数后面4TypeScript高级类型4.1class类4.1.1class类的基础使用4.1.2class类的构造函数不需要返回值类型4.1.3class类的实例方法4.1.4class类的继承4.1.4.1extends继承父类类类4.1.4.2implements实现接口接口类4.1.5class类的可见性修饰符4.1.5.1public共有的默认可省略4.1.5.2protected受保护的所在类和子类可见实例不可见4.1.5.3private私有的只在当前类可见4.1.6class类的常见修饰符—readonly只读修饰符构造函数属性4.2类型兼容性说明4.2.1对象之间多赋值少4.2.2接口之间对象和接口多赋值少4.2.3函数之间少赋值多4.2.3.1参数个数4.2.3.2参数类型4.2.3.3返回值类型4.3交叉类型4.3.1交叉类型4.3.2交叉类型和接口继承extends对比4.4泛型4.4.1泛型的说明4.4.2泛型的基本使用4.4.3简化泛型函数调用字面量类型4.4.4泛型约束4.4.4.1泛型约束说明4.4.4.2泛型约束添加4.4.4.2.1指定更加具体的类型4.4.4.2.2extends添加约束4.4.4.3多个泛型变量的情况4.4.5泛型接口4.4.5.1泛型接口显式指定具体的类型4.4.5.2JS数组是泛型接口4.4.6泛型类4.4.6.1React的class组件的基类Component是泛型类4.4.6.2泛型类的基本使用4.4.7泛型工具类型内置4.4.7.1Partial所有属性可选4.4.7.2Readonly所有属性只读4.4.7.3Pick选择一组属性构造新类型4.4.7.4Record构造对象类型4.5索引签名类型4.6映射类型对象类型4.6.1根据联合类型创建新类型4.6.2根据对象类型创建新类型keyof4.6.3分析泛型工具类型Partial的实现4.6.3.1索引查询访问类型查询属性类型T[P]基本使用4.6.3.2索引查询访问类型同时查询多个keyof5TypeScript类型声明文件5.1TS中的两种文件类型5.2类型声明文件的使用说明5.2.1使用已有的类型声明文件5.2.1.1内置类型声明文件5.2.1.2第三方库的类型声明文件5.2.1.2.1库自带类型声明文件5.2.1.2.2由DefinitelyTyped提供5.2.2使用自己的类型声明文件5.2.2.1项目内共享类型5.2.2.2为已有JS文件提供类型声明6在React中使用TypeScript6.1使用CRA创建支持TS的项目6.2TS配置文件tsconfig.json6.3React中的常见类型6.3.1函数组件6.3.1.1函数组件的类型及组件的属性6.3.1.2函数组件属性的默认值defaultProps6.3.1.3事件绑定和事件对象6.3.2class组件6.3.2.1class组件类型6.3.2.2class组件的属性和属性默认值6.3.2.3class组件状态和事件7案例TSReact实现任务列表todos7.1App.tsx代码7.2TodoList.tsx代码7.3优化-todos.d.ts代码7.4TodoAdd.tsx代码0前情提要视频资源黑马程序员前端TypeScript教程TypeScript零基础入门到实战全套教程_哔哩哔哩_bilibili1TypeScriptj介绍1.1TypeScript是什么1.2TypeScript为什么要为JavaScript添加类型支持1.3TypeScript相比JavaScript的优势2TypeScriptc初体验2.1安装编译TS的安装包2.1.1在项目中安装npm install typescript --save-dev2.1.2终端全局安装npm安装报错winr,cmd打开终端idealTree:nodejs: sill idealTree buildDepsb报错npm安装时一直idealTree:npm: sill idealTree buildDeps解决方案-CSDN博客// 1. 采用新的镜像地址 npm config set registry https://registry.npmmirror.com // 2.查看是否安装成功 npm config get registry // 3.安装typescript npm install -g typescript // 4.查看typescript版本 tsc -v 注意如果光标有下划线且输入的内容在前面应该是误触了insert键按F12可恢复正常输入2.2编译并运行TS代码同名变量ts报错2.2.1编译并运行TS代码//进入子文件 cd 子文件路径 //回退上一级回到父文件 cd ..2.2.2同名变量报错注意此处报错是因为两个文件有同名变量时ts就会给出提示。只要把对应的js文件关掉就行这并不是代码错误。或者在ts文件尾部添加export{}2.2.2.1关闭对应的js文件2.2.2.2在ts文件尾部添加export{}2.3简化运行TS的步骤ts-node不会生成和更新js文件注意运行报错先执行tsc -init会生成基础配置文件tsconfig.json必须先删除基础配置文件tsconfig.json才能执行tsc -init命令。再执行ts-node hello.ts只在终端上输出更新后的代码不会生成js文件更别提在原来的基础上更新代码。VSCode插件---Code Runner一键执行不生成js未测试直接使用node的前提是没有ts语法且js不会生成和更新。不推荐3TypeScriptc常用类型3.1类型注解/约束3.2常用基础类型概述3.2.1JS已有类型2种3.2.1.1原始类型6种3.2.1.2对象类型3.2.1.2.1数组类型拓展联合类型|3.2.1.2.2函数类型2种方式3.2.1.2.2.1单独指定函数类型3.2.1.2.2.2同时指定函数类型3.2.1.2.2.3拓展void类型3.2.1.2.2.4拓展函数可选参数3.2.1.2.3对象函数可选属性3.2.1.2.3.1换行分隔3.2.1.2.3.2可选属性3.2.2TS新增类型3.2.2.1联合类型|详细请看3.2.1.2.1数组类型拓展联合类型|3.2.2.2类型别名type3.2.2.3void类型3.2.1.2.2.3拓展void类型3.2.2.4接口interface3.2.2.4.1接口3.2.2.4.2接口interface和类型别名type的区别3.2.2.4.3接口继承extends3.2.2.5元组tuple3.2.2.6拓展类型推论没懂为啥是函数void不应该是字符串吗console是一个对象而log是该对象的一个方法console.log的返回类型被定义为void这是因为它的主要目的是将信息打印到控制台而不是返回一个有意义的值。在JavaScript中函数如果没有显式返回值默认会返回undefined。TypeScript中的void类型用于表示没有任何返回值的情况与JavaScript中函数没有返回值时返回undefined的概念相呼应。TypeScript里的void是undefined的子类型所以使用void来表示console.log的返回类型是合适的它明确表明这个方法不会返回任何有价值的数据。注意其他地方省略类型没有类型检查会失去代码保护机制如上图函数变量缺少类型约束没有报错提示3.2.2.7拓展类型断言as如何判断a标签是HTMLAnchorElement运行到浏览器上点击对应的a标签会显示$0然后浏览器终端输入console.log($0)会输出对应的a标签。console.dir($0)输出结果拉到最后显示HTMLAnchorElement。注意如果没有点击a标签直接输入console.log($0)或console.dir($0)会输出undefined。可以省略console.log($0)但必须点击对应的a标签然后执行console.dir($0)3.2.2.8字面量类型搭配联合类型使用推荐3.2.2.9枚举类型3.2.2.9.1枚举3.2.2.9.2枚举成员的值数字枚举3.2.2.9.3字符串枚举注意因为字符串枚举没有自增长行为所以第一个枚举成员赋值字符串的话理论上所有成员都要赋值若中间有赋值数值的亦可实现自增长。可单独给末尾枚举成员赋值字符串例枚举成员的值0,1,2right3.2.2.9.4枚举的特点及原理3.2.2.10any类型不推荐3.3TS中的typeof运算符类型上下文即变量或参数后面4TypeScript高级类型4.1class类4.1.1class类的基础使用注意属性间不要加逗号加分号可省略因为age可能是undefined可以改为age!:number表示age一定有值age:number | undefined表示允许age没有值或直接给age赋值4.1.2class类的构造函数不需要返回值类型4.1.3class类的实例方法4.1.4class类的继承4.1.4.1extends继承父类类类4.1.4.2implements实现接口接口类4.1.5class类的可见性修饰符4.1.5.1public共有的默认可省略4.1.5.2protected受保护的所在类和子类可见实例不可见4.1.5.3private私有的只在当前类可见4.1.6class类的常见修饰符—readonly只读修饰符构造函数属性注意只要是readonly来修饰的属性必须手动提供明确的类型。不提供类型也不赋值则默认为any类型失去类型判断机制不提供类型直接赋值则相当于const常量4.2类型兼容性说明上图中参数个数不一致出现兼容性问题item对应三个参数value、index、array。4.2.1对象之间多赋值少4.2.2接口之间对象和接口多赋值少4.2.3函数之间少赋值多4.2.3.1参数个数4.2.3.2参数类型4.2.3.3返回值类型4.3交叉类型4.3.1交叉类型4.3.2交叉类型和接口继承extends对比方法重载交叉类型和接口继承extends各有优点不能互相替代也没有谁更强大之说4.4泛型4.4.1泛型的说明4.4.2泛型的基本使用4.4.3简化泛型函数调用字面量类型4.4.4泛型约束4.4.4.1泛型约束说明4.4.4.2泛型约束添加4.4.4.2.1指定更加具体的类型4.4.4.2.2extends添加约束类型变量必须满足extends后面的约束对象中不仅有约束属性还有其他属性不会报错4.4.4.3多个泛型变量的情况4.4.5泛型接口4.4.5.1泛型接口显式指定具体的类型4.4.5.2JS数组是泛型接口4.4.6泛型类4.4.6.1React的class组件的基类Component是泛型类4.4.6.2泛型类的基本使用4.4.7泛型工具类型内置4.4.7.1PartialType所有属性可选4.4.7.2ReadonlyType所有属性只读4.4.7.3PickType,Keys选择一组属性构造新类型4.4.7.4RecordKeys,Type构造对象类型4.5索引签名类型4.6映射类型对象类型4.6.1根据联合类型创建新类型4.6.2根据对象类型创建新类型keyof4.6.3分析泛型工具类型Partial的实现4.6.3.1索引查询访问类型查询属性类型T[P]基本使用4.6.3.2索引查询访问类型同时查询多个keyof5TypeScript类型声明文件5.1TS中的两种文件类型5.2类型声明文件的使用说明5.2.1使用已有的类型声明文件5.2.1.1内置类型声明文件5.2.1.2第三方库的类型声明文件5.2.1.2.1库自带类型声明文件5.2.1.2.2由DefinitelyTyped提供5.2.2使用自己的类型声明文件5.2.2.1项目内共享类型5.2.2.2为已有JS文件提供类型声明在utils.js文件所在目录创建同名类型声明文件utile.d.ts接口Point和类型FomartPoint如果有需要也可以导出没用到可以不导出。6在React中使用TypeScript6.1使用CRA创建支持TS的项目ctrl鼠标左键react-scripts可跳转查看该文件代码tsconfig.json文件中include指定src目录该目录中ts/tsx/d.ts文件都会被ts处理ts会自动加载默认自定义类型声明文件d.ts。6.2TS配置文件tsconfig.json浏览器全局搜索快捷键ctrlfTS配置官方文档TypeScript: TSConfig Reference - Docs on every TSConfig optiontsconfig.json详细配置说明tsconfig.json详细配置_suppressimplicitanyindexerrors-CSDN博客终端代码 //初始化生成tsconfig.json配置文件 tsc --init //执行配置文件 tsc6.3React中的常见类型6.3.1函数组件6.3.1.1函数组件的类型及组件的属性FCFunctionComponent需要引入6.3.1.2函数组件属性的默认值defaultProps6.3.1.3事件绑定和事件对象6.3.2class组件6.3.2.1class组件类型6.3.2.2class组件的属性和属性默认值PartialProps可省略省略后书写age没有代码提示。6.3.2.3class组件状态和事件第一个State是为this.setState方法中的count提供代码提示第二个State是为当前属性count提供代码提示。7案例TSReact实现任务列表todos7.1App.tsx代码7.2TodoList.tsx代码7.3优化-todos.d.ts代码src目录创建todos.d.ts文件7.4TodoAdd.tsx代码