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


前言

类型推断类型变换是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中类型推断及类型转换。下次再见

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

剑九 六千里

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值