TypeScript Websiteの翻訳を進めているんですが、アクティブなレビュワーがおらず、中断している状態です。興味あればDiscordの#localize-jaまで連絡ください

2021-11-23

同値型を判定する型

typescript

ref: https://github.com/Microsoft/TypeScript/issues/27024#issuecomment-421529650

ある程度型パズルに慣れている方は、型同士が同じかどうか判定する型と聞いて次のように思いつくのではないでしょうか：

type Equals<X, Y> = [X] extends [Y] ? ([Y] extends [X] ? true : false) : false;

しかし、これは assignability（代入可能かどうか）だけを判定しているため、any型に対してはうまく動作しません。

type Equals<X, Y> = [X] extends [Y] ? ([Y] extends [X] ? true : false) : false;

// should be true, got true
type test01 = Equals<string, string>;
//     ^?
// should be false, got false
type test02 = Equals<{ foo: string }, { bar: string }>;
//     ^?
// should be false, but got true
type test03 = Equals<any, { bar: string }>;
//     ^?

型が全くの同値であるかを判定するには、「条件付き型同士が割り当て可能になるにはextends直後の型どうしが同値でなければならない」というチェッカーの性質を利用します。

export type Equals<A1 extends any, A2 extends any> = (<A>() => A extends A2
  ? 'assignable'
  : 'not assignable') extends <B>() => B extends A1
  ? 'assignable'
  : 'not assignable'
  ? true
  : false;

// should be true, got true
type test01 = Equals<string, string>;
//     ^?
// should be false, got false
type test02 = Equals<{ foo: string }, { bar: string }>;
//     ^?
// should be false, got false
type test03 = Equals<any, { bar: string }>;
//     ^?

詳細に見るために、Equalsを分解してみます。

declare let x: <A>() => A extends A2 ? 'assignable' : 'not assignable';
declare let y: <B>() => B extends A1 ? 'assignable' : 'not assignable';
x = y;

x に y が割り当て可能（代入可能）なとき、Equalsの戻り値はtrueであるということが言えます。

参考にした Issue のコメントでは、次のように述べられていました：

Here's a solution that makes creative use of the assignability rule for conditional types, which requires that the types after extends be "identical" as that is defined by the checker:

したがって、上記コードにおいて、条件付き型 x に条件付き型 y が割り当て可能であるためには、extends直後の型A1とA2が同値である必要があるということです。

具体的に値を入れて確認してみます。A1がany、A2がstringであるケース：

// @errors: 2322
declare let x: <A>() => A extends string ? 'assignable' : 'not assignable';
declare let y: <B>() => B extends any ? 'assignable' : 'not assignable';
// エラーが発生して代入できない
x = y;

A1とA2がともにstringであるケースでは：

declare let x: <A>() => A extends string ? 'assignable' : 'not assignable';
declare let y: <B>() => B extends string ? 'assignable' : 'not assignable';
// 代入可能
x = y;

ではなぜ「条件付き型同士が割り当て可能になるにはextends直後の型どうしが同値でなければならない」という性質があるのでしょうか。

extends直後の型が同値でなくても、条件付き型同士が割り当て可能だと仮定してみます：

declare let x: <A>() => A extends string ? 'assignable' : 'not assignable';
declare let y: <B>() => B extends number ? 'assignable' : 'not assignable';

const x_1 = x<string>();
//     ^?
const y_1 = y<string>();
//     ^?

// @ts-ignore
x = y;

// 関数シグネチャの定義から戻り値はx_2は`assignable`のはず
// しかし、xにyを代入しており、y_1の戻り値は`not assignable`なので
// 戻り値は`assignable | not assignable`のユニオン型でなければ矛盾する
const x_2 = x<string>();
//     ^?

インターセクション型と通常の型は同値とみなされない

{ foo: true } & { bar: false }と{ foo: true; bar: false }は同値とみなされないことには注意が必要です。

type X1 = { foo: true } & { bar: false };
type X2 = { foo: true; bar: false };

