Zenn
Closed6

Reading: TS Reference

TypeScript
bufferingsbufferings

https://www.typescriptlang.org/docs/handbook/utility-types.html

Partial<Type>

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

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

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

Required<Type>

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

Readonly<Type>

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

へー

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

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>

bufferingsbufferings

https://www.typescriptlang.org/docs/handbook/decorators.html

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

https://www.typescriptlang.org/docs/handbook/declaration-merging.html

宣言のマージ

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 に定義することもできる

https://www.typescriptlang.org/docs/handbook/enums.html

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

https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html

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

bufferingsbufferings

https://www.typescriptlang.org/docs/handbook/jsx.html

.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つのタイプがある

  1. Functional Component (FC)
  2. Class Component

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

その他

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

このスクラップは2021/10/13にクローズされました