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

作者: tww844475003 分类: TypeScript 发布时间: 2022-01-09 23:22

类型系统边界设置

  • 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 来使用。

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注