【TypeScript】进阶之路语法细节，类型和函数,红酒木瓜靓汤订购（typescript 进阶）

文件名：【TypeScript】进阶之路语法细节，类型和函数,红酒木瓜靓汤订购 【TypeScript】进阶之路语法细节，类型和函数

进阶之路 类型别名(type)的使用接口(interface)的声明的使用二者区别： 联合类型和交叉类型联合类型交叉类型 类型断言获取DOM元素 非空类型断言字面量类型的使用类型缩小（类型收窄）TypeScript 函数类型函数类型表达式内部规则检测函数的调用签名如何选择他们？ 参数的可选类型参数的默认值剩余参数 函数重载函数重载-联合类型（优先使用）

类型别名(type)的使用 为解决给联合类型的类型定义过长的问题使用类型别名 // 使用关键字type定义类型别名对象,可以复用type myname = number | stringfunction hander1(name: myname) {console.log(name)if (typeof name === 'string') {console.log(name.length)}}//不使用类型别名function hander2(x: number,y:number,z?:number) {}//使用类型别名type myx={x: number,y:number,z?:number}function hander3(mytype:myx) {} 接口(interface)的声明的使用 关键字使用interface声明相比较类型别名，少了= //接口interface,没有=号interface myX2 {x: number y: number z?: number}//使用接口声明function hander4(mytype: myX2) {} 二者区别： 类型别名和接口声明非常相似，在定义对象的时候，可以任意选择使用主要区别：type类型使用范围更广type定义的是别名，不允许两个相同名称的别名使用 type myname = number | string 1，接口类型只能用来声明对象2，接口类型声明对象的时候可以多次声明3，接口类型支持继承4，接口类型支持被类实现 //接口interface,没有=号，可以多次声明interface myX2 {x: number y: number }//接口interface,没有=号interface myX2 {z?: number}//使用接口声明function hander4(mytype: myX2) {}//接口interface，支持继承interface myX2 {x: number y: number }interface myX3 extends myX2 {z?: number}function hander5(mytype: myX3) {console.log(mytype.x,mytype.y,mytype.z)}hander5({x:1,y:2,z:3}) 联合类型和交叉类型 联合类型 ts允许我们使用多种运算符，从现有类型中构建新类型联合类型由两个或多个类型组成的类型表示可以是这些类型中的任何一个值联合类型中的每一个类型被称为联合成员 // 联合类型function hander(name: number | string) {console.log(name)}hander(1)hander("123")//联合类型let nainfo: number | string = "abc"nainfo = 1nainfo = "123"//但联合类型要使用的时候,要注意类型缩小,类似// 联合类型function hander1(name: number | string) {console.log(name)if (typeof name === 'string') {console.log(name.length)}}hander1(1)hander1("123") 注意：在拿联合类型的值之后，因为它可能是任何一种类型，如何使用呢?类似拿到的是number，就不能使用string的一些方法解决：需要使用缩小集合，也就是类型缩小，根据缩小的代码，推断出更加具体的类型 交叉类型 交叉类型表示需要满足多个类型的条件交叉类型使用&符号 //交叉类型，两种或者多种类型同时满足type myY = number & string//想同时满足数值和字符串类型，不可能，估没有意义type myY2 = number & stringinterface myX2 {x: numbery: number}interface myX3 {z?: numberp: () => void}//表示即满足myX2也得满足myX3，否则里面会有报错提示const info: myX2 & myX3 = {x: 1,y:2,p:()=>{console.log("方法")}} 类型断言 有时候ts无法获取具体额度类型信息，这个时候需要使用类型断言ts只允许类型断言转换为更具体的或者不太具体的类型版本，此规则可防止不可能的强制转换 获取DOM元素

// <img class="img">。使用类型缩小使用，只知道会返回html类型，但不知道具体类型const imgE1 = document.querySelector("img")// imgE1.src = "",会报错if (imgE1 != null) {imgE1.src = ""}// <img class="img">。此时imgE2为element，不能直接使用,使用类型断言//当你确信他存在且为html时，直接使用类型断言为更具体的样子，const imgE2 = document.querySelector(".img") as HTMLImageElementimgE2.src = ""

类似，这样。类型断言成不太具体的样子 const num = 12const num2 =num as any 也可以继续，将不太具体的类型类型断言成更具体的样子但不支持这样来回断言，有安全隐患 const num = 12const num2 =num as anyconst num3 =num2 as string 非空类型断言 当传入的值有可能为undefined时，这个时候方法不能执行采用符号!，必须确保某个标识符是有值的，可以跳过ts在编译阶段对它的检测 interface hander{name:string,age:number,size?:number}const info: hander={name:"乞力马扎罗",age:18}//访问可以用可选的console.log(info?.size)//赋值的时候,可选链不行// info?.size=23// 解决方法：// 1，类型缩小if(info.size){info.size=23}// 2.非空类型断言,有点危险，确保非空值的父值一定有值，才能使用info!.size=23console.log(info.size)//23 字面量类型的使用 将赋予的值当做类型，使用的时候只能使用字面量默认情况下没有多大意义，但是可以将多个类型联合在一起，你只能是我们中一个

