【进阶】TS 中的 类型断言 和 泛型

最新推荐文章于 2024-09-12 15:35:18 发布
最新推荐文章于 2024-09-12 15:35:18 发布
阅读量1.4w 收藏 52
点赞数 8
分类专栏： 前端知识点进阶 文章标签： 开发语言 前端 typescript reactjs react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang_ziy/article/details/124120885
版权

类型断言

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

应用场景 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 User

console.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 res

function fn(obj:Stu) {
    // 这里写 obj. 就会有提示
    obj.skills
}

fn(res)

在这里插入图片描述

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

keyof

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

  • type 类型 = keyof 类型
    • 实例
      • type Point = { x: number; y: number }
      • type P = keyof Point
  • type 类型 = 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 中指使用变量保存要使用的类型

泛型本质

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

泛型函数

什么是泛型函数 ：

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

定义泛型函数 :

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…

疆子
关注
专栏目录
TS 进阶类型之联合类型、交叉类型、类型别名、 函数类型、对象类型、字面量类型、泛型、as断言
qq_37635012的博客
05-27 470
当 TS 不确定一个联合类型的变量到底是哪个类型的时候,可以定义多种类型，例如，一个变量既支持 number 类型，又支持 string 类型.对象的属性是可以有修饰符的，目前有两种修饰符，分别是 readonly 关键字对应的可选属性 和?联合类型 | 是指可以取几种类型中的任意一种，而交叉类型 & 是指把几种类型合并起来。类型是有父子关系的，子类型的值可以赋值给父类型，但是父类型的值是不能够赋值给子类型的.然后我们在每个属性前面加上了 readonly 这样所有的属性都是只读的了。
深入理解TS（3）—— TS类型断言
weixin_41387874的博客
03-20 4085
TS类型断言 类型断言的作用 类型断言用于实现覆盖编译器推断的类型。 也就是说，当我们使用了类型断言，那么就相当于告诉编译器，我们比它更了解这个变量应该是什么类型，编译器不应该再继续报错。 interface FooType{ a: string, b: number, } const Foo = {} as FooType Foo.a = 'a' Foo.b = 1 类型断言和类型转换的区别 类型断言不等同于类型转换 类型转换发生于运行时。 类型断言发生于编译时。 使用类型断.
TS类型断言
weixin_42560424的博客
04-26 6703
TypeScript中的类型断言是一种将变量或表达式的类型强制转换为开发者指定的类型的方式。可以使用尖括号（<>）语法或者as语法进行类型断言。使用as语法的类型断言：这里，我们将一个any类型的变量str断言为string类型，并使用它的length属性获取字符串的长度。
TS 常用类型
最新发布
小白小白从不日别的博客
09-12 1134
is 是类型谓词，它可以做到类型保护。
ts类型断言
yangyanqin2545的博客
11-23 5064
ts类型断言 类型断言可以手动指定一个值的类型 1、语法 值 as 类型 或者 <类型>值 2、类型断言的用途 （1）将一个联合类型推断为其中一个类型 （2）将一个父类断言为更加具体的子类 （3）将任何一个类型断言为any （4）将any断言为一个具体的类型 3、类型断言的限制 4、双重断言 5、类型断言和类型转换 6、类型断言和类型声明 7、类型断言和泛型 ...
Ts：类型断言，泛型
weixin_49021723的博客
09-05 1042
Ts：类型断言，泛型
【Typescript进阶】类型断言的用法和实际场景
qq_39307572的博客
03-17 348
在中，类型断言可以用来告诉编译器一个值的具体类型，从而在编译时获得更准确的类型检查。
ts入门笔记——ts类型声明和类型断言
进击的火山博客
09-28 8456
ts入门笔记——ts类型声明和类型断言 学习路径 1.学习ts声明变量类型 2.学习ts的类型断言（解释型类型转换） 3.学习ts的接口进一步详解 ts在线运行练习网站：https://www.tslang.cn/play/index.html 一、ts简介 1.什么是TypeScript(TS)？ TypeScript简称TS TS和JS之间的关系其实就是Less/Sass和CSS之间的关系 就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展 就像Less/Sass最终会转换成CS
Ts基于泛型`＜T＞`的进阶使用
chenweiqiang77的博客
07-18 5206
这里可以注意到我们不得不多次使用类型断言。假若我们一旦检查过类型，就能在之后的每个分支里清楚地知道pet的类型的话就好了。TypeScript里的类型保护机制让它成为了现实。类型保护就是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。要定义一个类型保护，我们只要简单地定义一个函数，它的返回值是一个类型谓词}在这个例子里，就是类型谓词。谓词为这种形式，必须是来自于当前函数签名里的一个参数名。每当使用一些变量调用isFish注意TypeScript不仅知道在if分支里pet是Fish。...
【TypeScript】TS自定义类型之对象属性必选、对象属性可选（十一）
热门推荐
编码世界
04-03 6万+
TS中实现对象属性必选、对象属性在开发过程中十分常见，前端在传参数时，有些参数比必传，有些是选传，我们可以定一个多个对象来实现传参，但是这让代码变得冗余。我们可以通过TS定义数据类型来实现。
TS：类型断言
小栗子的博客
01-05 1718
类型断言好比其他语言中的类型转换，但是不是真正的类型转换方式，之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。
TS之类型断言
冰雪为融的博客
05-10 9018
类型断言用于手动指定一个值的类型。 一、语法 值 as 类型 二、用途 2.1 将一个联合类型断言为其中一个类型 interface Cat { name:string; run():void; } interface Fish { name:string; swim():void; } function getName(animal:Cat|Fish):string{ return animal.name; } 只能访问联合属性中共有的属性和方法——
【TypeScript】007-类型断言
訾博（ZiBo）的博客
08-09 573
文章目录8、类型断言语法类型断言的用途将一个联合类型断言为其中一个类型将一个父类断言为更加具体的子类将任何一个类型断言为 `any`将 `any` 断言为一个具体的类型类型断言的限制双重断言类型断言 vs 类型转换类型断言 vs 类型声明类型断言 vs 泛型 8、类型断言 类型断言（Type Assertion）可以用来手动指定一个值的类型。 语法 值 as 类型 或 <类型>值 在 tsx 语法（React 的 jsx 语法的 ts 版）中必须使用前者，即 值 as 类型。 形如 &l
ts的类型断言
weixin_44283589的博客
12-27 511
toFixed(2)是JavaScript的Number对象的一个方法，用于将数字格式化为一个字符串，保留两位小数。总的来说，这些代码片段展示了如何使用类型断言来处理可能具有混合类型的变量，以及如何使用Number对象的toFixed方法来格式化数字为字符串。这是一些代码片段，主要涉及类型断言和JavaScript的Number对象的toFixed方法。as number是一个类型断言，它将test1的类型从可能的字符串或数字断言为数字。，然后进行类型断言，将test1的类型断言为数字。
3、TS中的类型断言
peijiajing的博客
05-10 354
【代码】3、TS中的类型断言。
ts 基础类型和泛型
09-19
在TS中，基础类型和泛型都是其重要的概念。 基础类型指的是TS中预定义的简单数据类型，例如：number、string、boolean、null、undefined等。基础类型用于表示变量或函数的数据类型，可以直接赋值给变量，也可以用作...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

疆子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值