课程名称

专为小白设计的TypeScript入门课

课程章节

第2章 TypeScript 基础语法入门

• 2-9 类型注解和类型推断
• 2-10 类型收窄

课程讲师

Dell

课程内容

类型注解和类型推断

给ts的常量或者变量加了一些类型后，它可以帮助我们减少程序出错的概率，当然也可带来另外一个好处。
定义一个userName的string变量，再做 . 操作时，会有很多语法提示。因为编辑器明确的知道userName变量是什么类型，就能查到对应类型的属性和方法了，这样后面写代码会非常的爽。

因此使用ts遵循最核心的原则是 =>
TS 开发准则：只要是变量、或者对象属性，都应该有一个明确的类型

类型收窄

ts根据类型，会推断该类型是否存在对应类型上的属性和方法，所以这里报错了。

为了解决该问题可以使用typeof 类型收窄

// typeof 类型收窄
function uppercase(content: string | number) {
  if(typeof content === 'string') {
    return content.toUpperCase();
  }
  return content;
}

typeof不是所有类型都支持的，它仅支持以下类型。

比如空对象null，就不支持了。

课程收获

TS类型注解
手动的方式，去设定变量类型，用冒号的形式。

 const userName: string = '123'

类型注解: 人工的告诉 TS，变量或者对象的明确属性类型

TS类型推断
以下代码没有人工告诉userAge的类型，ts看到该语句，会自动做一些类型推断。

// 类型推断
const userAge = 18;

鼠标移到变量，提示类型推断为18这个字面量类型。

遵循原则：如果类型推断能够自动推断出来类型，就没必要去手写类型注解。
类型推断的变量，也会有对应的代码提示，这个时候就没有再加:string了。

改成let，则推断为string类型了，因为let可以为变量，const是常量，后期是不能修改的，才推断为字面量。

let userNick = 'dell';
userNick.toLocaleUpperCase();

但并不是所有的变量，都可以通过类型推断出类型的。
比如函数参数：

必须用类型注解。但是没必要返回值写成number类型的，实际编辑器能够根据返回值进行类型推断的。

function getTotal(paramOne: number, paramTwo: number) {
  return paramOne + paramTwo;
}

getTotal(1, 2);

定义一个对象，其实没必要类型注解。

类型推断也可。

如果设定死，即为字面量，就必须使用类型注解了。

再修改name，必然就报错了。

const userInfo = {
  name: 'dell',
  age: 18
}

userInfo.name = 'lee'

遵循原则：如果类型推断推断不出来，或者推断的不准确，再去手写类型注解

掌握TS类型收窄

TS真值收窄

content可传不可传的时候，函数中调用对应类型的方法会报错。

function getString(content?: string) {
  return content.toUpperCase();
}

可使用真值收窄，再外层加一个判断，只有content存在，才调用对应类型的方法。
真值收窄 => 其实就是做一个真假的判断。

function getString(content?: string) {
  if(content) {
    return content.toUpperCase();
  }
}

以上这段代码其实还是有bug，假如content是一个空字符串的话，content也是一个false，进不去if逻辑中，没有return值，最终也会报错。
可以在外层加一个typeof的类型收窄即可。

function getString(content?: string) {
  if(typeof content === 'string') {
      if(content) {
        return content.toUpperCase();
      }
  }
}

实际不用真值收窄，直接用typeof的类型收窄即可。

function getString(content?: string) {
  if(typeof content === 'string') {
      return content.toUpperCase();
  }
}

TS相等收窄

function example(x: string | number, y: string| boolean) {
  return x.toUpperCase();
}

会报错，x不一定是string。

加了相等判断后，ts可以分析出，x的类型可能是string或者number，y的类型可能是string或者boolean，x与y全等，首先类型得相等，x的类型一定为string。

// 相等收窄
function example(x: string | number, y: string| boolean) {
  if(x === y) {
    return x.toUpperCase();
  }
}

收窄其实就是在if判断的时候，当去写一些条件之后，ts会结合条件的上下文，去推断出条件里类型的到底可能是什么，即把变量的类型进一步收缩的过程称为类型收窄。类型收窄不局限于以上这几种，正在写代码的时候，可能会发现新的类型收窄的方式。因为ts也在不断的升级，结合条件判断的底层逻辑，它也在升级，未来ts的这种类型收窄会做得越来越完善，帮助我们更容易发现代码中的问题。