type numtype = "left" | "top" | "up"const num3: numtype = "left"// 使用背景// 一般请求方式，get或者post// 采用这种方式，可以让用户必须传get或者post，否则报错type requestype = "get" | "post"function reqest(url: string, method: requestype) {}reqest('http//xxx.com', 'get') 使用背景 // 使用背景// 一般请求方式，get或者post// 采用这种方式，可以让用户必须传get或者post，否则报错type requestype = "get" | "post"function reqest(url: string, method: requestype) {}const hander={url:'xxx',method:'post'}// reqest('http//xxx.com',hander.method)//报错，报错原因，不认识你这个hander.method获取的是string类型，不是get或者post 解决方法1 // 解决方法1:类型断言reqest('http//xxx.com',hander.method as "post") 解决方法2 // 解决方法2，直接让hander对象是个字面量类型const hander1 :{ url:string,method:'post'}={url:'xxx',method:'post'} as constreqest('http//xxx.com',hander1.method)// 或者，字面量推理const hander2={url:'xxx',method:'post'} as constreqest('http//xxx.com',hander2.method) 类型缩小（类型收窄） 可以通过类似下面的判断语句，来改变ts的执行路径 if(info.size){info.size=23} 类似这样的语句也称之为类型保护在给定的执行路径中，可以缩小比声明时更小的类型，这个过程称之为缩小常见的类型保护typeof，检查返回的类型 type requestype = "get" | "post"function reqest(url: string, method: requestype) {if(typeof url ==='string'){console.log(url)}} 平等缩小（=== 和！== 和==等等），字面量的判断 type requestype = "get" | "post"function reqest(url: string, method: requestype) {if(method==="get"){console.log(method)}} instanceof,表示是不是这个的实例 //传入一个实例function reqest(data:string|Date) {if(data instanceof Date){console.log(data.getTime())}} in ,用于确定对象是否具有带名称的属性，in 运算符等等… TypeScript 函数类型 函数类型表达式 可以编写函数类型的表达式，来表示函数类型ts中，函数类型中的形参名是不能省略的 // 函数类型表达式// 格式：(参数列表)=>返回值const fun: (num2: number) => number = (arg: number): number => {return 123}// 为了可阅读性,类型形参里的名不能省略type funtype = (num2: number) => number//这个就代表一个函数类型const fun2: funtype = (arg: number) => {return 123}// 例子，传入计算方式，计算两位数字,js写法function cals(func) {const num1 = 12const num2 = 13const res = func(num1, num2)}function func1(num1, num2) {return num1 + num2}cals(func1)//ts写法type calstype = (num1: number, num2: number) => numberfunction cals1(func: calstype) {const num1 = 12const num2 = 13const res = func(num1, num2)}function func2(num1: number, num2: number) {return num1 * num2}cals1(func2) 内部规则检测 // ts对于很多的类型的检测报不报错，取决于它的内部规则interface gule {name: stringage: number}//直接写报错，原因，第一次定义的时候，会检测规则报错// const info:gule={// name:"山头",// age:12,// size:'大'// }//但取决于内部规则，赋值完，再使用，这样就没检测，单指size的增加，其他已定义的还是会检测const p = {name: "山头",age: 12,size: '大'}const info: gule = p 函数的调用签名 在js中，函数除了可以被调用，自己也可以有属性值的类型表达式并不能支持声明属性当你想要一个带有属性的函数，就可以在一个对象类型中写一个调用签名 //函数表达式，这里是箭头//不能声明其他属性type obj2 = (num1: number) => number//调用签名interface obj {name: stringage: number//函数可以调用：函数调用签名，这里是冒号(num1: number): number}const func: obj = (num1: number): number => {return 123}func(123) 如何选择他们？ 如果只是描述函数类型本身（函数类型可以被调用），使用函数表达式如果再描述函数作为对象可以被调用，同时也有其他属性时，使用函数调用签名 参数的可选类型 可选参数必须放在必传参数的后面 // 可选参数类型是什么// 当不传的时候，y就是undefined类型，也就是number|undefined联合类型function fun(x:number,y?:number){console.log(x,y)if(y!=undefined){console.log(y)}}fun(1) 参数的默认值 // 函数的参数有默认值// 有默认值的情况下，参数的类型注解可以省略// 此时，有默认值的参数，哪怕是number，也可以接收一个undefined类型function fun(x:number,y=100){console.log(x,y)if(y!=undefined){console.log(y)}}fun(1) 剩余参数 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。利用剩余参数我们可以定义一个形参不固定的计算和的函数。 function sum (first, ...args) {console.log(first); // 10console.log(args); // [20, 30] }sum(10, 20, 30)；// 或者// 剩余参数，通过这种方式扩展了类型注解function fun(...arrs: (string| number)[]) {}fun(1,2,3,'4') 函数重载 ts中，可以去编写不同的重载函数，来表示函数可以以不同的方式进行调用一般是编写两个或者以上的重载签名。再去编写一个通用的函数以及实现 // 需求。将两个数字或者字符串相加// 联合类型，这个案例用不了// 普通实现// function add(n1, n2) {// return n1 + n2// }// add(1,2)通用函数不可调用//函数重载//1，先编写重载函数function add2(n1:number, n2:number):numberfunction add2(n1:string, n2:string):string//2，再编写通用的函数function add2(n1:any, n2:any) {return n1 + n2}console.log(add2(1,2))//3console.log(add2("1","2"))//12// add2("1",2)//函数 不能被调用，没有对应的重载函数 函数重载-联合类型（优先使用） 能用就用联合类型 //函数重载-联合类型//定义一个函数，可以传入字符串或者数组，获取他们的数组//1，编写重载函数-联合类型function add2(arg:string|any[]) {return arg.length}console.log(add2("123"))//3