本文正在参加「金石计划 . 分割6万现金大奖」
一、类型推论
类型推论,望文生义便是指类型在哪里怎么被揣度。在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