Reading: TS Reference

次はリファレンスをざっと見ておこう

`Partial<Type>`

Type のプロパティをオプショナルにした型

どういうときに使うんだろう？と思ったらなるほどそうか

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}

`Required<Type>`

逆に、オプショナルを全部外したもの

`Readonly<Type>`

リードオンリーにしたもの

へー

function freeze<Type>(obj: Type): Readonly<Type>;

bufferings

`Record<Keys, Type>`

Keys と Type のマッピング

const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};

ふむー。Map っぽいけど、オブジェクトだな

`Pick<Type, Keys>`

Type のプロパティから、キーが Keys のものだけをピックアップした型

`Omit<Type, Keys>`

Type のプロパティから、キーが Keys を取り除いた型

`Exclude<Type, ExcludedUnion>`

Type の中から ExcludedUnion に含まれる型を取り除いた型

`Extract<Type, Union>`

Type の中から Union に含まれる型だけを残した型

`NonNullable<Type>`

Type から null と undefined を取り除いた型

`Parameters<Type>`

関数型の Type の引数を表すタプル型

`ConstructorParameters<Type>`

Parameters<Type> と同じだけど、渡せるのはコンストラクター関数だけ

`ReturnType<Type>`

関数の戻り値の型

`InstanceType<Type>`

コンストラクター関数からそのインスタンスの型を取得

`ThisParameterType<Type>`

関数に this パラメーターの型が指定されている場合はその型、指定されていない場合は unknown

`OmitThisParameter<Type>`

関数から this パラメーターを削除した型

`ThisType<Type>`

this の型用のマーカーっぽい。いまいち分かんないけど多分使わない。

Intrinsic String Manipulation Types

テンプレートリテラルのところで出てきたやつ

Uppercase<StringType>

Lowercase<StringType>

Capitalize<StringType>

Uncapitalize<StringType>

bufferings

アノテーションみたいなの。まだ Stage2 なので実験的な段階

宣言のマージ

Interfaces

関数以外のメンバーは、ユニークまたは同じ型になってないといけない
関数メンバーに同じ名前のものがあると、オーバーロードとして扱われて、後で読み込まれた方が優先度が高くなる
例外として、単一の文字列のパラメーターを持つ場合は優先順位が高くなる

Namespaces

Namespace もマージできる
ただし別の場所で宣言されたローカル変数までは共有されない

よく分かってないけど、Namespace と Class / Function / Enum のマージもできるみたい

Disallowed Merges

Class はマージできない

Module Augmentation

JS では prototype にメンバーを追加することで拡張することができる

import { Observable } from "./observable";
Observable.prototype.map = function (f) {
  // map 関数の実装
};

TS でもこれは OK なんだけど、そこに追加したメンバーのことを TS に伝えるために Module Argmentation でこういう風にする

import { Observable } from "./observable";
declare module "./observable" {
  interface Observable<T> {
    map<U>(f: (x: T) => U): Observable<U>;
  }
}
Observable.prototype.map = function (f) {
  // map 関数の実装
};

Global に定義することもできる

Enum はあんまり使う気がないからスキップしよう

Iterable を表す Iterable インターフェースがある

bufferings

.tsx 拡張子のファイルに書く

Type Assertion

<foo> って書くタイプの Type Assertion は tsx ファイルでは使用できない

var foo = <foo>bar;

as の方だけが使える

var foo = bar as foo;

Type Checking

intrinsic elements (= div みたいな普通のやつ)と、独自コンポーネントで分けて考える
渡される属性もそれぞれで扱いが違う

Intrinsic elements

JSX.IntrinsicElements に定義されてる

Value-based elements

普通にコンポーネントをインポートして使えば OK

Value-based elements には次の2つのタイプがある

Functional Component (FC)
Class Component

JSX からはこの2つのどちらを使ってるかが区別できないので、TS はまず FC からチェックする。見つからなかったら Class Component から探す。

その他

属性とか Child Component とか色々あるけどだいたいいい感じにやってくれそう

bufferings

ファイルの1行目にコンパイラー用のオプションを指定できる

/// <reference path="..." />

こんなとこかな