export type Equals<A1 extends any, A2 extends any> = (<A>() => A extends A2
  ? 'assignable'
  : 'not assignable') extends <B>() => B extends A1
  ? 'assignable'
  : 'not assignable'
  ? true
  : false;

// should be true, but got false
type test01 = Equals<X1, X2>;
//     ^?

これが意図したものであるかは不明ですが、同値かどうか比較している部分のソースコードを見ると、フラグ（flags）を比較していることが分かります。

// https://raw.githubusercontent.com/microsoft/TypeScript/main/src/compiler/checker.ts
function isTypeRelatedTo(
  source: Type,
  target: Type,
  relation: ESMap<string, RelationComparisonResult>
) {
  // ...
  if (relation !== identityRelation) {
    // ...
  } else {
    if (source.flags !== target.flags) return false;
    // ...
  }
  // ...
}

フラグの定義（TypeFlags）を見てみると、インターセクション型のフラグとオブジェクト型のフラグが異なるため、同値とみなされないようです。

2021-11-19

TypeScript 4.5

typescript

TypeScript 4.5 | uraway

ref: https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/

ECMAScript モジュールサポートの延期

当初 TypeScript 4.5 beta では、ECMAScript モジュールをサポートするオプションがあったが、現在はナイトリーリリースのみで利用可能。

`Awaited`型の追加

4.5 では、Awaited型が追加されました。この型は、非同期関数の await や、Promise の.then()メソッドをモデル化するものです。

// A = string
type A = Awaited<Promise<string>>;

// B = number
type B = Awaited<Promise<Promise<number>>>;

// C = boolean | number
type C = Awaited<boolean | Promise<number>>;

node_modules による lib のサポート

TypeScript は一般的な宣言ファイル（JavaScript で利用可能な API や DOM API）をバンドルしていますが、TypeScript をアップグレードすると、これらの変更にも対応しなければなりません。

4.5 では、package.jsonにバージョンを指定することで、特定のビルトイン宣言ファイルをオーバーライドできます。

{
  "dependencies": {
    "@typescript/lib-dom": "npm:@types/web"
  }
}

4.5 以降は、TypeScript をアップグレードしても依存ファイルのバージョンの宣言ファイルが使用されます。

識別記号としてのテンプレート文字列

4.5 では、テンプレート文字列型を識別記号として認識できるようになりました。

export interface Success {
  type: `${string}Success`;
  body: string;
}

export interface Error {
  type: `${string}Error`;
  message: string;
}

export function handler(r: Success | Error) {
  if (r.type === 'HttpSuccess') {
    // 'r'はSuccess型となり、
    // `body`型はstringとなる
    let token = r.body;
  }
}

es2022 モジュールのサポート

トップレベル await などの機能を持つ、es2022をサポートしています。

{
  "compilerOptions": {
    "module": "es2022"
  }
}

条件付き型における末尾呼び出しの除去

TypeScript では、無限に続く可能性のある再帰や、時間がかかってエディタの操作に影響があるような型の拡張を検出したときに、潔く失敗する必要があることがあります。そのため、無限に深い型を分解しようとするときや、多くの中間結果を生成する型を扱うときに、暴走しないようにするヒューリスティックを備えています。

// @errors: 2589
type InfiniteBox<T> = { item: InfiniteBox<T> };

type Unpack<T> = T extends { item: infer U } ? Unpack<U> : T;

type Test = Unpack<InfiniteBox<number>>;

例えば、下記のTrimLeftは、一つの分岐で末尾再帰的になるように書かれています。呼び出しごとにスタックに呼び出し元に戻るための情報を保存する必要がなく、末尾呼び出しの最適化（末尾呼び出しの除去）が行えます。

type TrimLeft<T extends string> = T extends ` ${infer Rest}`
  ? TrimLeft<Rest>
  : T;

// 4.4以前はエラー: Type instantiation is excessively deep and possibly infinite.
type Test = TrimLeft<'                                                oops'>;

