【九月打卡】第46天 TypeScript(2)

类型注解和类型推断

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();
  }
}