TypeScript 如何进行类型转换 |
您所在的位置:网站首页 › ps怎么转换为16位 › TypeScript 如何进行类型转换 |
小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。 今天,我们来学习TypeScript中的类型转换,我们可以把变量从一种类型转换为其它的类型。 在JavaScript没有类型转换的概念,因为JavaScript本身就是动态类型的,我们随时都可以赋给变量的不同类型的值。然而在TypeScript中每个变量都有一个类型,通过类型转换我们可以把变量从一种类型转换为另一种类型。 在TypeScript中,我们通过使用as关键字或者运算符来进行类型的转换。 使用as关键字类型转换假设我们有一个HTML,上面有一个input元素 复制代码接着我们使用 querySelector() 函数来获取这个input元素,然后打印input元素的value值 let input = document.querySelector('input[type=text]'); console.log(input.value); 复制代码如果你在编辑器中的TS文件写下代码代码就会发现下面错误 错误的信息为 它告诉我们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); 复制代码修改后,错误消失了 可以看到,当鼠标停留在value值上的时候,弹出HTMLInputElement的value值为string类型。 也可以采用另一种写法 let text = (input as HTMLInputElement).value; 复制代码这里我们要理解HTMLInputElement继承于HTMLElement,而HTMLElement继承于Element 所以当我们把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 = document.querySelector('input[type=text]'); console.log(input.value); 复制代码总结,使用 运算符转换的语法 let a: typeA; let b = a; 复制代码 总结今天我们学习了在TypeScript通过类型转换将变量从一种类型转换为另一种类型,我们使用as 关键字或 运算符来进行类型转换。 如果本文有帮助,微信搜索【小帅的编程笔记】,每天一个小知识 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |