typescript学习笔记——运算符（1）

非空断言符——！

最近刚开始写TS，经常遇到的一个问题就是编译器报错
不能将类型“null”分配给类型“Prefab”。ts(2322)
不能将类型“undefined”分配给类型“Prefab”。ts(2322)
属性“target”没有初始化表达式，且未在构造函数中明确赋值。ts(2564)

原因就是TS是一种强类型语言，而且默认开启了严格模式 。当Typescript严格模式设置为on时，它将使用strict族下的严格类型规则对项目中的所有文件进行代码验证。规则是：

规则名称	解释
noImplicitAny	不允许变量或函数参数具有隐式any类型
noImplicitThis	不允许this上下文隐式定义
strictNullChecks	不允许出现null或undefined的可能性
strictPropertyInitialization	验证构造函数内部初始化前后已定义的属性
strictBindCallApply	对bind, call, apply更严格的类型检测
strictFunctionTypes	对函数参数进行严格逆变比较

我这个项目的tsconfig配置文件 strict属性默认是true

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "strict": true,
    "types": [
      "./temp/declarations/cc",
      "./temp/declarations/jsb",
      "./temp/declarations/cce.env"
    ],
    "experimentalDecorators": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "noEmit": true,
    "forceConsistentCasingInFileNames": true
  }
}

但是在写日常的一些需求时经常需要创建一个null或者undefined的变量，因为有些时候一些值是后面才需要用到的，但是在一些框架下面又需要提前的创建，在赋值的时候就没法赋值一些 （还未实例化的值） 比如 class类型的值，就需要暂时赋空值。

那我又想使用严格模式来规范自己的代码，又想赋空值 ，那就需要用到 !，也就是非空断言符。

非空断言操作符会从变量中移除 undefined 和 null。
只需在变量后面添加一个 ! 即可。

忽略变量的 undefined | null：

  const onlyString: string = maybeString; // Error
  const ignoreUndefinedAndNull: string = maybeString!; // Ok

使用非空断言操作符的注意事项
因为 ! 非空断言操作符会从编译生成的 JavaScript 代码中移除，所以在实际使用的过程中，要特别注意。

const a: number | undefined = undefined;
const b: number = a!;
console.log(b);

经过编译

生成以下js代码

const a = undefined;
const b = a;
console.log(b);

所以在浏览器中执行以上代码，在控制台会输出 undefined

需要注意的是，非空断言操作符仅在启用 strictNullChecks 标志的时候才生效。当关闭该标志时，编译器不会检查 undefined 类型和 null 类型的赋值。

---

联合类型

或者也可以使用 联合类型（因为null和undefined也是一种类型）

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

---

Type1|Type2|Type3

---

// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 运行正确
x = undefined;    // 运行正确
x = null;    // 运行正确

总结

非空断言操作符是一个非常实用的运算符，但是也不能过于依赖，毕竟Typescript is use strict!

参考：
https://www.runoob.com/typescript/ts-union.html
https://cloud.tencent.com/developer/article/1610693
https://my.oschina.net/u/4302130/blog/4270720