位置: IT常识 - 正文

【进阶】TS 中的 类型断言 和 泛型(ts入门教程)

编辑:rootadmin
【进阶】TS 中的 类型断言 和 泛型 类型断言

推荐整理分享【进阶】TS 中的 类型断言 和 泛型(ts入门教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:ts中的keyof,ts中的enum,ts入门教程,ts中的?,ts中的keyof,ts技术,ts中的?,ts中的typeof,内容如对您有帮助,希望把文章链接给更多的朋友!

作用 : 手动指定值的具体类型 ( 缩写值的范围 )

应用场景 1

获取 DOM 元素的时候指定具体元素

示例 :

const box = document.getElementById('img')console.log(box.src) // ts报错

错误内容 :

解析 : 上述语法在 js 中可以直接使用, 但是 TS 中就不行啦, 由于类型不明确会报错

返回值的类型是 HTMLElement,只有标签公共的属性,不包含 img 的 src 属性

解决方法 : 使用类型断言明确具体类型

语法 : let 变量 = 值 as 类型

as 关键字实现类型断言关键字 as 后面的类型是一个具体的类型

实例 :

const box = document.getElementById('img') as HTMLImageElement指定了具体类型后 , 就可以使用 box.src 了

技巧: 获取 DOM 元素类型的方法

在浏览器控制台,通过 __proto__ 获取 DOM 元素的类型;document.createElement('a'),然后看代码提示、

应用场景 2

知道获取数据的类型, 但是不知道具体的数据时 , 使用类型断言后就会有提示

type User = { name: string, age: number}const u1 = {} as Userconsole.log(u1.name) // 这里就会有提示非空断言

作用 : 明确地知道对象的属性一定不会为空,可以使用非空断言 !

应用场景 : TS 中 使用 useRef()

JS 中的语法直接使用会报错

错误解析 :

useRef 类型说明 : useRef的泛型参数用于指定current属性的值的类型

传入参数 null 时 , current属性的值类型也被指定为 null

解决方法 :

指定 useRef的泛型参数类型为 HTMLInputElement (已知类型)使用非空断言! 指定current属性的值不为空function App() { const inputRef = useRef<HTMLInputElement>(null) return ( <div className="App"> <input type="text" ref={inputRef} /> <button onClick={() => { console.log(inputRef.current!.value) }}>点击</button> </div>)}typeof

TS 中的 typeof 操作符 和 js 中的一样都是用来获取变量或属性类型

使用方法 :

获取类型 : type 变量 = typeof 常量

使用 : function(参数:变量){参数.常量的方法}

应用场景

获取到一个复杂的对象,我们把它当做实参传给一个函数fn,但是没有办法在使用形参时获取提示信息

typeof 解决

const res = { name: '小花', city: '武汉', skills: ['js', 'css'] }type Stu = typeof resfunction fn(obj:Stu) { // 这里写 obj. 就会有提示 obj.skills}fn(res)

注意 : typeof 只能用来查询变量或属性的类型,无法查询其他形式的类型(比如,函数调用的类型)

keyof

获取对象类型的属性名 , 得到新的类型

type 类型 = keyof 类型

实例type Point = { x: number; y: number }type P = keyof Pointtype 类型 = keyof 对象常量

type T = keyof {a:1,b:2}

使用方法

获取类型的属性名 :

type T = keyof {a:1,b:2}== type T = 'a'|'b'

使用 : let 变量:T = 'a'

变量的取值只能是 ‘a’或者’b’ 泛型

什么是泛型

顾名思义就是多个类型 , TS 中指使用变量保存要使用的类型

【进阶】TS 中的 类型断言 和 泛型(ts入门教程)

泛型本质

泛型本质是参数化类型 , 就是所操作的数据类型被指定为一个参数,这种参数类型可以用在类、接口和函数的创建中,分别成为泛型类,泛型接口、泛型函数

泛型函数

什么是泛型函数 :

这个函数的参数类型或者返回值的类型是可变的

定义泛型函数 :

function 函数名<类型参数> (形参:类型参数):类型参数{}

在函数名称的后面写 <>(尖括号),尖括号中添加类型变量类型变量相当于一个类型容器,能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)

使用泛型函数

方法1: const 返回值 = 函数名(实参) 类型推论实参的类型,传递给类型参数方法2 : const 返回值= 函数名<类型实参>(实参) 上述的非空断言就使用了此种方法此时的 <> 中的就是具体的类型

示例

// 泛型函数 function useState<T>(val: T | (() => T)): [T | (() => T), (newvalue: T) => void]{ return [val,(newvalue)=>{val=newvalue}] } const [str,setStr] = useState('1') const [num,setNum] = useState<number>(1) const [fn, setFn] = useState<number>(() => 1)泛型推论

泛型推论就是, 利用类型推论简化函数调用

在调用泛型函数时,可以省略 <类型> 来简化泛型函数的调用此时,TS 内部采用一种类型参数推断的机制,来根据传入的实参自动推断出类型变量 Type 泛型对象

应用场景 :

函数中传入对象和该对象的属性,要求得到给对象的值

// 泛型对象 function getProp<T, K extends keyof T>(arr: T, key: K) { return arr[key] } let obj ={name:'ikun',age:18,hobby:'学习'} getProp(obj,'hobby')

解析 :

上述约定后, 后续调用时会有提示

泛型的问题

太灵活了

默认情况下,泛型函数的类型变量 可以代表多个类型,这导致在泛型函数内部无法访问任何属性function fn<T>(value: T): T { // 这里value. 不会有提示 console.log(value.length)// 这里会报错 return value}fn('a')

解决泛型太灵活的方法

为泛型添加约束来收缩类型(缩窄类型取值范围)

泛型约束

泛型约束主要有以下两种方式:

指定更加具体的类型添加约束

指定更加具体的类型

指定更具体的类型缩小范围

function fn<T>(value: T[]): T[] { console.log(value.length) // 这里就可以获得提示 return value}

T[] 数组一定会有length属性

添加约束(推荐使用)

对已有类型做继承,已有类型中指定了 length属性

interface ILength { length: number } function fn1<T extends ILength>(value: T): T { // 这里value. 不会有提示 console.log(value.length) return value }泛型接口

在接口中使用泛型来使用,以增加其灵活性,增强其复用性

语法 :

interface 接口名<类型变量1,类型变量2...> { 属性名1:类型1, 属性名2:类型2, 属性名3:类型3}

注意 :

在接口名称的后面添加 <类型变量>,那么,这个接口就变成了泛型接口。接口的类型变量,对接口中所有其他成员可见,也就是接口中所有成员都可以使用类型变量。使用泛型接口时,需要显式指定具体的类型

实例:

interface MyArray { length: number, push(n: number):void, pop():number, reverse():number[]}let obj: MyArray = { id(value) { return value }, ids() { return [1, 3, 5] }}

数组在ts中就是一个泛型接口

泛型工具类型Partial

把已有的类型属性,变成一个新类型的可选属性

语法 : type 新类型 = partial<老类型>

Readonly

把已有类型全部转换为只读类型

语法和上述一直

定义对象使其内在属性不能修改

Pick

从已有类型中选一些属性来构造新的类型

语法 : type 新类型 = partial<老类型,属性|属性2>

详见代码

代码地址: github.com/jiang-zi/TS…

本文链接地址:https://www.jiuchutong.com/zhishi/299164.html 转载请保留说明!

上一篇:户外电源强制国标发布或加速行业洗牌 未来产品将往大容量及轻量化发展(户外电源需要要充电吗)

下一篇:2023前端面试题第二弹(真实,一般人我还不给看)(2023前端面试题目)

  • iPhone 12后置像素多少(iphone 12后置摄像头像素)

    iPhone 12后置像素多少(iphone 12后置摄像头像素)

  • 手机上怎么把多张照片拼成一张(手机上怎么把多个文档合并成一个)

    手机上怎么把多张照片拼成一张(手机上怎么把多个文档合并成一个)

  • 骆驼1s和2s有什么区别(骆驼1s55d23)

    骆驼1s和2s有什么区别(骆驼1s55d23)

  • 打QQ电话手机老有电流声(手机打qq电话自动挂断怎么回事)

    打QQ电话手机老有电流声(手机打qq电话自动挂断怎么回事)

  • 天猫618促销多少天(天猫618促销多少金额)

    天猫618促销多少天(天猫618促销多少金额)

  • 快手怎么发图片集(怎么在快手发送图片)

    快手怎么发图片集(怎么在快手发送图片)

  • oppo手机闹钟偶尔不响(oppo手机闹钟界面)

    oppo手机闹钟偶尔不响(oppo手机闹钟界面)

  • 苹果手机充电后黑屏无法开机怎么办(苹果手机充电后黑屏了,怎么样能打开)

    苹果手机充电后黑屏无法开机怎么办(苹果手机充电后黑屏了,怎么样能打开)

  • 快手号注销了手机号会解绑吗(快手号注销了手机绑定会不会解绑)

    快手号注销了手机号会解绑吗(快手号注销了手机绑定会不会解绑)

  • bd和hd的区别是什么意思(hd与bd区别是什么)

    bd和hd的区别是什么意思(hd与bd区别是什么)

  • 入网许可证可以撕掉吗(入网许可证可以派生么)

    入网许可证可以撕掉吗(入网许可证可以派生么)

  • 乐视手机怎么删除自带软件(乐视手机怎么删除)

    乐视手机怎么删除自带软件(乐视手机怎么删除)

  • oppo手机咋关机(vivo手机怎么开机)

    oppo手机咋关机(vivo手机怎么开机)

  • 电脑上的页面布局在哪里(电脑上的页面布局怎么调)

    电脑上的页面布局在哪里(电脑上的页面布局怎么调)

  • 手机突然变卡怎么回事(手机突然变卡怎么办)

    手机突然变卡怎么回事(手机突然变卡怎么办)

  • 小米8怎么看双频定位(小米怎么看双系统)

    小米8怎么看双频定位(小米怎么看双系统)

  • 小米cc9支不支持内存卡(小米cc9支不支持无线充电)

    小米cc9支不支持内存卡(小米cc9支不支持无线充电)

  • jit准时化三大基本原则(准时化的定义)

    jit准时化三大基本原则(准时化的定义)

  • 个人可以在亚马逊开店(个人可以在亚马逊卖苹果手机吗)

    个人可以在亚马逊开店(个人可以在亚马逊卖苹果手机吗)

  • mt132ch/a是苹果什么型号(mt132ch/a和mt122ch/a区别)

    mt132ch/a是苹果什么型号(mt132ch/a和mt122ch/a区别)

  • vivoy93的虚拟按键怎么设置(vivox9虚拟按键)

    vivoy93的虚拟按键怎么设置(vivox9虚拟按键)

  • 腾讯视频如何缓存导出mp4(腾讯视频如何缓存弹幕)

    腾讯视频如何缓存导出mp4(腾讯视频如何缓存弹幕)

  • 抖音怎么收藏音乐(抖音怎么收藏音频文件)

    抖音怎么收藏音乐(抖音怎么收藏音频文件)

  • vue3使用百度地图(详)(vue 百度地图 移动端)

    vue3使用百度地图(详)(vue 百度地图 移动端)

  • 织梦新站上线前站长必看的百度SEO网站优化教程【防黑防挂马】(织梦建站详细步骤)

    织梦新站上线前站长必看的百度SEO网站优化教程【防黑防挂马】(织梦建站详细步骤)

  • 高新技术企业加计抵减
  • 生产成本月末有余额怎么结账
  • 捐赠支出增值税
  • 售后回租利息可以抵税吗
  • 自产自销的苗木怎么做账
  • 增值税专用发票和普通发票的区别
  • 企业的主管部门承担什么责任
  • 以前年度损益调整结转到未分配利润
  • 不能抵扣的普通发票
  • 未及时支付工资时间界限
  • 资产负债表应交税费从哪取数
  • 退休人员是否还继续享受社保
  • 海关进口增值税怎么认证抵扣
  • 普通发票负数发票可以作废吗
  • 2017年7月1日开始实施的税法新规
  • 到期一次还本付息债券
  • 劳保用品计入福利费嘛
  • 发票上折扣怎么记账
  • 个人独资企业生活费用和经营费用混在一起的
  • 出口佣金支付
  • 企业工资和社保缴费基数
  • 固定资产抵扣的税率
  • 固定资产审计目标
  • 机票进项税额怎么申报
  • 公积金发放怎么自动转入银行卡
  • iphone怎么格式化掉所有内容和设置
  • 事业基金的主要账务处理
  • touch id反应慢
  • 品牌转让怎么写
  • 财务里计提是什么意思
  • 对公账户转库存现金对方科目怎么填
  • Win11 Build 22000.282正式版推送: 附更新修复内容汇总
  • 印花税和所得税需要计提吗
  • 解决胃胀气最快方法
  • 涉税服务实务重点总结
  • 合伙企业利润分配原则
  • php curl_exec
  • yolo v1 pytorch源代码
  • php读取php文件内容
  • 微信小程序在哪里找?
  • umount命令详解
  • 外埠存款通过哪个会计账户核算?
  • 发行债券支付的费用要减吗
  • 应收账款周转天数减少说明什么
  • node运行vue项目
  • linux mysql忘记密码的多种解决或Access denied for user 'root'@'localhost'
  • 应付职工薪酬账户的明细账户有
  • 在建工程什么情况下算竣工
  • 企业管理费用科目期末一般是
  • 一般纳税人直接不管会怎么样
  • 契税和印花税的会计分录
  • 没有购销合同的销售额交印花税吗
  • 工会经费教育经费计提比例
  • 收到客户账款会计分录
  • 我国税收税类中的流转税
  • 长期待摊费用的二级科目有哪些
  • 公司多出来的钱怎么办
  • 存货类明细分类账一般采用
  • 开具红字增值税专用发票信息表需要盖章吗
  • 持有至到期投资是债权投资吗
  • 销户还能申请抚养费吗?
  • windows8.1开机
  • 更新版本
  • unix操作指令
  • win7系统怎么设置微信多开
  • 打开win七
  • win10系统电脑开机密码在哪里设置
  • linux安装yum命令步骤
  • win8免密码登录
  • Intermediate Unity 3D for iOS: Part 1/3
  • 如何用法向量求点到线的距离
  • js前端导出word
  • 关于超链接下列说法中错误的是
  • jquery search
  • 潍坊昌邑售房信息
  • 江苏增值税电子专用发票可以抵扣吗
  • 非正常户纳税人解除
  • 重庆国税电子税务局手机版
  • 进境邮件补充申请
  • 出口退税额与出口退税收入
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设