TypeScript类型推论与类型断言实例详解
一、类型推论
类型推论，顾名思义就是指类型在哪里如何被推断。在TS语法中，如果有些没地方有明确指出类型，类型推论就会帮助提供类型，即声明变量时，不赋给类型，就会触发类型推论。
1、最佳通用类型
最佳通用类型就是指，在一个或者多个表达式中，变量的类型会从这些表达式中的所有类型来推断出一个最合适的通用类型。
举个例子：
let brand = 'YSL' brand = 123
当定义一个变量brand，变量brand的类型被推断为字符串，但是后来修改值为另外一种类型，如number，boolean等，TS就会很贴心的提示不能将其他类型分配给字符串。然而这只是从单个表达式里面推断，如果是多个表达式呢？又会如何推断呢？例如：
let money = [1, 'yuan', null]
money = [123]
money = ['hello']
money = [null]
money = [{ name: 'ducky' }]//错误提示可见，当需要从几个表达式中推断类型时候，会使用这些表达式的类型来推断出一个最合适的通用类型---称为最佳通用类型。当有多个表达式时，为了推断money的类型，必须要考虑所有元素的类型。 这里有三种选择： number，string和null。 计算通用类型算法会考虑所有的候选类型，并给出一个兼容所有候选类型的类型。那如果想要的类型不在候选名单上，又该如何推论呢？例如：
function Animal() {
console.log('animal');
}
function Food() {
console.log('food');
}
function Fruit() {
console.log('fruit');
}
let target= [new Animal(), new Food(), new Fruit()]如果想让terget的类型被推断为People[]类型，但是数组里的候选类型有三种，没有People[]类型，这肯定是不能推断出结果的。那怎么办呢？这种情况下，当候选类型不能使用的时候，我们必须明确地指出类型：
let target:People[]= [new Animal(), new Food(), new Fruit()]
此时，如果没有找到最佳通用类型的话，target会被推断为联合数组类型：(Animal|Food|Fruit)[]
2、上下文类型
上下文类型取决于表达式的类型和其所处的位置，例如：
window.onclick = function(e) {
console.log(e); //报错提示
};会出现这样的报错提示：[ts] Parameter :'e' implicitly has an 'any' type， but a better type may be inferred from usage.，TS类型检查器使用window.onclick函数的类型来推断右边函数表达式的类型，从而推出e参数的类型，如果函数表达式不是在上下文类型的位置，则参数e具有any类型。我们知道，any表示任意类型， 可以被任何类型分配，也可以分配给任何类型;任意类型，是所有类型的子类型，当被赋予any类型的时候，就意味着跟JS运行一样了。那这里怎么改呢？既然已经提示了e具有any类型，那就明确e的类型为any就好了。一旦这个函数表达式有了明确的参数类型注解，上下文类型就会被忽略。
二、类型断言
类型断言是指：当不确定一个联合类型的变量到底是哪种类型的时候，我们只能访问这个联合类型的所有类型里共有的属性或者方法，但是有的时候就是需要在还不确定类型的情况下就访问其中一个类型的属性和方法。类型断言可以用来手动指定一个值的类型。
类型断言不是类型转换，断言成一个联合类型中不存在的类型毫无疑问是不被允许的。
语法：<类型>值或者值 as 类型。
举个例子：
function getFullName(fullname: string | number): number {
if (fullname.length) {
return fullname.length;
} else {
return fullname.toString().length;
}
}
getFullName('hhhhhhhhh')如上代码，看上去逻辑好像一点问题也没有，但是就是会给你报错Property 'length' does not exist on type 'string | number' 。这个时候，肯定不是换成JS来写，而是通过类型断言来让代码顺利执行，改造如下：
function getFullName(fullname: string | number): number {
// if ((<string>fullname).length) {
if (fullname as string) {
return (<string>fullname).length
} else {
return fullname.toString().length
}
}
getFullName('hhhhhhhhh')那么理解下面的代码，对你来说肯定就是小菜一碟啦~：
let greet: any = 'hello'
let greetLength1: number = (<string>greet).length
let greetLength2: number = (<string>greet).length
console.log(greetLength1);//5
console.log(greetLength2);//5
interface Ob1 {
name: string,
}
interface Ob2 {
name: number,
}
let myOb: Ob1 | Ob1 = {
name: '123'
}
let obLength: number = (<string>myOb.name).length
console.log(obLength);//3附：类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
} else {
return n();
}
}总结
到此这篇关于TypeScript类型推论与类型断言的文章就介绍到这了,更多相关TS类型推论与类型断言内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS截取字符串的方法,结合实例形式较为详细的分析了JavaScript截取字符串的常用函数与具体使用技巧,并附带说明了JS截取字符串substr和substring方法的区别,需要的朋友可以参考下2015-11-11
本篇文章主要介绍了webpack external模块的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
不得不用到iframe，且被强烈要求不能让它出现滚动条！嵌入的页面肯定是高度不一的，页面中也不能出现大片空白，所以也不能写死高度！真是麻鬼烦啊！2009-10-10
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
这篇文章主要是对JavaScript1.6数组新特性以及JQuery的几个工具方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
FireFox的getYear的注意事项...2007-04-04
在写微信小程序时，有写到实现3D轮播图的效果，可以直接使用微信小程序中自带的组件swiper来实现。下面通过实例代码给大家介绍微信小程序轮播图的实现方法，感兴趣的朋友一起看看吧2018-08-08
javascript 设为首页与加入收藏兼容多浏览器代码,不过由于ie7的特殊性，设为首页不能使用，不过其它基于ie内核的浏览器都是支持的。2011-01-01
这篇文章主要介绍了js实现简洁的滑动门菜单(选项卡)效果代码,涉及javascript鼠标事件操作页面元素样式切换的实现技巧,简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了JavaScript类型系统之布尔Boolean类型详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
JavaScript Reflect Metadata实现详解
这篇文章主要介绍了JavaScript Reflect Metadata实现详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最新评论