3、TS中的类型断言

TS中的类型断言

声明类型的时候 如果没有标识类型 他是什么类型?

typescript 复制代码
//没有赋值的变量默认都是undefined 类型是any
let a: any = undefined
typescript 复制代码
//const是一个常量 不能被修改  他的类型是字面量类型 const声明变量必须赋值
//let 声明变量 可以修改  所以类型范围推倒的结果会变大
let b1 = 1
const b = 1

断言的问题

typescript 复制代码
let str0rNum: string | number //如果是联合类型在使用方法的时候 只能采用 公共的方法来使用
//还是从安全性考虑,在使用联合方法的时候,我们会通过先定义   再使用  保证安全

1、指定类型再使用

typescript 复制代码
 str0rNum = 'abc'
 str0rNum.endsWith('c')
 console.log(str0rNum)
 str0rNum = 1234
 str0rNum.toFixed(2)
 console.log(str0rNum)

2、我们断言类型后再使用 as断言成某种类型(一定是联合类型中的某一个)!(非空断言,表示这个值一定不是空的)

typescript 复制代码
//不存在结果 自己承担,ts不管了  你认为一定有值
 //(str0rNum! as string).charCodeAt(0)
 (<number>str0rNum!).toFixed(2)

!是TS语法 ?是JS语法 链判断运算符 (如果有值再去取值)

typescript 复制代码
//  let ele=document.getElementById('APP')! //非空断言

let ele = document.getElementById('app')
//  ?表示的是取值 不能赋值  !表示 某个变量一定存在   

if (ele) {
    //  ele?.style.background
    ele!.style.background = 'red';//非空断言
    (ele as HTMLElement).style.background = 'red';
}//断言成某种类型

值 as xxx或者值 一般用于联合类型 将大范围的类型断言成小类型

typescript 复制代码
(str0rNum! as unknown as boolean)//双重断言,一般不建议使用,但是还是会用到。会破坏原有的关系
typescript 复制代码
//?? js语法 合并空值运算符,三元表达式 但是 false||取的结果
let val = 0 || 100;//除了null和undefined之外的值都会被当做true
typescript 复制代码
// direction = 'up' ?? 'down' ?? 'left' ?? 'right';//?? 优先级高于||
type Direction = 'up' | 'down' | 'left' | 'right';//快速构建一个可以复用的类型
let direction: Direction;
let up: 'down' = direction! as 'down'

下面是完整代码,可自行运行

typescript 复制代码
//声明类型的时候 如果没有标识类型 他是什么类型?

//没有赋值的变量默认都是undefined 类型是any
let a: any = undefined

//const是一个常量 不能被修改  他的类型是字面量类型 const声明变量必须赋值
//let 声明变量 可以修改  所以类型范围推倒的结果会变大
let b1 = 1
const b = 1

//断言的问题
let str0rNum: string | number //如果是联合类型在使用方法的时候 只能采用 公共的方法来使用
//还是从安全性考虑,在使用联合方法的时候,我们会通过先定义   再使用  保证安全

// 1).指定类型再使用
// str0rNum = 'abc'
// str0rNum.endsWith('c')
// console.log(str0rNum)
// str0rNum = 1234
// str0rNum.toFixed(2)
// console.log(str0rNum)

//2).我们断言类型后再使用  as断言成某种类型(一定是联合类型中的某一个)!(非空断言,表示这个值一定不是空的)
//不存在结果 自己承担,ts不管了  你认为一定有值
// (str0rNum! as string).charCodeAt(0)

(<number>str0rNum!).toFixed(2)

//!是TS语法  ?是JS语法  链判断运算符 (如果有值再去取值)

//  let ele=document.getElementById('APP')! //非空断言

let ele = document.getElementById('app')
//  ?表示的是取值 不能赋值  !表示 某个变量一定存在   

if (ele) {
    //  ele?.style.background
    ele!.style.background = 'red';//非空断言
    (ele as HTMLElement).style.background = 'red';
}//断言成某种类型

//值 as xxx或者<xxx>值  一般用于联合类型 将大范围的类型断言成小类型
(str0rNum! as unknown as boolean)//双重断言,一般不建议使用,但是还是会用到。会破坏原有的关系


//?? js语法 合并空值运算符,三元表达式 但是 false||取的结果
let val = 0 || 100;//除了null和undefined之外的值都会被当做true


// direction = 'up' ?? 'down' ?? 'left' ?? 'right';//?? 优先级高于||
type Direction = 'up' | 'down' | 'left' | 'right';//快速构建一个可以复用的类型
let direction: Direction;
let up: 'down' = direction! as 'down'

export { }//解决ts文件报错问题  模块化的问题
相关推荐
小徐_23334 小时前
wot-ui-cli 1.1.0 发布:支持 OpenCode、Antigravity,wot-ui 图标迁移不再靠猜
前端
__zRainy__5 小时前
Node.js Web 框架选型指南:从 Express 到 Hono 的全景对比
前端·node.js·express·koa·nestjs·egg·fastify
西瓜有点饿5 小时前
PostCSS 和 UnoCSS 的作用和区别
前端·postcss
伟大的兔神5 小时前
我做了一个本地优先的 AI 图片工作台:Loomora v1.0.0 正式发布
前端·javascript·vue.js
90后的晨仔7 小时前
uni-app项目 Vue3 状态管理 Pinia 完全指南:从概念到实战的深度解析
前端
90后的晨仔7 小时前
uni-app 在 iOS 平台跳转页面时移除底部安全区域的完整技术指南
前端
用户938515635077 小时前
React + JWT 登录鉴权底层原理与工程化实践
前端·react.js
zww89491117 小时前
家政派单系统开发实战:架构设计与派单算法指南
前端·系统架构
fangzhanpeng1688 小时前
(前端)2.js变量作用域样例
开发语言·前端·javascript
赵广陆8 小时前
企业实战:web服务集成
前端·pycharm·fastapi