TypeScript 5.0の新機能を簡単に紹介

MicrosoftのTypeScript開発チームが、5.0のバージョンを2023年3月16日に正式リリースしました。

本投稿では、最も注目すべき変更点について紹介します。

デコレータ（Decorators）

もともと、TypeScriptでは「experimentalDecorators」フラグを付けることでデコレータを利用することができていました。

{
  "compilerOptions": {
      "experimentalDecorators": true,
  }
}

5.0からはこの設定は不要であり、デフォルトでStage 3のDecoratorが利用できるようになっています。一応、experimentalDecoratorsの指定でも動作するようになっていますが、その場合はStage 3のDecoratorは動作しませんでした。（Stage 2とStage 3の混在は不可）

そもそもデコレータとはクラスの実装をほとんど変更することなく、クラスやフィールド、メソッドなどを拡張、上書きする外部関数を利用することができる機能です。

下記の例を見てみます。

class Foo {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    @logMethod
    hoge() {
        console.log(`hoge hoge. ${this.name}`);
    }
}

上記 hoge 関数が呼び出された際に、その中身や関数内のコード変更することなく実行後に実行時間を出力したいと思います、

function logMethod<This, Args extends any[], Return>({ withArgs = false }) {
  return function(target: (this: This, ...args: Args) => Return,{ name }: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>) {
    const methodName = String(name);

    return function(this: This, ...args: Args): Return {
      console.time(methodName);
      try {
        return target.call(this, ...args);
      } finally {
        console.timeLog(methodName, withArgs ? args : undefined);
      }
    };
  };
}

// 実行
new Foo('sample').hoge();

// 結果
hoge hoge. sample
hoge: 1.283ms

実行時間が出力されました。

const修飾子

TypeScriptでは「Type inferring（型推測）」の機能が備わっています。

たとえば、下記のようなケースでは、型が文字列として推測されます。

function getObjectType<T extends {readonly type: string}>(obj: T): T["type"] {
  return obj.type;
}
const objType = getObjectType({type: "MyObject"}); // string

上記をリテラル型にしたいと考えた時に「as const」を指定します。

function getObjectType<T extends {readonly type: string}>(obj: T): T["type"] {
  return obj.type;
}

const objType = getObjectType({type: "MyObject"} as const); // MyObject

しかし今回のバージョンアップから、const修飾子を付けることができるようになりました。

function getObjectType<const T extends {readonly type: string}>(obj: T): T["type"] {
  return obj.type;
}

const objType = getObjectType({type: "MyObject"}); // MyObject

extendsオプションへの複数指定

通常、tsconfig.jsonでは「ビルド用」や「テスト用」にそれぞれ「tsconfig.build.json」や「tsconfig.test.json」のように複数のtsconfig.jsonを用意していると思います。

今回のバージョンアップではこれらを一つにまとめることができるようになります。

// 従来
{
  "extends": "./tsconfig.build.json",
  "compilerOptions": {
    "emitDeclarationOnly": false,
    "incremental": false,
    "noEmit": true
  }
}

v5.0
{ "compilerOptions": { "extends": ["basic", "extended"] } }

enumの値に定数以外の値を指定

5.0からはenumの値に定数以外の値を指定できるようになりました。

enum E {
  Foo = 10,
  Bar = 20,
  Baz = "value"
}

TypeScript 5.0ではすべての列挙型は定数型とリテラル型の値の「UNION」とみなされます。

そのため、上記例では、E.Foo や E.Bar はリテラル型としてみなされるようになります。

“export type *” がサポート

今までは、「export * as namespace from “./module」という構文のみがサポートされていましたが、TypeScript 5.0からは「export type * as namespace from “./module”」という風に利用できるようになりました。

5.0以前では import type * のように importでは利用できていたため、これで統一性が保たれる容認ありました。

新しいコンフィグのフラグが追加

TYpeScript 5.0から新しいフラグがいくつか追加されています。

–customConditions を設定することで、exports/importのカスタム条件を有効にすることができるようになります。たとえば、package.jsonに以下のような設定をするとします。

{ 
    // ... 
    "exports": { 
        ".": { 
            "my-device": "./my-device-module.mjs", 
            "node": "./my-module.mjs",
        } 
    } 
}

「–customeConditions my-device」 と使うことでTypeScriptは my-module.mjsの代わりにmy-device-module.mjsをimportします。

–verbatimModuleSyntaxフラグは、指定するとtype修飾子がついているimportやexport 文は出力されなくなります。いままでは「–importsNotUserdAsValues」や「–preserveValueImports」などがありましたが、これらはTypeScript 5.0からは非推奨となります。

最後に

他にも、下記のようなアップデートがありましたが、詳細は本項では割愛します。

下記が他のアップデート内容となります。

TypeScript 5.0ではユーザに優しい設計のアップデートが多い気がしました。

是非ご利用してみてください。