重磅！TypeScript 3.7 RC 发布，备受瞩目的 Optional Chaining 来了

npm install typescript@rc

let x = foo?.bar.baz();

let x = (foo === null || foo === undefined) ?    undefined :    foo.bar.baz();

// 之前if (foo && foo.bar && foo.bar.baz) {    // ...}
// 之后if (foo?.bar?.baz) {    // ...}

/** * 当我们有一个数组时，返回它的第一个元素 * 否则返回 undefined。 */function tryGetFirstElement<T>(arr?: T[]) {    return arr?.[0];    // 等效：    // return (arr === null || arr === undefined) ?    // undefined :    // arr[0];}

async function makeRequest(url: string, log?: (msg: string) => void) {    log?.(`Request started at ${new Date().toISOString()}`);    // 等效：    // if (log !== null && log !== undefined) {    // log(`Request started at ${new Date().toISOString()}`);    // }
    const result = (await fetch(url)).json();
    log?.(`Request finished at at ${new Date().toISOString()}`);
    return result;}

let result = foo?.bar / someComputation()

let temp = (foo === null || foo === undefined) ?    undefined :    foo.bar;
let result = temp / someComputation();

function barPercentage(foo?: { bar: number }) {    return foo?.bar / 100;    // ~~~~~~~~    // 错误：对象可能未定义。}

let x = foo ?? bar();

let x = (foo !== null && foo !== undefined) ?    foo :    bar();

function initializeAudio() {    let volume = localStorage.volume || 0.5
    // ...}

assert(someValue === 42);

function multiply(x, y) {    assert(typeof x === "number");    assert(typeof y === "number");
    return x * y;}

function yell(str) {    assert(typeof str === "string");
    return str.toUppercase();    // 哇！我们拼错了 'toUpperCase'。    // 希望 TypeScript 还是能捕获它！}

function yell(str) {    if (typeof str !== "string") {        throw new TypeError("str should have been a string.")    }    // 错误捕获！    return str.toUppercase();}

function assert(condition: any, msg?: string): asserts condition {    if (!condition) {        throw new AssertionError(msg)    }}

function yell(str) {    assert(typeof str === "string");
    return str.toUppercase();    // ~~~~~~~~~~~    // 错误：属性 'toUppercase' 在 'string' 类型上不存在。    // 你说的是 'toUpperCase' 吗？}
function assert(condition: any, msg?: string): asserts condition {    if (!condition) {        throw new AssertionError(msg)    }}

function assertIsString(val: any): asserts val is string {    if (typeof val !== "string") {        throw new AssertionError("Not a string!");    }}

function yell(str: any) {    assertIsString(str);
    // 现在 TypeScript 知道 'str' 是一个 'string'.
    return str.toUppercase();    // ~~~~~~~~~~~    // 错误：属性 'toUppercase' 在 'string' 类型上不存在。    // 你说的是 'toUpperCase' 吗？
}

function isString(val: any): val is string {    return typeof val === "string";}
function yell(str: any) {    if (isString(str)) {        return str.toUppercase();    }    throw "Oops!";}

function assertIsDefined<T>(val: T): asserts val is NonNullable<T> {    if (val === undefined || val === null) {        throw new AssertionError(            `Expected 'val' to be defined, but received ${val}`        );    }}

function dispatch(x: string | number): SomeType {    if (typeof x === "string") {        return doThingWithString(x);    }    else if (typeof x === "number") {        return doThingWithNumber(x);    }    return process.exit(1);}

function dispatch(x: string | number): SomeType {    if (typeof x === "string") {        return doThingWithString(x);    }    else if (typeof x === "number") {        return doThingWithNumber(x);    }    process.exit(1);}

type Foo = Foo;

type ValueOrArray<T> = T | Array<ValueOrArray<T>>;// ~~~~~~~~~~~~// 错误：类型别名 'ValueOrArray' 循环引用它自己。

type ValueOrArray<T> = T | ArrayOfValueOrArray<T>;
interface ArrayOfValueOrArray<T> extends Array<ValueOrArray<T>> {}

type Json =    | string    | number    | boolean    | null    | JsonObject    | JsonArray;
interface JsonObject {    [property: string]: Json;}
interface JsonArray extends Array<Json> {}

type Json =    | string    | number    | boolean    | null    | { [property: string]: Json }    | Json[];

type VirtualNode =    | string    | [string, { [key: string]: any }, ...VirtualNode[]];
const myNode: VirtualNode =    ["div", { id: "parent" },        ["div", { id: "first-child" }, "I'm the first child"],        ["div", { id: "second-child" }, "I'm the second child"]    ];

/** * @callback Job * @returns {void} */
/** Queues work */export class Worker {    constructor(maxDepth = 10) {        this.started = false;        this.depthLimit = maxDepth;        /**         * 注意：队列中的作业可能会将更多项目添加到队列中         * @type {Job[]}         */        this.queue = [];    }    /**     * 在队列中添加一个工作项     * @param {Job} work     */    push(work) {        if (this.queue.length + 1 > this.depthLimit) throw new Error("Queue full!");        this.queue.push(work);    }    /**     * 如果队列尚未开始就启动它     */    start() {        if (this.started) return false;        this.started = true;        while (this.queue.length) {            /** @type {Job} */(this.queue.shift())();        }        return true;    }}

/** * @callback Job * @returns {void} *//** Queues work */export class Worker {    constructor(maxDepth?: number);    started: boolean;    depthLimit: number;    /**     * 注意：队列中的作业可能会将更多项目添加到队列中     * @type {Job[]}     */    queue: Job[];    /**     * 在队列中添加一个工作项     * @param {Job} work     */    push(work: Job): void;    /**     * 如果队列尚未开始就启动它     */    start(): boolean;}export type Job = () => void;

interface User {    isAdministrator(): boolean;    notify(): void;    doNotDisturb?(): boolean;}
// 稍后……
// 代码已破坏, 勿用!function doAdminThing(user: User) {    // oops!    if (user.isAdministrator) {        sudo();        editTheConfiguration();    }    else {        throw new AccessDeniedError("User is not an admin");    }}

function doAdminThing(user: User) {    if (user.isAdministrator) {    // ~~~~~~~~~~~~~~~~~~~~    // 错误！这个条件将始终返回 true，因为这个函数定义是一直存在的    // 你的意思是调用它吗？

interface User {    isAdministrator(): boolean;    notify(): void;    doNotDisturb?(): boolean;}
function issueNotification(user: User) {    if (user.doNotDisturb) {        // OK, 属性是可选的    }    if (user.notify) {        // OK, 调用了这一函数        user.notify();    }}

// ./someOtherModule.tsinterface SomeType {    y: string;}
// ./myModule.tsimport { SomeType } from "./someOtherModule";export interface SomeType {    x: number;}
function fn(arg: SomeType) {    console.log(arg.x); // Error! 'x' doesn't exist on 'SomeType'}