タイプ4.4:良い、悪いと悪くない

著者によってArek Nawo
8月12日、typescript 4.4リリース候補(rc)was announced . これは、変更が完了しており、公式、安定したリリース直後にいくつかのバグ修正後に来ていることを意味します.
どのような新しい、どのようにあなたの開発の経験に影響を与える可能性がどのようにそれを今すぐ試してみることができます!

変更の中断

我々は、要約することから始めますbreaking changes . このリリースでは、メジャーではありませんが、まだコードを壊すことができます.

あなたはもはや初期化することはできませんabstract 内部プロパティabstract クラス.あなたはそれらの型を定義することができます.

Promise チェックが改善されました.TSはあなたを含めるように思い出させますawait あなたがいるときif -チェックPromise 予期しない常に真理チェックを防ぐために以前より多くのケースで結果.

catch パラメータはunknown の代わりにany デフォルトで\--strict または\--useUnknownInCatchVariables フラグがついている.

this すべての利用可能なモジュールシステム(ESM、AMD、CommonJetsなど)でECMAScriptモジュール仕様と一致するようにインポートされた関数を呼び出すときに値が無視されます

lib.d.ts 現在の仕様に従って変更されましたlib.dom.d.ts すべて変更noted here )

そのような方法で、あなたが期待できる大きな新機能を見てみましょう!

改良型ガード検出

おそらく、タイプ4.4の最も重要な特徴は「エイリアシング状態と差別の制御フロー解析」です.
つまり、これまでのところ、差別化されたユニオンであっても、エイリアス型ガードが適切に分析され、与えられた型を狭くするために使用されます.
前のTSバージョンでは、次のように動作しません.

const example = (arg: string | number) => {
  const isString = typeof arg === "string";

  if (isString) {
    return arg.toUpperCase(); // Error
  }

  return arg.toPrecision(); // Error
};

The isString それが真実であるとき、条件はTSにそれを知っていることができませんでしたarg はstring . その結果、TTはあなたがタイプ特有のメソッドとプロパティを使用したときに、エラーを与えましたarg ‘S型string | number . の状態をif ステートメントが直接解釈されました.
改善された制御フロー解析で、それはもはやTS 4.4で問題でありません.さらに、TSは破棄されたプロパティのチェックを実行した場合でも、識別されたユニオンを扱うときに適切な型を検出します!

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; sideLength: number };

const area = (shape: Shape): number => {
  const { kind } = shape;
  const isCircle = kind === "circle"; // shape.kind === "circle" will also work

  if (isCircle) {
    // Circle
    return Math.PI * shape.radius ** 2;
  }
  // Square
  return shape.sideLength ** 2;
};

特定の深さまで、TSはさらに複雑な組み合わせ条件を認識し、それに応じてタイプを狭くする.

const example = (x: string | number | boolean) => {
  const isString = typeof x === "string";
  const isNumber = typeof x === "number";
  const isStringOrNumber = isString || isNumber;

  if (isStringOrNumber) {
    x; // string | number
  } else {
    x; // boolean.
  }
};

これらの改善は本当に素晴らしいです!TSの開発者は今、きれいにレイアウトすることができますし、複雑な条件を注釈なしにすべてを置くことなくif ステートメントまたは直接型アサーションを使用します.

より汎用性の高いインデックス署名

もう一つの大きな改善は、インデックス署名を行う必要があります.あなたは、もはやちょうどに制限されませんnumber and string . さあsymbol また、テンプレート文字列パターンも許可されます.

interface Colors {
  [sym: symbol]: number;
}

const red = Symbol("red");
const green = Symbol("green");
const blue = Symbol("blue");
const colors: Colors = {};

colors[red] = 255;
colors[red]; // number
colors[blue] = "da ba dee"; // Error
colors["blue"]; // Error

symbol インデックス署名は良い追加です.しかし、私の意見では、テンプレート文字列インデックスの署名ははるかに面白いです!これにより、特定のパターンにインデックス署名を絞り込むことができます.これまでにない複雑な型定義を可能にします!

interface Example {
  a: number;
  b: string;
  [prop: `data-${string}`]: string;
}

const test1: Example = {
  a: 1,
  b: "example",
  "data-test": "example",
};
const test2: Example = {
  "data-test": "example",
}; // Error (no "a" and "b")
const test3: Example = {
  a: 1,
  b: "example",
  test: "example",
}; // Error ("test" not accepted)

あなたがインデックス署名を使用したいが、一般からそれを絞り込みたいならばstring , この更新プログラムはあなたのために巨大になります!
その上、ユニオンインデックス署名も許可されます.任意の組み合わせstring , number , symbol , 文字列テンプレートパターンは許容できます.

interface Example {
  [prop: string | number]: string;
}

オープンソースセッション

Webアプリケーションの生産におけるデバッグは、挑戦的で、時間がかかるかもしれません.OpenReplay フルストーリー、ログオンとhotjarにオープンソースの代替手段です.それはあなたが監視し、すべてのユーザーが再生し、どのようにすべての問題のためにあなたのアプリの行動を示す再生することができます.
それはあなたのユーザーの肩を見ながら、ブラウザの検査官を開いているようなものだ.
OpenReplayは現在利用可能なオープンソースの代替手段です.

