Microsoft、「TypeScript 5.1 RC」を発表 ベータ版からの変更点は？：新機能は10項目

Microsoft社がプログラミング言語「TypeScript 5.1 RC」を発表した。

[＠IT]

　2023年5月18日（米国時間）、Microsoftはオープンソースのプログラミング言語「TypeScript 5.1 RC」を発表した。

　TypeScript 5.1の新機能は10項目あり、代表的なものとして以下の機能が挙げられる。

• 未定義返り値の関数での暗黙の返り値設定
• 要素およびJSXタグ型の間の分離型検査
• 名前付きJSX属性
• 宣言の既存ファイルへの移動
• JSXタグのリンクされたカーソル
• param JSDocタグのスニペット補完機能
• 処理の最適化による高速化

　TypeScript 5.1 RCの主な変更点は下記の通り。

ベータ版からの変更点

　ベータ版以降、デコレータのinitフックの動作が調整されたことにより、その一部を修正した。そして、isolatedModulesでのemitの動作に変更を加え、スクリプトファイルがモジュールに書き換わらないようになった。これは、transpileModule APIがisolatedModulesの使用を前提としているため、スクリプトファイルがモジュールとして解釈されないことを保証するものでもある。

　これらの変更に加え、最近、既存のファイルに宣言を移動するための新しいリファクタリングサポートが追加された。

undefined-return関数の暗黙の戻り値の簡便化

　TypeScript 5.1では、未定義返り値の関数にreturn文を持たせないことができるようになった。

　関数に戻り値がなく、undefinedを返すことを期待する関数に渡された場合は、TypeScriptはその関数の戻り値の型をundefinedと推測する。

　以前のバージョンのTypeScriptでは、return文を持たないで済む関数は、void-returning関数とany-returning関数だけだった。つまり「この関数は未定義を返す」と明示した場合でも、少なくとも1つのreturn文を持たざるを得なかった。

getとsetのアクセッサプロパティに全く関係のない型を指定可能に

　TypeScript 5.1では、明らかな型アノテーションがあれば、getとsetのアクセッサプロパティに全く関係のない型を指定できるようになった。

　このバージョンのTypeScriptでは、これらの組み込みインタフェースの型はまだ変更されていないが、CSSStyleRuleは次のように定義することができるようになった。

interface CSSStyleRule {
    // ...
    /** Always reads as a `CSSStyleDeclaration` */
    get style(): CSSStyleDeclaration;
    /** Can only write a `string` here. */
    set style(newValue: string);
    // ...
}

　また、Setアクセサーが「有効な」データのみを受け取ることを要求する一方で、getアクセサーは基礎となる状態がまだ初期化されていない場合、undefinedを返す可能性があると指定するようなパターンもできるようになった。

class SafeBox {
    #value: string | undefined;
    // Only accepts strings!
    set value(newValue: string) {
    }
    // Must check for 'undefined'!
    get value(): string | undefined {
        return this.#value;
    }
}

JSX要素とJSXタグの型チェックの分離

　TypeScript 5.1ではJSX.ElementTypeという型を検索するようになった。ElementTypeは、JSX要素のタグとして何が有効かを正確に指定する。

名前空間付きJSX属性

　TypeScriptでJSXを使用する際に、名前空間付きの属性名をサポートするようになった。

　名前付きタグ名は、名前の最初のセグメントが小文字の名前である場合、JSX.IntrinsicAttributesと同様の方法で検索されるようになる。

宣言の既存ファイルへの移動

　新しいファイルへの宣言の移動に加えて、既存のファイルへの宣言の移動もプレビュー機能として提供されるようになった。この機能は、最近のバージョンの「Visual Studio Code」で試すことができる。

JSXタグのリンク付きカーソル

　TypeScriptがJSXタグ名のリンク編集をサポートするようになった。リンク編集（別名「ミラーカーソル」)は、エディタが自動的に複数の場所を同時に編集できるようにするもの。

　この新機能は、TypeScriptとJavaScriptの両方のファイルで動作し、Visual Studio Code Insidersで有効にすることができる。Visual Studio Codeでは、Settings UI:Linked Editingの設定UIもしくはEditor.Linked EditingをJSON設定ファイルで編集できる。

　この機能は、Visual Studio 17.7 Preview 1でもサポートされる予定だ。

JSDocの@param タグに対するスニペット補完機能

　TypeScriptとJavaScriptの両方のファイルにおいて、@paramタグを入力する際にスニペット補完を提供するようになった。これにより、コードを文書化したり、JavaScriptでJSDocタイプを追加したりする際に、タイピングやテキストにジャンプする回数を減らすことができる。

TypeScript 5.1 RCで最適化された項目

不要な型のインスタンス化の回避

　TypeScript 5.1では、外側の型パラメータへの参照を含まないことが分かっているオブジェクト型内で、型インスタンス化の実行を避けるようになった。これにより、多くの不要な計算を削減できる可能性があり、material-uiのdocsディレクトリの型チェックにかかる時間を50％以上削減した。

ユニオンリテラルに対するネガケースチェック

　ソース型がユニオン型の一部であるかどうかをチェックする場合、TypeScriptはまず、そのソースの内部型識別子を使用して高速ルックアップを行う。このルックアップが失敗した場合、TypeScriptはユニオン内の全ての型に対して互換性があるかどうかをチェックする。

　リテラル型を純粋なリテラル型のユニオンに関連付ける場合、TypeScriptはユニオン内の他の全ての型に対するフルウォークを回避できるようになった。

　この最適化により、該当のコードの型チェックにかかる時間を約45秒から約0.4秒に短縮した。

JSDoc解析のためのスキャナーへの呼び出しを削減

　TypeScript 5.1では、JSDocのコメントを分解するロジックがスキャナー／トークナイザに移されたため、スキャナーは、より大きなコンテンツの塊を直接パーサーに返し、パーサーが必要な処理を行うようになった。

　これらの変更により、ほとんどが文章コメントである数MBのJavaScriptファイルの解析時間が約半分になった。また、パフォーマンススイートのxstateのスナップショットでは、解析時間が約300ミリ秒短縮され、読み込みと解析がより高速になった。

TypeScript 5.1 RCで変更された点

ES2020とNode.js 14.17を最低ランタイム要件に追加

　TypeScript 5.1では、ECMAScript 2020で導入されたJavaScriptの機能が搭載されている。その結果、TypeScriptは最低限モダンなランタイムで実行される必要がある。つまり、多くのユーザーにとってはTypeScriptがNode.js 14.17以降でしか動作しないことを意味する。

　Node 10や12といった過去のNode.jsでTypeScript 5.1を実行しようとすると、tsc.jsやtsserver.jsを実行したときに以下のようなエラー表示が出る場合がある。

node_modules/typescript/lib/tsserver.js:2406
  for (let i = startIndex ?? 0; i < array.length; i++) {
                           ^
 
SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47