インポート削除の無効化

TypeScript では、インポートを使用していることが検知できない場合があります

// @preserveValueImports: true
import { Animal } from './animal.js';

eval('console.log(new Animal().isDangerous())');

// @filename: ./animal.js
export class Animal() {}

デフォルトでは、このようなインポートは常に削除されます。4.5 では、--preserveValueImportsフラグを使ってインポートを削除しないようにできます。

インポート名の`type`修飾子

4.4 以前にも、インポートを削除することができる印としてtype修飾子がありますが、値もインポートしたい場合、同じモジュール名に対して 2 つの import文が必要でした。

import { someFunc } from './some-module.js';
import type { BaseType } from './some-module.js';

export class Thing implements BaseType {}

// @filename: some-module.js
export function someFunc() {}
export class BaseType {}

4.5 では、個々の名前付きimportにtype修飾子を付けることができるようになりました。

import { someFunc, type BaseType } from "./some-module.js";

export class Thing implements BaseType {}

// @filename: some-module.js
export function someFunc() {}
export class BaseType {}

プライベートフィールドの存在チェック

4.5 では、オブジェクトがプライベートフィールドを持っているかチェックする ECMAScript のプロポーザルをサポートしています。

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

    equals(other: unknown) {
        return other &&
            typeof other === "object" &&
            #name in other && // <- this is new!
            this.#name === other.#name;
    }
}

インポートアサーション

4.5 では、ECMAScript によるインポートアサーションのプロポーザルをサポートしています。これはランタイム時にインポートが期待されるフォーマットを持っているかどうかを確認するために使用する構文です。

// @resolveJsonModule: true
import obj from "./something.json" assert { type: "json" };

// @filename: something.json
{}

JSDoc における const アサーションとデフォルト型引数

4.5 では、にいくつかの JSDoc 表現が加わりました。

その一つの例が const アサーションです。TypeScript では、リテラルの後に const を書くことでより正確で不変的な型を表現することができます。

let a = { prop: 'hello' };
//  ^?
let b = { prop: 'hello' } as const;
//  ^?

JS ファイルでも、JSDoc のタイプアサーションを使って同じことができるようになりました。

let a = { prop: 'hello' };

let b = /** @type {const} */ { prop: 'hello' };

4.5 では、さらにデフォルト型引数が JSDoc に追加されました。

type Foo<T extends string | number = number> = { prop: T };

JavaScript では@typedef宣言を使って次のように書くことができます

/**
 * @template {string | number} [T=number]
 * @typedef Foo
 * @property prop {T}
 */

// or

/**
 * @template {string | number} [T=number]
 * @typedef {{ prop: T }} Foo
 */

realpathSync.native によるロードタイムの高速化

TypeScript は、すべての OS で Node.js の realpathSync.native 関数を利用するようになりました。

以前はこの関数は Linux でのみ使用されていましたが、TypeScript 4.5 では、Node.js の最新バージョンを実行している限り、コンパイラは Windows や MacOS のような一般的に大文字小文字を区別しない OS でもこの関数を使用します。この変更により、Windows 上の特定のコードベースにおいて、プロジェクトの読み込みが 5-13%速くなりました。

2021-09-03

TypeScript 4.4

typescript

TypeScript 4.4

https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/

代入された判別式の control flow analysis

以前の TypeScript では、type guard の判別式を変数に代入した場合、その判別式は機能しない。

function foo(arg: unknown) {
  const argIsString = typeof arg === "string";
  if (argIsString) {
    console.log(arg.toUpperCase());
    //              ~~~~~~~~~~~
    // Error! Property 'toUpperCase' does not exist on type 'unknown'.
  }
}

TypeScript 4.4 では、変数をチェックし、内容が判別式であれば変数の型を絞り込むことができる。

シンボルとテンプレート文字列としての Index Signature

TypeScript 4.4 からはシンボルとテンプレート文字列パターンが Index Signature として使用できる

interface Colors {
  [sym: symbol]: number;
}

