03 Typescript 类型推论和断言

1.类型推论

在TS中，某些没有明确指出类型的地方，TS的类型推论机制会帮助提供类型

发生在类型推论的常见场景
1.声明变量并初始化值时
2.函数设置默认参数值和决定函数返回值时

1. x赋值为3，x的类型是number,若改变类型会报错
let x = 3;
x='3'  会报错

2. 函数的参数设置了默认值
function add(num1: number, num2: number) {
    return num1 + num2;
}

2.类型断言

类型断言是用来覆盖编译器推断的类型，使用断言来告诉TS这个变量应该是什么类型。
由于类型断言会破坏编译器的类型推断，所以当我们使用类型断言时需要小心，编译的时候不报错，不代表运行的时候不报错。

2.1操作html元素时

<a id="ts" href="https://www.tslang.cn/docs/handbook/type-inference.html">类型推论</a>

getElementById 方法返回值的类型是HTMLElement,该类型只包含标签公共的属性和方法。不包含a标签特有的 href等属性，所以此时必须使用类型断言来指定类型

onMounted(() => {
	const ts=document.getElementById('ts') as HTMLAnchorElement;
	console.log('--->ts',ts.href)
})

html的具体类型获取方式
在谷歌浏览器中用审查元素选中元素后，在控制台查看 console.dir($0)
以下是p元素的类型

2.2为window添加属性时

因为window上并没有a属性，所以报错。此时，就需要将window断言为any：

(window as any)['a'] = "123";
console.log("--->a", (window as any)['a']);