【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.mzph.cn/news/34364.shtml

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

相关文章

keil下载程序具体过程：概述

keil下载程序具体过程：概述

一、前言 keil下载程序具体过程将由一系列的博客组成&#xff0c;将深入探讨keil这种IDE下载镜像文件时具体做了哪些事情。我们平常下载镜像的时候&#xff0c;只是点击了一下Download按钮&#xff0c;剩下的都由keil替代我们完成了。本系列博客将揭示这一过程&#xff0c;keil…
阅读更多...
【云原生】kubernetes控制器deployment的使用

【云原生】kubernetes控制器deployment的使用

目录 ​编辑 1 Controller 控制器 1.1 什么是 Controller 1.2 常见的 Controller 控制器 1.3 Controller 如何管理 Pod 2 Deployment 2.1 创建 deployment 2.2 查看 deployment 2.3 扩缩 deployment 2.4 回滚 deployment 2.5 删除 deployment 1 Controller 控制器 …
阅读更多...
markdown命令模板

markdown命令模板

markdown快速入门(typora) 1、代码块 //代码块语 public static void main(String[] args){}//linux下spring项目的启动命令 # java -jar blog start ## 2、标题&#xff1a;java # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题3、字体 …
阅读更多...
Webpack 的 sass-loader 在生产模式下最小化 CSS 问题

Webpack 的 sass-loader 在生产模式下最小化 CSS 问题

学习webpack时候我发现一个问题&#xff1a; 将mode 改为production模式后&#xff0c;生成的css会被压缩了&#xff0c;但是我并没有引入CssMinimizerPlugin插件&#xff0c;然后我试着将optimization.minimize 设置为false&#xff0c;测试是否为webpack自带的压缩&#xff0…
阅读更多...
RWEQ风蚀方程模型与ArcGIS数据处理Python代码库添加结合理论研究和科研实践

RWEQ风蚀方程模型与ArcGIS数据处理Python代码库添加结合理论研究和科研实践

RWEQ模型是应用比较普遍的能适应大区域定量估算风蚀量的模型。该模型是基于大量野外实验的一种经验模型&#xff0c;在实际测定风力导致的土壤侵蚀量以及当地的气象、地表植被、土壤湿度、地表的结皮和地表的可蚀性等因子的基础上得出的一个经验方程。 1、掌握土壤风蚀模型的原…
阅读更多...
【计算机网络】——数据链路层

【计算机网络】——数据链路层

二、组帧 1、字符计数法 帧头部使用一个字符来表示帧的大小(包括第一个计数字符) &#xff08;此处一字符一个字节&#xff09; 2、字符填充收尾定界法 特定字符来定界帧的首和尾。若帧中数据段出现等同于特定字符的字符内容&#xff0c;前置一个转义字符。(类似于正则表达…
阅读更多...
PowerShell 获取某目录下所有的文件、文件夹，同时对获取到的文件路径字符串进行替换处理

PowerShell 获取某目录下所有的文件、文件夹，同时对获取到的文件路径字符串进行替换处理

PowerShell 获取某目录下所有的文件、文件夹&#xff0c;同时对获取到的文件路径字符串进行替换处理 前言&#xff1a; 为了将Windows系统下的Java编译文件与linux服务器上的文件进行比较&#xff0c;故进行此文件路径的获取及路径处理。 在只有文件路径 而没有实际文件的情况下…
阅读更多...
Postman 的简单使用

Postman 的简单使用

什么是Postman 在程序开发中用于调试网络程序或者跟踪网页请求。可以对网页进行简单的基本信息调试。Postman最早是作用chrome浏览器插件存在的&#xff0c;但是2018年初Chrome停止对Chrome应用程序的支持。所以现在Postman提供了独立的安装包&#xff0c;不再依赖于Chrome浏览…
阅读更多...
flutter 初识（开发体验，优缺点）

flutter 初识（开发体验，优缺点）

前言 最近有个跨平台桌面应用的需求&#xff0c;需要支持 windows/linux/mac 系统&#xff0c;要做个更新应用的小界面&#xff0c;主要功能就是下载更新文件并在本地进行替换&#xff0c;很简单的小功能。 花了几分钟构建没做 UI 优化的示例界面&#xff1a; 由于我们的客…
阅读更多...
WuThreat身份安全云-TVD每日漏洞情报-2023-08-09

WuThreat身份安全云-TVD每日漏洞情报-2023-08-09

