Typescipt 入门教程之编译类型系统边界设置及错误处理

类型系统边界设置

• boolean 选项

选项为 boolean 的 compilerOptions，可以被指定为 tsconfig.json 下的 compilerOptions

{
  "compilerOptions": {
    "someBooleanOption": true
  }
}

tsc — someBooleanOption

这样所有这些选项的默认设置都是 false

• noImplicitAny

代码无法被推断、或者推断它们可能会导致意外的错误

function log(msg) {
  console.log(msg)
}

log(666)
log('hello typescript')

没有注解函数参数，Typescript 将会认为它是 any 类型

noImplicitAny 当开启这个选项时，它将会标记无法被推断的类型

修复方法，可以进行注解

function log(msg: string | number) {
  console.log(msg)
}

• strictNullChecks

let b: number = 666
b = null
b = undefined

默认情况下，null 和 undefined 可以被赋值给 Typescript 中的所有类型，因为它们是所有类型的子类型

strictNullChecks 开启是不允许的

let b: number 不能将类型“null”分配给类型“number”。ts(2322)

• 非空断言操作符

在一个类型检查无法得出结论的上下文中，一个新的 ! 表达式后缀操作符，可以用来断言运算对象是非 null 和 非 undefined 的

interface Animal {
  eat: string
}

function validateAnimal(e?: Animal) {

}
function processEntity(e?: Animal) {
  validateAnimal(e);
  let a = e.eat // 错误，e 可能是 null
  let b = e!.eat // 可以，我们已经断言 e 是非 null
}

注意，它只是一个断言，就像类型断言一样，你需要确保该值不为空。一个非 null 的断言实质上意味着你在告诉编译器”我知道它不是 null，但是请让我使用它，即使它不是 null“。

• 明确赋值断言操作符

Typescript 将会对类中未初始化的属性抛出错误

class Animal {
  eat: string; // 可以，已经在构造器中初始化
  fly: boolean; // 错误，属性 fly 没有初始化，也没有在构造器中被赋值
  name: string = 'dog'; // 可以，已经初始化
  constructor() {
    this.eat = 'bone'
  }
}

可以用使用明确赋值断言，在属性名后加后缀（!），告诉 Typescript 在其它地方已经初始化

let a: number[]; // 没有断言
let b!: number[]; // 断言

init();

a.push(4); // 错误，变量在赋值之前被使用
b.push(4); // 可以，因为被断言

function init() {
  a = [1, 2, 3]
  b = [1, 2, 3]
}

就像所有的断言一样，告诉编译器让它相信你，不要抛出错误，即使代码并没有被分配属性。

错误处理

• TS2304

Cannot find name $
Cannot find module jquery

可能正在使用的第三方库，但是并没有声明它，这时，Typescript 会试图避免拼写错误和使用变量。

• TS2307

Cannot find module 'underscore'

可能把第三方库作为模块来使用了，并且缺少与之对应的环境声明文件

npm install –save @types/jquery

• TS1148

Cannot compile modules unless the '--module' flag provided

• 捕获不能有类型注解的简短变量

Typescript 会保护你免受 JavaScript 代码错误的影响，因此，请使用类型保护。

try {
  // ...
} catch(e) {
  if (e instanceof Error) {
    // ...
  }
}

• 接口 ElementClass 不能同时扩展两个 Component 类型

当在编译上下文中同时含有两个 react.d.ts 时，会发生这种错误

修复方法：

1、删除 node_modules 和任何 package-lock，然后再执行一次 npm install

2、如果不起作用，就去查找无效的模块，并将其报告给相关项目。你所使用的所有模块都应该将 react.d.ts 作为 peerDependency，而不是 dependency 来使用。