TypeScript 5.5

2024年6月20日にTypeScript 5.5がリリースされました。

Announcing TypeScript 5.5 - TypeScript

型述語の推論

次のコードの value is S が推論されるようになりました。

function isNumber(value: number | string): value is number {
  return typeof value === "number";
}

特に、これはfliterメソッドで便利です。

// TypeScript 5.4
const values = [2, null, 3].filter(x => x !== null);
// => (number | null)[]

const values = [2, null, 3].filter((x): x is number => x !== null);
// => number[]

// TypeScript 5.5
const values = [2, null, 3].filter(x => x !== null);
// => number[]

また、これは今までよりも型安全になります。型述語はあくまでユーザー定義であるため、次のような嘘をつくことが出来ます。

function isDog(x: Animal): x is Dog {
  return x instanceof Cat;
}

Control Flow Narrowing for Constant Indexed Accesses

次のようなケースで、正確に型の絞り込みがされるようになりました。

function f1(obj: Record<string, unknown>, key: string) {
  if (typeof obj[key] === "string") {
    // TypeScript 5.4: obj[key]がunknownとして推論されエラーが出ていた。
    // TypeScript 5.5: obj[key]がstringに絞り込まれる。
    obj[key].toUpperCase();
  }
}

次のようにすれば、今までも問題はなかったため、あまり恩恵はないかもしれません。

function f1(obj: Record<string, unknown>, key: string) {
  const x = obj[key];
  if (typeof x === "string") {
    x.toUpperCase();
  }
}

The JSDoc @import Tag

次のような記述が出来るようになりました。

/** @import { Linter } from "eslint" */

/** @type { Linter.FlatConfig[] } */
const config = [];
export default config;

今までは次のように記述するのが一般的でした。

/** @type { import("eslint").Linter.FlatConfig[] } */
const config = [];
export default config;

正規表現構文チェック

TypeScriptが、正規表現の基本的な構文チェックを行うようになりました。これはTypeScript 5.5では正規表現リテラルに限定されており*、*new RegExpの場合チェックされません。

詳しくは、次の記事が参考になります。

TypeScript 5.5 で追加された正規表現構文チェックを理解する

明示的な型注釈の強制 isolatedDeclarations

isolatedDeclarationsは明示的な型注釈を強制するオプションです。これにより、複雑な型推論を削減でき、高速なビルドや型チェックの並列化などの恩恵を受けることが出来ます。

このオプションの意義については、TypeScript 5.5のリリース記事でも詳細に書かれています。

Announcing TypeScript 5.5 - TypeScript

とても有益なオプションのように思えますが、これを安易に有効化するとオーバーエンジニアリングになる可能性があります。メリットとデメリットを把握した上で、導入を検討しましょう。小さなライブラリでは効果的な場合が多いと思います。

Configファイルのテンプレート変数 ${configDir}

tsconfig.jsonで次のように記述ができるようになりました。

{
    "compilerOptions": {
        "typeRoots": [
            "${configDir}/node_modules/@types"
            "${configDir}/custom-types"
        ],
        "outDir": "${configDir}/dist"
    }
}

デジタル認証アプリ

2024年6月21日にデジタル庁がデジタル認証アプリを発表しました。無料で利用できるデジタル認証アプリサービスAPIを利用することで、マイナンバーカードを使った本人確認を簡単に組み込むことができると述べています。

デジタル認証アプリをリリースします｜デジタル庁

民間事業者向けの利用シーンとして、ECサイトやネットバンキングログイン時の本人確認やライブ会場等での酒類購入時の年齢確認を例に挙げている。

【民間事業者向け情報】マイナンバーカードで本人の確認を簡単に | デジタル認証アプリ | デジタル庁 ウェブサービス・アプリケーション

利用には、申請に加えて、30分程度の打合せ、契約が必要とのことです。

リクエストを送信 – デジタル庁　デジタル認証アプリ

Others

Playwrightで表示しているページのログを取得するpage.on('console') について。

How to Monitor JavaScript Logs & Exceptions with Playwright

Polyfill.ioで発生した10万サイトに影響するサプライチェーン攻撃。

Polyfill.io JavaScript supply chain attack impacts over 100K sites

Polyfill.ioは2024年2月に中国企業に買収されており、CloudflareやFastlyが攻撃前のミラーを提供している。

［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始

Cloudflareは今回の件を受けて、polyfill.ioへのリンクを自社cdnjs上のpolyfillへのリンクに書き換える機能を提供開始した。無料版では自動適用、有償版では管理画面から設定可能。

Automatically replacing polyfill.io links with Cloudflare’s mirror for a safer Internet

Temporalではコードサイズや複雑性の観点からスコープを狭めることが計画されているとのこと。Temporal.TimeZone と Temporal.Calendar はとりあえず削除される予定。

Temporalの近況(主にScopeを狭める話)

htmxもうみんな忘れてそうだが、2024年6月17日にv2がリリースされていた。

</> htmx ~ htmx 2.0.0 has been released!

Figma Config 2024が開催

Build your agenda | Config 2024

• Figmaのリデザイン。UI3
• Figma AI
  • レイヤーの自動名付け
  • デザインの作成
  • プロトタイプの作成
  • ビジュアル検索
  • コンテンツの置き換え
  • Figmaを開いて表示されるFigma 2024の紹介からAIのコンテンツを選択するとwaitlistにjoinできる
• Figma Slides
  • 高機能なスライドを作成する新プロダクト

など