类型注解和类型推断
TS开发准则：只要是变量或者对象属性，都应该有一个明确的类型
// bad
const user: any = 'tz'
user.toUpperCase()
// good
const user: string = 'tz'
user.toUpperCase()
类型注解
人工的告诉TS，变量或者对象属性的类型
// 显示地声明user的类型为string
const user: string = 'tz'
类型推断
TS可以自动推断出变量或者对象属性的类型
// TS自动推断出age类型为18
const age = 18;
注意点
1、如果可以自动推断，就没有必要写类型注解
2、有些无法推断出来的或者推断的不正确，就需要写类型注解
// 无法自动推断`first`和`second`的类型，需要进行类型注解
function sum(first: string, second: string) {
return first + second
}
// userInfo的name属性自动推断是string类型；如果推断的不正确，需要手动注解
const userInfo: {
name: 'tz',
age: number
} = {
name: 'tz',
age: 18
}
3、对象解构的类型的写法
const function fn({a, b} : { a: string, b: string}) {
return a + b
}
// 或者使用type
type User = { a: string, b: string}
const function fn({a, b} : User) {
return a + b
}
// 或者使用interface
interface User {
a: string;
b: string
}
const function fn({a, b} : User) {
return a + b
}
4、变量类型以定义变量时为准
let user = 'tz'
user = 123 // 报错：因为user定义时是string类型；不能赋值其他类型的值
类型收窄
-
类型收窄就相当于到if…else 或者switch…case等流程控制语句中加上条件，从而达到收窄的效果。
-
常用的类型收窄有 typeof收窄、真值收窄、相等收窄、in、instanceof、
typeof收窄
function upper(val: string | number) {
if(typeof val === 'string') {
return val.toUpperCase();
}
return val;
}
真值收窄
function upper(val?: string) {
if(val){
return val.toUpperCase()
}
}
相等收窄
x和y相等，会自动推断出x和y的类型都是string，可以执行toUpperCase方法
function upper(x: string | number, y: string | boolean) {
if(x === y) {
return x.toUpperCase()
}
}
in 收窄
interface Fish {
swim: () => {};
}
interface Bird {
fly: () => {};
}
function action(animal: Fish | Bird) {
if ('swim' in animal) {
animal.swim();
} else {
animal.fly();
}
}
instanceof 收窄
function getDate(params: Date | string) {
if(params instanceof Date) {
return params.getTime()
}
return params.toUpperCase()
}
使用类型陈述实现类型收窄
interface Fish {
swim: () => {};
}
interface Bird {
fly: () => {};
}
// animal is Fish属于类型陈述
function isFish(animal: Fish | Bird): animal is Fish {
if ((animal as Fish).swim !== undefined) {
return true;
}
return false;
}
function action(animal: Fish | Bird) {
if (isFish(animal)) {
animal.swim();
} else {
animal.fly();
}
}
随时随地看视频
