【TypeScript】进阶之路语法细节，类型和函数

进阶之路

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

类型别名(type)的使用

为解决给联合类型的类型定义过长的问题
使用类型别名

// 使用关键字type定义类型别名对象,可以复用
type myname = number | string
function 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 = 1
nainfo = "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 & string

interface myX2 {
    x: number
    y: number
}
interface myX3 {
    z?: number
    p: () => 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 HTMLImageElement
imgE2.src = ""

在这里插入图片描述

类似，这样。类型断言成不太具体的样子

const num = 12
const num2 =num as any

也可以继续，将不太具体的类型类型断言成更具体的样子
但不支持这样来回断言，有安全隐患

const num = 12
const num2 =num as any
const 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=23
console.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 const
reqest('http//xxx.com',hander1.method)
// 或者，字面量推理
const  hander2={
    url:'xxx',
    method:'post'
} as const
reqest('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 = 12
   const num2 = 13
   const res = func(num1, num2)
}
function func1(num1, num2) {
   return num1 + num2
}
cals(func1)

//ts写法
type calstype = (num1: number, num2: number) => number
function cals1(func: calstype) {
   const num1 = 12
   const num2 = 13
   const res = func(num1, num2)
}
function func2(num1: number, num2: number) {
   return num1 * num2
}
cals1(func2)

内部规则检测

// ts对于很多的类型的检测报不报错，取决于它的内部规则
interface gule {
   name: string
   age: 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: string
   age: 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); // 10
    console.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):number
function add2(n1:string, n2:string):string

//2，再编写通用的函数
function add2(n1:any, n2:any) {
   return n1 + n2
}
console.log(add2(1,2))//3
console.log(add2("1","2"))//12

// add2("1",2)//函数 不能被调用，没有对应的重载函数

函数重载-联合类型（优先使用）

能用就用联合类型

//函数重载-联合类型
//定义一个函数，可以传入字符串或者数组，获取他们的数组
//1，编写重载函数-联合类型
function add2(arg:string|any[]) {
   return arg.length
}
console.log(add2("123"))//3

【TypeScript】进阶之路语法细节，类型和函数

进阶之路

类型别名(type)的使用

接口(interface)的声明的使用

二者区别：

联合类型和交叉类型

联合类型

交叉类型

类型断言

获取DOM元素

非空类型断言

字面量类型的使用

类型缩小（类型收窄）

TypeScript 函数类型

函数类型表达式

内部规则检测

函数的调用签名

如何选择他们？

参数的可选类型

参数的默认值

剩余参数

函数重载

函数重载-联合类型（优先使用）

相关文章