TypeScript 4.0で推したい追加機能ピックアップ

はじめに

先日（8/20）TypeScript 4.0 がリリースされました。
メジャーアップデートとしては約2年ぶりとなります。
devblogs.microsoft.com 個人的に推したい機能がいくつかあったので紹介します。🍣

※ちなみに、TypeScript3.0のリリースは2018/7/30です。 devblogs.microsoft.com

はじめに
TypeScript 4.0で追加された機能
終わりに

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

作者:Boris Cherny
発売日: 2020/03/16
メディア: 単行本（ソフトカバー）

TypeScript 4.0で追加された機能

Labeled Tuple Elements

配列内の要素にラベル付けをすることができるようになりました。
今までは配列を引数とする関数を定義する場合は、

function foo(...args: [string, number]): void {
    // something
}

のように型定義しかできなかったため各パラメータが何を意味しているのかわかりづらいですね。

それか、配列の使用を諦めることを余儀なくされていました。

function foo(arg0: string, arg1: number): void {
    // something
}

TypeScript 4.0では、配列内の要素にラベル付けができるようになります。💡

type Range = [start: number, end: number];

つまり、以下のような関数定義が可能になります。

function foo(x: [first: string, second: number]) {    
    // something
}

座標情報など、用途が固まっていて配列で扱いたい場合は可読性がグッと上昇しますね。

おまけですが、サポートされているエディターではラベルをオーバーロードして表示してくれるらしいです。

f:id:ooooouchi:20200826191606g:plain

Short-Circuiting Assignment Operators

新しく代入演算子が追加されました。

JavaScriptにはありましたが、TypeScriptにはなかった次の演算子が追加となります。

これにより、以下のように if ブロックを削減することができます。

// before
if (!a) {
    a = b;
}

// after
a ||= b

一目でめちゃくちゃ便利なことがわかりますね。

unknown on catch Clause Bindings

catch句の変数にunknown型を適用できるようになりました。

今まで catch句の変数には any型 が適用されていたので、変数に対してやりたい放題実装できるようになっていました。

try {
    // ...
}
catch (x) {
    // xがany型なので未定義の操作も実行できてしまう
    console.log(x.message);
    console.log(x.toUpperCase());
    x++;
    x.yadda.yadda.yadda();
}

これだとセーフティな実装とは程遠くなってしまいますね。

unknown型を適用することで、事前の型チェックを強制できます。

try {
    // ...
}
catch (e: unknown) {
    // エラー
    console.log(e.toUpperCase());

    if (typeof e === "string") {
        // 型チェックを行うことで実行できる
        console.log(e.toUpperCase());
    }
}