TypeScript 3.7 で注目すべき 3 つの新機能について簡単に説明します。

序文

TypeScript 3.7 が正式にリリースされてからしばらく経ちました。この期間中、現在のプロジェクトを TypeScript に移行しているので、リリースごとに特に注意を払うつもりです。

3.7 に含まれる新機能に関しては、以前のリリースと比較すると実際には比較的小規模なリリースですが、そこに含まれるいくつかの機能により、コードの品質自体が大幅に向上します。

オプションの連鎖

最初の機能は、オプショナルチェイニング演算子のサポートです。これは、オプショナルチェイニング演算子と翻訳する必要があります。もちろん、この翻訳はまだ少し奇妙だと思うので、今のところは英語のままにしておきましょう。

この機能は、まずは es2019 に搭載された新機能です。機能自体については、ご興味のある方はこちらを参照してください。

TypeScript は JavaScript のスーパーセットなので、この機能は事前に実装されることが予想されます。使い方は大まかに次のようになります。

?.b();

は以下と同等です:

もし(a)ab();
// または && ab()

たとえば、多層ネストの場合、b もオブジェクトであり、c() を呼び出し続けるには、次のようにします。

a?.b?.c()

しかし、このように記述したとしても、b() の b も null 値になる可能性があり、直接呼び出されると例外がスローされるため、安全ではありません。絶対的な安全性を確保するには、次のように記述します。

a?.b?.();

ここで、optional の意味を正しく理解しておく必要があることに注意してください。optional とは、型宣言で ? によって変更されることを意味します。つまり、型に null 値にできるプロパティが含まれていることを示します。つまり、?. は、型宣言自体に準拠していないプロパティでは呼び出されません。例:

インターフェースA {}

定数a: A = {};

a?.b?.(); // プロパティ 'b' はタイプ 'A' に存在しません

インターフェース A の宣言が次のように変更されない限り、

インターフェースA {
  b?: どれでも
}

この機能はプロジェクトにおいて非常に実用的な意味を持ちます。if アサーションステートメントや && 演算子を少なく記述しても、同じ効果が得られます。

ヌル結合

中国語から翻訳すると、これは二重疑問符演算子と呼ばれ、その構文はまさに ?? であるため、実際には非常に説明的です。

この演算子の機能は、簡単に言えば、次のコードのように、null 値のデフォルト値を指定することです。

a = b || 'foo' とします

b が null の場合、|| 演算子の性質により、a の値が foo に割り当てられます。 ?? 演算子を使用して書き直すと、次のようになります。

a = b とします?? 'foo'

表面的には、両者に違いはないように見えますが、実際にはここには隠れた問題があります。つまり、null 値の概念は null と undefined だけを指すのではなく、false や 0 などの一連の論理的に偽の値も null 値としてカウントされるため、明らかに問題があります。例:

定数b = 0
a = b || 'foo' とします
// a は 'foo' です

この例では、b が本当に空の値 (null または undefined) の場合にのみ、a にデフォルト値が割り当てられると予想されます。a は 0 に等しいはずですが、実際の実行結果は foo です。これは、b = 0 であるためであり、|| 演算子の操作中に false として解釈されます。実際のプロジェクトで検証コードコンポーネントを作成したことがあります。残念ながら、この落とし穴に陥ってしまい、この問題のデバッグに長い時間を費やしてしまいました。

しかし、?? 演算子を使用すると、この問題は発生しません。

呼び出されていない関数のチェック

同じような問題に遭遇した人は多いと思います。効果的な命名規則がないため、実際のプロジェクトでは次のようにアサーション属性とアサーションメソッドが混在しています。

クラスA {
    isFoo(): ブール値 {
        false を返します。
    }
}

関数テスト(a: A) {
    もしa.isFooであれば{ 
        ...
    } 
}

ここで、a.isFoo を呼び出してアサーション値を取得することが目的であれば、明らかに間違いを犯しています。直接 if (a.isFoo) を使用するのではなく、if (a.isFoo()) を使用する必要があります。後者は構文レベルでは間違っていませんが、論理的な意味では true としてアサートされるためです。しかし、3.7 のリリース後、TypeScript はこの問題の検出を支援しようとします。

それにもかかわらず、属性の場合は isXXX、メソッドの場合は assertXXX など、アサーションメソッドとアサーション属性の統一された命名規則を開発することをお勧めします。