TypeScript 2.7 记录

摘要：版本记录针对版本的特性作专门的实例，希望能加深理解。这种情况下添加类型属性被间接初始化了例如构造函数中调用一个方法，更改了属性的值。这种情况下我们可以使用显式赋值断言修饰符号来帮助类型系统识别类型。

针对ts 2.7版本的特性作专门的实例，希望能加深理解。实例github地址 官方日志文档

const Foo = "Foo";
const Bar = "Bar";

let x = { // 2.7版本之前，x的类型为{[x:string]:string|number},现在为 {[Foo]: number;[Bar]: string;}}
    [Foo]: 100,
    [Bar]: "hello",
};

let a = x[Foo]; // has type "number"
let b = x[Bar]; // has type "string"

ES6 引入的 Symbol 机制,Symbol是js的第七种数据类型,可以产生独一无二的值，可以用来保证每个属性的名字都是独一无二,从根本上防止属性名的冲突。结合ts，我们可以这样声明一个symbol，const Foo: unique symbol = Symbol()

unique symbol 类型必须由 const 关键字声明

// Error! "Bar" isn"t a constant.
let Bar: unique symbol = Symbol();

引用赋值一个 unique symbol 类型的值时候使用 typeof 操作符

// let Baz = Foo // 这样的话 Baz 的类型为symbol
let Baz: typeof Foo = Foo // 类型为unique symbol
// 在class里面使用 `unique symbol` 定义类的静态属性(不能用在类属性) 时，
// 需要使用 `readonly static` 关键字来声明
class C {
    static readonly StaticSymbol: unique symbol = Symbol();
}

当Symbol + const时，值的类型自动判断为unique symbol

// let SERIALIZE = Symbol("serialize-method-key"); SERIALIZE 类型为symbol
const SERIALIZE = Symbol("serialize-method-key");  // SERIALIZE 类型为unique symbol

接口中的计算属性名称引用必须引用类型为文本类型或 "unique symbol"

interface Serializable {
   // [("serialize-method-key")](obj: {}): string; //error
   [SERIALIZE](obj: {}): string;
}

class JSONSerializableItem implements Serializable {
   //  error 只能用引入的SERIALIZE来作属性的名称
   // ["serialize-method-key"](obj: {}) {
   //     return JSON.stringify(obj);
   // }
   [SERIALIZE](obj: {}) {
       return JSON.stringify(obj);
   }
}

另外，两个unique symbol类型的值不能互相比较(当然除非其中一个值的类型为用 typeof 另外一个值)

TypeScript 2.7引入了一个新的控制严格性的标记 --strictPropertyInitialization

现在，如果开启 strictPropertyInitialization，我们必须要确保每个实例的属性都会初始值，可以在构造函数里或者属性定义时赋值。

class StrictClass {
    foo: number;
    bar = "hello";
    baz: boolean; 
    // error,Property "baz" has no initializer and is not definitely assigned in the constructor
    constructor() {
        this.foo = 42;
    }
}

有两种情况下我们不可避免该error的产生：

该属性本来就可以是 undefined 。这种情况下添加类型undefined

属性被间接初始化了（例如构造函数中调用一个方法，更改了属性的值）。这种情况下我们可以使用 显式赋值断言 (修饰符号 !) 来帮助类型系统识别类型。后面具体介绍它，先看下代码中怎么使用：

class StrictClass {
    // ...
    baz!: boolean;
    // ^
    // 注意到这个!标志
    // 代表着显式赋值断言修饰符
}

尽管我们尝试将类型系统做的更富表现力，但我们知道有时用户比TypeScript更加了解类型

跟上面提到的类属性例子差不多，我们无法在给一个值赋值前使用它，但如果我们已经确定它已经被赋值了，这个时候类型系统就需要我们人的介入

let x: number;
initialize();
console.log(x + x);
//          ~   ~
// Error! Variable "x" is used before being assigned.

function initialize() {
    x = 10;
}

添加 ! 修饰:let x!: number,则可以修复这个问题

我们也可以在表达式中使用!,类似 variable as string和 variable :

let x: number;
initialize();
console.log(x! + x!); //ok

function initialize() {
    x = 10;
}

这一块中文官网花了挺长篇幅来讲这个内容，我也是实践过才明白讲的是什么，需要理解 __esModule 标记是做什么的、es6模块经过ts转换成commonjs是怎么的、 如何保持与老式代码( CommonJS/AMD/UMD)的互通性

先说一下 --esModuleInterop 的作用：

默认开启allowSyntheticDefaultImports（那是肯定的，我们需要它来实现默认导入的功能）

命名空间导入不允许被调用或者构造,需要改成默认导入

import * as express from "express";
// error 正确的实现导入方式应该是下面这种

import express from "express";
express();

注意: 我们强烈建议开启esModuleInterop,不管在新代码或者是老代码上。但该模式下会可能对已有的代码产生破环，对已有的命名空间导入(import * as express from "express"; express();)改成默认导入(import express from "express"; express(); )

让我们更深入理解，在 --esModuleInterop 下，ts对 import * 和 import default两种导入方式用两个helpers __importStar and __importDefault做分别处理。

构建前的代码：

import * as foo from "foo";
import b from "bar";
const a = "newM"
export default a

构建后的代码：

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
}
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
}
exports.__esModule = true;
var foo = __importStar(require("foo"));
var bar_1 = __importDefault(require("bar"));
const a = "newM";
exports.default = a;

这样做的结果是，我们新的代码不管是通过ts，Babel或Webpack来构建，都能通过 __esModule 来判断是否为es模块，如果无__esModule，则创建含default的对象保存模块，这样就完成我们要的默认导入功能，同时保持对老的库的支持

[number, string, string]类型的值 不可赋值 [number, string] 类型的值了。

[number, string]类型等同于下面的 NumStrTuple声明：

interface NumStrTuple extends Array {
    0: number;
    1: string;
    length: 2; // using the numeric literal type "2"
}

NumStrTuple 代表类型为固定长度为2,[0]为number类型,[1]为string 类型的数组

如果不希望固定宽度，只需要最小长度，可以这样：

interface MinimumNumStrTuple extends Array {
    0: number;
    1: string;
}

// 现在能正常判断obj的类型了，而不是之前的 {}
const obj = test ? { text: "hello" } : {};  // { text: string } | { text?: undefined }
const s = obj.text;  // string | undefined

// { a: number, b: number } |
// { a: string, b?: undefined } |
// { a?: undefined, b?: undefined }
let obj2 = [{ a: 1, b: 2 }, { a: "abc" }, {}][0];

declare function f(...items: T[]): T; 

// { a: number, b: number } |
// { a: string, b?: undefined } |
// { a?: undefined, b?: undefined }
let obj3 = f({ a: 1, b: 2 }, { a: "abc" }, {});

in 操作符 和 instanceof 运算符 更好用了（就是那么简单）

--watch 会在重新编译后清空控制台
--pretty 更好地展示错误信息

看图:

完。参考：ts官方