const red = Symbol("red");

let colors: Colors = {};

colors[red] = 255;

interface Options {
    width?: number;
    height?: number;
    // 任意の`data-`から始まる文字列をプロパティのキーとして使用できる
    [optName: `data-${string}`]: unknown;
}

let option: Options = {
    width: 100,
    height: 100,
    "data-blah": true
};

`useUnknownInCatchVariables`オプション

catch句の変数の型をanyからunknownに変更するオプション

try {
} catch (err) {
  // unknown
}

strictオプション下では自動的にオンになる。

`exactOptionalPropertyTypes`オプション

多くの JavaScript コードでは、存在しないプロパティとundefinedを値として持つプロパティは同一のものとして扱われる。そのため TypeScript でも、オプショナルプロパティは、undefinedとのユニオンタイプとして考えられてきた。例えば、

interface Person {
  name: string;
  age?: number;
}

これは下記と同様:

interface Person {
  name: string;
  age?: number | undefined;
}

exactOptionalPropertyTypesオプション下では、オプショナルプロパティはundefinedとのユニオンタイプを追加しない。存在しないプロパティと区別される。

const p: Person = {
  name: "Daniel",
  age: undefined, // Type 'undefined' is not assignable to type 'number'.(2322)
};

static ブロック

ECMAScript プロポーザルの static ブロックをサポート:

class Foo {
    static count = 0;

    // This is a static block:
    static {
        if (someCondition()) {
            Foo.count++;
        }
    }
}

2021-02-22

TypeScript の陥りやすい罠

Oreilly の Effective Typescript を読んだ。説明が簡潔でわかりやすく、章の構成も読みたいところだけ読めば良いようになっており、すらすら読める。対象読者層はある程度 TypeScript を使っており、ひと通りの機能を触ったことがある人だと思う。全くの初心者はまず Handbookを一通り眺めてみることをおすすめする。本書籍はTypeScript本の一冊目として手に取るものではない。

2 年くらい TypeScript を使っているが意外と詳しく知らない動作やうろ覚えだった機能についても書かれており、参考になった。Conditional TypesやUtility Typesについては薄めだったのは残念。

本書を読んだ上で、Handbook で気になる部分を再度読み直したり、TypeScript リポジトリの Issue を読むことで浮かび上がってきた、 TypeScript を使う際に気をつけるべき点、他の静的型言語とは異なる点をいくつかまとめておく。(なので本書に載っていないものもある)

動作確認は TypeScript v4.1.5 で行った。

削除される型

TypeScript の型情報は JavaScript コードには一切残らない。

そのため、型に対してtypeofやinstanceofなどの JavaScript 上の値を扱う演算子を使うことはできない。

インターセクション型と通常の型は同値とみなされない

ECMAScript モジュールサポートの延期

Awaited型の追加

node_modules による lib のサポート

識別記号としてのテンプレート文字列

es2022 モジュールのサポート

条件付き型における末尾呼び出しの除去

インポート削除の無効化

インポート名のtype修飾子

プライベートフィールドの存在チェック

インポートアサーション

JSDoc における const アサーションとデフォルト型引数

realpathSync.native によるロードタイムの高速化

TypeScript 4.4

代入された判別式の control flow analysis

シンボルとテンプレート文字列としての Index Signature

useUnknownInCatchVariablesオプション

exactOptionalPropertyTypesオプション

static ブロック

TypeScript の陥りやすい罠

削除される型

keyof Union は never 型

オブジェクトは単一の厳密な型を作成しない

"exccess property checking"はオブジェクトリテラルの作成時にしか発生しない

type エイリアスと interface の違い

interfaceは"declaration merging"が可能

ECMAScript にない言語機能

Decorator

type-widening

type-narrowing

JavaScript のスーパーセットであるということ

`Awaited`型の追加

インポート名の`type`修飾子

`useUnknownInCatchVariables`オプション

`exactOptionalPropertyTypes`オプション

`interface`は"declaration merging"が可能