类型推断和类型断言

类型推断

1. 自动推断变量类型

const str = 'kingmusi'
// 等价
const str: string = 'kingmusi'

2. 自动推断函数的返回值

function sum (x: number, y: number) {
  	return x + y
}
// 自动推断返回值为 number

3. 定义时没有赋值，则会被推断为 any 类型

类型断言

有些时候，ts 不够智能，不能完美的确定类型，这个时候可以使用类型断言告诉 ts，我很确定实际类型的情况

const arrayNumber: number[] = [1, 2, 3, 4];
const greaterThan2: number = arrayNumber.find(num => num > 2); // 提示 ts(2322)

在 TypeScript 看来，greaterThan2 的类型既可能是数字，也可能是 undefined

我们可以很容易知道返回值必定有大于 2 的值存在，所以我们可以断言

const arrayNumber: number[] = [1, 2, 3, 4];
const greaterThan2: number = arrayNumber.find(num => num > 2) as number;

1. 断言的两种方式
   • 尖括号
   • as

// 尖括号 语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

// as 语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

尖括号格式会与 react 中 JSX 产生语法冲突，因此更推荐使用 as 语法

2. 非空断言
   • 使用后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型

let mayNullOrUndefinedOrString: null | undefined | string;
mayNullOrUndefinedOrString!.toString(); // ok
mayNullOrUndefinedOrString.toString(); // ts(2531)

3. 确定赋值断言
   • 允许在实例属性和变量声明后面放置一个 ! 号，告诉 ts 该属性会被明确地赋值

let x: number;
initialize();

// Variable 'x' is used before being assigned.(2454)
console.log(2 * x); // Error
function initialize() {
  x = 10;
}

通过 let x!: number; 确定赋值断言，TypeScript 编译器就会知道该属性会被明确地赋值

let x!: number;
initialize();
console.log(2 * x); // Ok

function initialize() {
  x = 10;
}