TypeScript详解十一：类型推断、类型变换

目录

• 前言
• 一、类型推断？
• • 1.从右向左流动
  • 2.底部流出
  • 3.从左向右流动
• 二、类型变换
• • 1.小心使用返回值
  • 2.typeof 转换类型
  • 3.索引访问操作符
  • 4.映射类型
• 总结

前言

类型推断和类型变换是ts中很重要的一部分功能，能保证我们写出更高质量的ts代码

一、类型推断？

定义：ts能根据一些简单的规则来推断变量的类型，而不需要我们给每个参数、变量定义类型

1.从右向左流动

• 变量的类型可以由定义推断，从赋的值中推断出来

namespace a {
  // 此处未给变量定义类型，但是ts从赋的值中推断出来类型
  let foo = 1; // foo: number
  let bar = 'hello'; // bar: string
}

2.底部流出

• 通过return关键字推断类型

namespace b {
  // 此处没有给c定义类型，但是ts从返回的a+b推断出c的类型
  function add(a: number, b: number) {
    return a + b;
  }
  let c = add(1, 2); // c: number
}

3.从左向右流动

• 根据定义的类型推断出参数的类型

namespace c {
  // 此处未给sum()函数参数赋值，但是ts从Sum类型中推断出来参数的类型
  type Sum = (a: number, b: number) => {};
  let sum: Sum = (a, b) => {
    return a + b; // a: number, b: number
  }
  console.log(sum(1, 2)); // 3

  // 示例：
  interface DefaultProps {
    name?: string,
    age?: number
  }
  let defaultProps: DefaultProps = {
    name: '张三',
    age: 18
  }
  let props = {
    ...defaultProps,
    home: '北京'
  }
  type Props = typeof props;
}

二、类型变换

1.小心使用返回值

• any类型和任意类型进行运算，得到的都是any类型

amespace a {
  // any和任意类型运算，得到的都是any类型
  function addA(a: any) {
    return a + 1;
  }
  function result(a: number, b: number) {
    return a + addA(b);
  }
  let res = result(1, 2); // res: any
}

2.typeof 转换类型

• 先获取类型再定义类型

namespace b {
  // 一般写的时候是这种方式：先定义类型，再定义参数
  // type Person = { name: string }
  // let p: Person = { name: '张三' }

  // 用typeof，也可以这么写，先定义参数，再定义类型
  let p = { name: '李四' }
  type Person = typeof p;
}

3.索引访问操作符

namespace c {
  interface Person {
    name: string,
    age: number,
    job: { name: string }
  }
  let getLastJob: Person['job'] = {
    name: 'hello'
  }
  console.log(getLastJob); // { name: 'hello' }
}

4.映射类型

• 语法：key in keyof …

namespace d {
  interface Person {
    name: string,
    age: number,
    sex: '男' | '女'
  }
  // 自己实现：批量把一个接口中的属性全部变成可选的
  // type PartialPerson = {
  //   [key in keyof Person]?: Person[key]
  // }

  // 内置类型实现：批量把一个接口中的属性全部变成可选的
  // Partial 是一个内置类型，就是用来实现将接口属性变成可选的
  type PartialPerson = Partial<Person>

  // 拓展：Partial的实现源代码
  // type Partial<T> = {
  //   [key in keyof T]?: T[key]
  // }
}

总结

本文主要记录了ts中类型推断及类型转换。下次再见