【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 & 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 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 = 12const num2 = 13const 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 = 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):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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/70772.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring框架之AOP模块,附带通知类型-----详细介绍

一&#xff0c;AOP简介 是Spring框架中的一个重要模块&#xff0c;它提供了一种通过面向切面编程的方式来实现横切关注点的模块化的方法。AOP可以将应用程序的核心业务逻辑与横切关注点&#xff08;如日志记录、事务管理、安全性等&#xff09;分离开来&#xff0c;从而提高代码…

android Ndk Jni动态注册方式以及静态注册

目录 一.静态注册方式 二.动态注册方式 三.源代码 一.静态注册方式 1.项目名\app\src\main下新建一个jni目录 2.在jni目录下,再新建一个Android.mk文件 写入以下配置 LOCAL_PATH := $(call my-dir)//获取当前Android.mk所在目录 inclu

pytest运行时参数说明,pytest详解,pytest.ini详解

一、Pytest简介 1.pytest是一个非常成熟的全功能的Python测试框架&#xff0c;主要有一下几个特点&#xff1a; 简单灵活&#xff0c;容易上手&#xff0c;支持参数化 2.能够支持简单的单元测试和复杂的功能测试&#xff0c;还可以用来做selenium、appium等自动化测试&#xf…

CentOS系统环境搭建(五)——Centos7安装maven

centos系统环境搭建专栏&#x1f517;点击跳转 Centos7安装maven 下载压缩包 maven下载官网 解压 压缩包放置到/usr/local tar -xvf apache-maven-3.9.2-bin.tar.gz配置环境变量 vim /etc/profile在最下面追加 MAVEN_HOME/usr/local/apache-maven-3.9.2 export PATH${MAV…

Linux系统之wget命令的基本使用

Linux系统之wget命令的基本使用 一、wget命令介绍二、本次实践环境三、wget命令的使用帮助3.1 wget命令的基本语法3.2 wget选项解释 四、安装wget工具4.1 检查yum仓库状态4.2 安装wget工具 五、wget命令的基本使用5.1 直接下载文件5.2 下载时指定文件名5.3 后台下载文件5.4 限速…

Oracle外部表ORACLE_LOADER方式加载数据

当数据源为文本或其它csv文件时&#xff0c;oracle可通过使用外部表加载数据方式&#xff0c;不需要导入可直接查询文件内的数据。 1、如下有一个文件名为&#xff1a;test1.txt 的数据文件。数据文件内容为&#xff1a; 2、使用sys授权hr用户可读写 DATA_PUMP_DIR 目录权限&a…

修改文件内容

修改文件内容 按照下方所述&#xff0c;创建一个名为 /home/curtis/ansible/issue.yml 的 playbook &#xff1a; 该 playbook 将在所有清单主机上运行 该 playbook 会将 /etc/issue 的内容替换为下方所示的一行文本&#xff1a; 在 dev 主机组中的主机上&#xff0c;这行文本…

PG常用SQL

数据库 创建数据库 PostgreSQL 创建数据库可以用以下三种方式&#xff1a; 1、使用 CREATE DATABASE SQL 语句来创建。2、使用 createdb 命令来创建。3、使用 pgAdmin 工具。 CREATE DATABASE 创建数据库 CREATE DATABASE 命令需要在 PostgreSQL 命令窗口来执行&#xff0…

【校招VIP】前端vue考点之生命周期和双向绑定

考点介绍&#xff1a; VUE是前端校招面试的重点&#xff0c;而生命周期和双向绑定又是基础考点之一&#xff0c;尤其在一二线公司&#xff0c;要求知道双向绑定的原理&#xff0c;以及相关代码实现。 『前端vue考点之生命周期和双向绑定』相关题目及解析内容可点击文章末尾链接…

【C#】条码管理操作手册

前言&#xff1a;本文档为条码管理系统操作指南&#xff0c;介绍功能使用、参数配置、资源链接&#xff0c;以及异常的解决等。思维导图如下&#xff1a; 一、思维导图 二、功能操作–条码打印&#xff08;客户端&#xff09; 2.1 参数设置 功能介绍&#xff1a;二维码图片样…

【AI大模型】训练Al大模型 (上篇)

大模型超越AI 前言 洁洁的个人主页 我就问你有没有发挥&#xff01; 知行合一&#xff0c;志存高远。 目前所指的大模型&#xff0c;是“大规模深度学习模型”的简称&#xff0c;指具有大量参数和复杂结构的机器学习模型&#xff0c;可以处理大规模的数据和复杂的问题&#x…

【Apollo】赋能移动性:阿波罗自动驾驶系统的影响

前言 Apollo (阿波罗)是一个开放的、完整的、安全的平台&#xff0c;将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xff0c;快速搭建一套属于自己的自动驾驶系统。 开放能力、共享资源、加速创新、持续共赢是 Apollo 开放平台的口号。百度把自己所拥有的强大、…