漏洞名称:致远OA文件上传漏洞 漏洞级别:高危 漏洞编号:NULL 相关涉及:1. A6、A8、A8N的V8.0SP2、V8.1、V8.1SP1 漏洞状态:POC 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-19494 漏洞名称:Microsoft Exchange Server 欺骗漏洞 漏洞级别:高危 漏洞编号:CV…
阅读更多...
代码随想录训练营day18 二叉树

代码随想录训练营day18 二叉树

106. 从中序与后序遍历序列构造二叉树 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 //左根右 左右根/* 第一步&#xff1a;如果数组大小为零的…
阅读更多...
Redis—缓存

Redis—缓存

目录标题 缓存雪崩发生场景解决方案针对Redis宕机的缓存雪崩解决方案 缓存击穿发生场景解决方案 缓存穿透发生场景解决方案布隆过滤器 数据库和缓存数据一致性 缓存雪崩 大量缓存数据在同一时间过期&#xff08;失效&#xff09;或者 Redis 故障宕机时&#xff0c;如果此时有大…
阅读更多...
腾讯云香港服务器租用_2核2G20M_2核4G30M

腾讯云香港服务器租用_2核2G20M_2核4G30M

腾讯云香港服务器租用费用表&#xff0c;目前中国香港地域轻量应用服务器可选配置2核2G20M、2核2G30M、2核4G30M&#xff0c;操作系统可选Windows和Linux&#xff0c;不只是香港云服务器&#xff0c;新加坡、硅谷、法兰克福和东京服务器均有活动&#xff0c;腾讯云服务器网分享…
阅读更多...
项目一：基于stm32的阿里云智慧消防监控系统

项目一：基于stm32的阿里云智慧消防监控系统

若该文为原创文章&#xff0c;转载请注明原文出处。 Hi&#xff0c;大家好&#xff0c;我是忆枫&#xff0c;今天向大家介绍一个单片机项目。 一、简介 智慧消防监控系统&#xff0c;是用于检测火灾&#xff0c;温度&#xff0c;烟雾的监控系统。以 stm32单片机为核心外加 MQ…
阅读更多...
ApiPost的使用

ApiPost的使用

1. 设计接口 请求参数的介绍 Query:相当于get请求&#xff0c;写的参数在地址栏中可以看到 Body: 相当于 post请求&#xff0c;请求参数不在地址栏中显示。 请求表单类型&#xff0c;用form-data json文件类型&#xff0c;用row 2. 预期响应期望 设置完每一项点一下生成响应…
阅读更多...
threejs入门使用

threejs入门使用

场景&#xff08;Scene&#xff09; import * as THREE from "three";const scene new THREE.Scene(); 相机&#xff08;Camera&#xff09; const camera new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000, );// 3、设计相机的…
阅读更多...
MySql011——检索数据：过滤数据（使用正则表达式）

MySql011——检索数据：过滤数据（使用正则表达式）

前提&#xff1a;使用《MySql006——检索数据&#xff1a;基础select语句》中创建的products表 一、正则表达式介绍 关于正则表达式的介绍大家可以看我的这一篇博客《Java038——正则表达式》&#xff0c;这里就不再累赘。 二、使用MySQL正则表达式 2.1、基本字符匹配 检索…
阅读更多...
阿里云账号注册流程_多种注册方法_图文详解

阿里云账号注册流程_多种注册方法_图文详解

阿里云账号怎么注册&#xff1f;阿里云账号支持手机号注册、阿里云APP注册、支付宝和钉钉多种注册方式&#xff0c;账号注册后需要通过实名认证才可以购买或使用云产品&#xff0c;阿里云百科来详细说下不同途径注册阿里云账号图文流程&#xff1a; 目录 阿里云账号注册流程 …
阅读更多...
一文全览：企业上云的难点、方向、策略、架构和实践步骤

一文全览：企业上云的难点、方向、策略、架构和实践步骤

1 概述 2018年8月&#xff0c;工业和信息化部印发《推动企业上云实施指南&#xff08;2018-2020年&#xff09;》&#xff0c;提出到2020年行业企业上云意识和积极性明显提高&#xff0c;上云比例和应用深度显著提升&#xff0c;云计算在企业生产、经营、管理中的应用广泛普及&…
阅读更多...
微服务02-docker

微服务02-docker

1、Docker架构 1.1 镜像和容器 Docker中有几个重要的概念： 镜像（Image）：Docker将应用程序及其所需的依赖、函数库、环境、配置等文件打包在一起，称为镜像。Docker镜像是用于创建 Docker 容器的模板 。就像面向对象编程中的类。 容器（Container）：镜像中的应用程序运…
阅读更多...
最新文章

Copyright @ 2022~2023