TypeScript 5.1がリリース β版、RC版との違いは？：組み込みのリファクタリング機能が改善

MicrosoftはTypeScript 5.1の正式リリースを発表した。これまでβ版、RC版が発表されているが、今回リリースされたTypeScript 5.1はその2つを踏まえた安定版である。

[＠IT]

　Microsoftは2023年6月1日（米国時間）、オープンソースのプログラミング言語TypeScript 5.1をリリースした。TypeScript 5.1に関しては、これまでβ版、RC（Release Candidate:リリース候補）版が発表されているが、今回リリースされたTypeScript 5.1はその2つを踏まえた安定版である。

　以下がTypeScript 5.1の代表的な新機能だ。

• 未定義返り値の関数での暗黙の戻り値の簡便化
• getとsetのアクセッサプロパティに全く関係のない型を指定
• JSX要素とJSXタグ型チェックの分離
• 名前空間付きJSX属性
• モジュール解決時にtypeRootsが参照される
• JSXタグのリンクされたカーソル
• @param JSDocタグのスニペット補完機能

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

　JavaScriptでは、関数がreturnを打たずに実行を終了した場合、undefinedという値を返す。以前のバージョンのTypeScriptでも少なくとも1つのreturn文を持たざるを得なかった。

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

//  Works in TypeScript 5.1!
function f4(): undefined {
    // no returns
}
//  Works in TypeScript 5.1!
takesFunction((): undefined => {
    // no returns
});

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

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

　TypeScript 4.3以前では、getとsetのアクセッサプロパティで使用する型は同じである必要があった。TypeScript 4.3では、getとsetのアクセサペアが2つの異なる型を指定できるようになったが、ゲッターの型はセッターの型のサブタイプである必要があった。しかし、TypeScript 5.1では、明示的な型アノテーションがあれば、getとsetのアクセッサプロパティに全く関係のない型を指定できるようになった。

JSX要素とJSXタグの型を切り離したタイプチェック

　今回リリースされたTypeScript 5.1では、JSXライブラリがJSXコンポーネントが返すことができる内容をより正確に記述することが可能になった。これにより、Reactで非同期のサーバコンポーネントを使用することができるようになる。

　以前のバージョンでは、JSX要素のタグの型に関する要件が厳格であり、特定の型が必要だった。TypeScript 5.1において、JSX要素のタグに関してより正確な型情報を提供するためのJSX.ElementTypeが導入され、それを使用することでJSX要素のタグとして有効な型を指定できるようになった。

namespace JSX {
    export type ElementType =
        // All the valid lowercase tags
        keyof IntrinsicAttributes
        // Function components
        (props: any) => Element
        // Class components
        new (props: any) => ElementClass;
    export interface IntrinsictAttributes extends /*...*/ {}
    export type Element = /*...*/;
    export type ClassElement = /*...*/;
}

名前空間付きJSX属性

　TypeScript5.1では名前空間付き属性名をJSX式で直接使用できるようになった。これにより名前空間付き属性を使用するライブラリや規格との互換性を高めることができる。

import * as React from "react";
// Both of these are equivalent:
const x = <Foo a:b="hello" />;
const y = <Foo a : b="hello" />;
interface FooProps {
    "a:b": string;
}
function Foo(props: FooProps) {
    return <div>{props["a:b"]}</div>;
}

モジュール解決でtypeRootsが参照される

　typeRootsは型定義ファイル（.d.ts）が配置されるディレクトリを指定するために使用される。TypeScript 5.1では指定されたモジュール検索ストラテジーがパスを解決できない場合、指定されたtypeRootsからの相対パスでパッケージを解決できるように変更された。

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

　TypeScript 5.1ではJSXタグ名のリンク編集がサポートできるようになった。リンク編集によってエディタは自動的に複数の場所を同時に編集することができるようになる。

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

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

β版とRC版の変更点

　β版からRC版に適用された変更は、下記の通り。

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