TypeScript 入门:高级类型

2023-09-06 0 352

类别论断

const nums =[2,66,88]// TS 的类别推测难以确认res 的结论const res = nums.find(i => i >)//而这时,res 就难以当做纯位数采用// const t = res * res // res 收起//他们依照标识符方法论,晓得res 很大是number,就能间接论断const n1= res asnumber//采用res论断后的结论 n1const n2= n1* n1console.log(n2)

论断的句法准则是表达式xx as 类别xx或是<类别xx>表达式xx,原意是说 TS ,我的标识符很大是这种类别的,放心采用。<类别xx>表达式 xx 的形式在 React 中常与 JSX 句法准则武装冲突,因而通常更提议采用 as 句法准则。

USB Interfaces

基本上采用

functionprint(post:Objpost){//传入的第一类中,要有 title 和 contentconsole.log(post.title)console.log(post.content)}//但,并难以确保分配器很大传至合乎条件的第一类print({name:xiling})采用USB展开文本束缚://表述USBinterface Objpost{//特性名:类别//采用双引号和王劝或是不写都能 title:string content:number}//实参采用USB,标示传至的文本,合乎USB的表述functionprint(post:Objpost){//传至的第一类中,要有 title 和 contentconsole.log(post.title)console.log(post.content)}print({name:xiling})//收起print({title:lisi,content:66})

TypeScript 入门:高级类型

较旧与黎贞特性

//表述USBinterface Objpost {//特性名:类别//采用双引号和王劝或是不写都能 title: string content: number subtitle?: string//较旧核心成员属性 readonly summary: string//黎贞特性,除非表达式则不容修正}//实参采用USB,标示传至的文本,合乎USB的表述functionprint(post: Objpost){//传至的第一类中,要有 title 和 contentconsole.log(post.title)console.log(post.content)}let obj:Objpost ={ title:lisi,content:66,summary:xiling}obj.summary=liuneng//修正黎贞特性,收起print(obj)

动态核心成员

interfaceCache {//[表述动态核心成员:类型]:值类别[props:string]:string}const obj: Cache ={}//动态添加第一类核心成员obj.title=javaScriptobj.content=htmlconsole.log(obj)

类的采用

基本上采用

class Person{//在类中初始化特性表述 name:string=lisi//表述初始值 age:numberconstructor(name:string,age:number){this.name=namethis.age=agethis.sex=男//没有初始化的核心成员会收起} SayHi(msg:string):void{console.log(Hello ${this.name},${msg})}}

访问修饰符

class Person{//类中的修饰符有三种 public private protected// public 公有特性,任何地方都能访问// protected 受保护特性,只有自己和继承的子类中能访问// private 私有特性,只在类内部访问public name:string=lisiprivate age:numberprotected gender:booleanconstructor(name:string,age:number){this.name=namethis.age=agethis.gender=true } SayHi(msg:string):void{console.log(Hello ${this.name},${msg})console.log(this.gender)}}class Student extends Person{ sya(){this.gender }}let stu =newStudent(lisi,66)stu.namestu.age//私有特性,外部访问报错stu.gender//受保护特性,外部访问收起

类的黎贞特性

class Person{//设置核心成员为黎贞特性,除非表达式,不容修正public readonly name:string=lisiconstructor(name:string,age:number){this.name=name } SayHi(msg:string):void{this.name=liuneng//修正收起}}

类与USB

//人和动物都有运动和吃东西的行为//都有这样的行为,但确实不一样的;//这样的情况下,他们就能采用USB描述不同的行为束缚class Person { eat(food: string){console.log(采用筷子:${food})} run(distance: number){console.log(双脚:${distance})}}class Animal { eat(food: string){console.log(撕咬的吃:${food}))} run(distance: number){console.log(四蹄${distance})}}

人和动物都有运动和吃东西的行为,都有这样的行为,但确实不一样的。这样的情况下,他们就能采用USB描述不同的行为束缚。

//USB只做行为的束缚,不做具体方法的实现interface eatAndrun { eat(food: string):void run(distance: number):void}//采用 implements 关键字展开束缚class Person implements eatAndrun { eat(food: string){console.log(采用筷子:${food})}//如果缺少束缚的核心成员,则会收起// run(distance: number){// console.log(双脚:${distance})//}}

但在实际的开发中,USB束缚会更加的细致,就类似摩托车也能跑,但并不是人或动物,细致的束缚会更加灵活。

//对USB展开细致化的拆分interface eat { eat(food: string):void}interface run { run(distance: number):void}//采用多个USB,需要双引号,隔开class Person implements eat,run { eat(food: string){console.log(采用筷子:${food})}//如果缺少束缚的核心成员,则会收起 run(distance: number){console.log(双脚:${distance})}}

抽象类与抽象方法

抽象类

与USB类似,但USB只能展开规范束缚难以具体实现,而抽象类能具体实现。抽象类的表述很简单,只需要在类声明的前面添加 abstract 就能了。

abstractclass Animal { eat(food:string):void{console.log(撕咬的吃:${food})}}

类除非被抽象,就难以被实例化,只能采用子类继承采用。

// newAnimal()//收起–难以创建抽象类的实例classDogextendsAnimal{}

抽象方法

abstractclass Animal { eat(food:string):void{console.log(撕咬的吃:${food})}//表述抽象方法run ,需要在继承的子类中实现(要实现)abstract run(distance:number):void}class Dog extends Animal{//抽象方法要在子类中实现 run(distance: number):void {console.log(distance)}}

泛型

在表述函数、USB或者类的时候,没有指定具体的类别,等到采用时才会具体指定的一种特征。

//函数表述时,参数及返回值并难以确认类别//或是,函数需要在运行时固定类别//函数名后面采用<占位符>,在不确认类别的地方,采用:占位符functioncreateArray(length: number, value: T): T[]{const arr =Array(length).fill(value)return arr}//函数调用时,采用函数名<泛型的具体类别>(实参1,实参2)createArray(3,xl)

类别声明

他们在展开项目开发时,肯定会用到一些第三方模块,但这些第三方模块不很大是 TS 的,那就难以使用强类别的友好开发体验。

以 lodash 为例,采用 npm install lodash 安装后,通过 import 句法引入。

//难以找到模块“lodash”的声明文件。import {camelCase} fromlodash// camelCase 将字符串转为驼峰格式const res =camelCase(hello xiling)//没有类别提示console.log(res)

引入后就出现了错误提示:难以找到模块“lodash”的声明文件。

同时提示中也说他们安装 npm install @types/lodash -D 模块来解决这个问题,已开发依赖的形式安装即可,@types/lodash 其实是声明文件,成功安装之后,操作就消失了。

而有的模块间接拥有声明文件,这时就不需要额外安装扩展库了。

但,有一些相对陈旧的库,在采用时自身没有声明文件,也没有对应的文件库这就需要我们自己在标识符中展开处理了。

他们依然以 lodash 为例,npm uninstall @types/lodash 卸载类别声明文件,模拟这种情况,难以找到模块“lodash”的声明文件。

camelCase 也没有类别提示:因为确实没有类别声明文件,所以,他们尝试解决 camelCase 的类别提示,其实只需要采用 declare 关键字展开标示就能了:

//难以找到模块“lodash”的声明文件。import {camelCase} fromlodashdeclare functioncamelCase(input:string):string// camelCase 将字符串转为驼峰格式const res =camelCase(hello xiling)//没有类别提示console.log(res)

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务