ハッピーデバッギング、現代のフロントエンドチームStart monitoring your web app for free .

厳密な任意のプロパティ型

離れて\--useUnknownInCatchVariables , もう1つのフラグが導入されました-\--exactOptionalPropertyTypes .
このフラグがオンになっていると、TSundefined .

interface Example {
  a: string;
  b?: number;
}

const test: Example = {
  a: "example",
  b: undefined, // Error if --exactOptionalPropertyTypes is turned on
};

プロパティがオブジェクトに存在するかどうかを判断するような振る舞いundefined 値またはそれ以外の場合に便利です.
使用する場合などObject.assign , またはオブジェクトのスプレッド{ …obj } ), プロパティundefined 実際に存在しないプロパティと比較して実際に異なって扱われます.実装によっては、コードについても同様です.
許すundefined with \--exactOptionalPropertyTypes オンにすると、明示的に含める必要がありますundefined ユニオン型で.フラグなしでは、このような動作は自動的です.

interface Example {
  a: string;
  b?: number | undefined;
}

const test: Example = {
  a: "example",
  b: undefined, // Works correctly (even with --exactOptionalPropertyTypes on)
};

このフラグがあなたのコードとサードパーティの定義(例えばdefinitelytypedから)の両方で起こる問題を引き起こすことができるので、それは含まれません\--strict したがって、opt inとnon - breakです.
あなたがそのように感じるならば、あなたのコードベースで\--strictNullChecks 選ぶ.

静的ブロック

最後の大きな新機能はstatic ブロック.
これは、現在のAの最新のecmascript機能ですstage 3 proposal . static ブロックは、より複雑な開始プロセスをstatic クラスメンバー.

class Example {
    static count = 0;

    // Static block
    static {
        if (someCondition()) {
            Example.count++;
        }
    }
}

上記の機能が既に可能であったが、この機能は、開始のブロックがクラス定義の中で正しくなるのを許容することによって、より簡単で、よりエレガントになります.
以前は、そのような論理はクラス定義の外に置かれなければなりませんでした.

class Example {
  static count = 0;
}

if (someCondition()) {
  Example.count++;
}

それとは別にstatic ブロックには、プライベートな静的およびインスタンスフィールドへのアクセスを許可する利点があります(クラスの定義の一部である方法を考えてください).

let exampleFunc!: (instance: Example) => number;

class Example {
  static #accessCount = 0;
  #initial: number;
  constructor(input: number) {
    this.#initial = input * 2;
  }

  static {
    exampleFunc = (instance: Example) => {
      Example.#accessCount++;

      return instance.#initial
    }
  }
}

if (exampleFunc) {
  exampleFunc(new Example(2)); // 4
}

性能向上

新機能と中断の変更を除いて、常に、いくつかの注目すべきですperformance improvements :

より高速な宣言は、追加キャッシュのおかげで発する.

条件付きパスの正規化は、コンパイラがこれを処理しているパスを正常化するのにかかる時間を短縮します.

高速パスマッピングpaths インtsconfig.json , 追加キャッシュのおかげで、重要なパフォーマンスの向上をもたらします.

高速インクリメンタルビルド\--strict バグを修正することにより、すべての以降のビルドで不要な型チェックを行うことができます.

大きい出力のためのより速いソースマップ生成

速く\--force 不要なチェックを減らす

IntelliSenseの改善

tsが最もよく知られている領域は、intellisense(別名自動補完/エディタサポート)もいくつかの改善を見ています.
としてTSの提案は、4.4から、より自動的に純粋なJavaScriptファイルのスペルの提案を発行しますcheckJs , or @ts-check となった.これらは非侵襲的である提案のタイプ.
他の目に見える改善のために、TSは現在インラインヒントを示すことができます、別名「幽霊テキスト」.これは、パラメーター名から戻り値の型を推測するすべてに適用できます.

また、改善されたインポートパスが示唆された.のような、相対パスのようなnode_modules/… , TSは実際に使用するパスを表示しますreact の代わりにnode_modules/react/.. または何か.化粧品、しかし歓迎された変化.

テストドライブ

すべてのこれらの素晴らしい機能を使用すると、おそらくそれらを使用することができるでしょう疑問に思っている.
あなたの最高の賭けは、1980年代の安定したリリースまで待つことになっていますnext few weeks . この方法では、未解決のバグやその他の問題に対処する必要はありません.
しかし、あなたが今RCドライブをテストしたいならば、あなたはそれから得ることができますNPM :

npm install typescript@rc

必要に応じて、選択のIDE/コードエディターで使用するように選択します.
もちろん、VSのコードは、最高の経験を提供するVS Code Insiders , あなたはボックスから最新のTSバージョンを取得します.

ボトムライン

それで、あなたはそれを持ちます!改善のトンは、TS 4.4で来ており、さらに、すでに計画されています.
あなたはTSユーザーなら、これはあなたのための良い更新されます.それは確かにさらにあなたの開発経験を向上させるtsよりもすでに行う.そして、あなたはすでにTSを使用していない場合は、多分それはあなたがそれを試してみるために適切な時期だ?