IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> TypeScript 如何进行类型转换 -> 正文阅读

[JavaScript知识库]TypeScript 如何进行类型转换

今天,我们来学习TypeScript中的类型转换,我们可以把变量从一种类型转换为其它的类型。

在JavaScript没有类型转换的概念,因为JavaScript本身就是动态类型的,我们随时都可以赋给变量的不同类型的值。然而在TypeScript中每个变量都有一个类型,通过类型转换我们可以把变量从一种类型转换为另一种类型。

在TypeScript中,我们通过使用as关键字或者<>运算符来进行类型的转换。

使用as关键字类型转换

假设我们有一个HTML,上面有一个input元素

<input type="text" value="hello">

接着我们使用 querySelector() 函数来获取这个input元素,然后打印input元素的value值

let input = document.querySelector('input[type=text]');

console.log(input.value);

如果你在编辑器中的TS文件写下代码代码就会发现下面错误

image-20211015202846552

错误的信息为

image-20211015202905657

它告诉我们Element类型的变量并没有value这个属性,之所以报错是因为document.querySelector()方法返回的类型是Element类型。

Element却没有value属性,这就很尴尬了,怎么办呢? 答:转换类型

我们知道获取的元素是一个input元素,所以它的正确的类型为HTMLInputElement,我们可以通过as关键字将Element类型转换成HTMLInputElement类型。

let input = document.querySelector('input[type=text]') as HTMLInputElement;

console.log(input.value);

修改后,错误消失了

image-20211015203627982

可以看到,当鼠标停留在value值上的时候,弹出HTMLInputElement的value值为string类型。

image-20211015203711266

也可以采用另一种写法

let text = (input as HTMLInputElement).value;

这里我们要理解HTMLInputElement继承于HTMLElement,而HTMLElement继承于Element

image-20211015204146284

image-20211015204204610

所以当我们把HTMLElement类型转换为HTMLInputElement时,这种转换称之为向下转换。例如

let el: HTMLElement;
el = new HTMLInputElement();

el 变量具有 HTMLElement 类型,我们可以给它赋一个HTMLInputElement 类型的实例,因为HTMLInputElement 类型是 HTMLElement 类型的一个子类。

总结,使用as转换类型语法为

let a: typeA;
let b = a as typeB;

使用<>运算符进行类型转换

除了使用as 关键字,我们也可以使用<> 运算符来进行类型转换,例如

let input = <HTMLInputElement>document.querySelector('input[type=text]');

console.log(input.value);

总结,使用<> 运算符转换的语法

let a: typeA;
let b = <typeB>a;

总结

今天我们学习了在TypeScript通过类型转换将变量从一种类型转换为另一种类型,我们使用as 关键字或 <> 运算符来进行类型转换。

如果本文有帮助,微信搜索【小帅的编程笔记】,每天一个小知识

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-16 19:33:27  更:2021-10-16 19:34:22 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 18:31:22-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码