satisfiesメモ
makotot
makototanother way to assign types to values.
値に型を割り当てる方法
makototまず型割り当ての復習。
値の型をコロンに続けて明示的にアノテーション
const obj: Record<string, string> = {};
obj.id = "123";
値がアノテーションの型そのものであり、その型のみを許容。
makototlet id: string | number = "123";
if (typeof numericId !== "undefined") {
id = numericId;
}
型をユニオンでwidenしてアノテーションもできる。
makototエッジケースの欠点がある。
When you use a colon, the type BEATS the value.
コロンによる型アノテーションによって、値を型が打ち負かす。
makototIn other words, if you declare a wider type than you want, you're stuck with the wider type.
広めに型定義したら広めな型に留まる
const routes: Record<string, {}> = {
"/": {},
"/users": {},
"/admin/users": {},
};
// No error!
routes.awdkjanwdkjn;
When you use
satisfies, the value BEATS the type.
satisfiesであれば型を値が打ち負かす
makototThis means it infers the narrowest possible type, not the wider type you specify
可能な限り最も狭い型を推論する
makototasによる型定義は嘘になり得る
type User = {
id: string;
name: {
first: string;
last: string;
};
};
const user = {} as User;
// No error! But this will break at runtime
user.name.first;
There are some limits to the lies– you can add properties to objects, but you can’t convert between basic types.
ただし基本型の間での嘘はつくことができない。
asを繰り返したりしない限りは。
const str2 = "my-string" as unknown as number;
There’s one last way to give a type to a variable:
Don’t.
型付けするもう1つの方法は型定義しないこと。推論を効かせる。
makotot
- colon annotations
satisfiesasannotations- not annotating and letting TS infer it
まとめると値に型を指定する方法は、コロンに続けて型指定、satisfies、as、型を書かずに推論を効かせる、の4通り
makototBut most of the time, when you want to assign a type to a variable you probably want the type to be wider.
変数に型割り当てるなら、大抵広めに型付けしておきたいかもしれない
makototThe rule of thumb is that you should only use satisfies in two specific situations:
- You want the EXACT type of the variable, not the WIDER type.
- The type is complex enough that you want to make sure you didn’t mess it up
経験則から考えるsatisfiesが必要なケースは2つだけ
- 正確な型が必要なとき
- 何か誤っていないか確認したいほど複雑な型
makotot
as constとの組み合わせ
makotot
makototThe new
satisfiesoperator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression.
式の結果の型を変更することなく、式の型を検証できるもの。
makotot提案のissue
makototMaybe we don’t care about if the property names match up somehow, but we do care about the types of each property. In that case, we can also ensure that all of an object’s property values conform to some type.
オブジェクトのプロパティ毎に型を検証できる。
makotot
makototas const type assertions can also be used to modify types. But those add readonly to all array and object types, which also might not be what you want
as constはすべてのobjectとarrayをreadonlyに。
makototTypeScript's default type inference for objects defaults to inferring primitive values for types, rather than literals.
デフォルトのオブジェクトに対する型推論だと、リテラル型ではなくプリミティブ型
makotot明示的に型アノテーションでも、ユニオンが型狭められてないことで開発者には直観的とはいえない
makototTypeScript 4.9's new
satisfiesoperator introduces a happy compromise between:annotations and the default type inference.
satisfiesは型推論と明示的な型アノテーションの間を埋めるものになる？
makototIn other words,
satisfiesmakes sure a value's type matches some type shape, but doesn't widen the type unnecessarily.
satisfiesはある型の形状にマッチすることを検証できて、不要なwidenをしない。
makotot型アノテーションだとユニオンになるものが、satisfiesだとリテラル型になる
interface Vibe {
mood: "happy" | "sad";
}
const vibe = {
mood: "happy",
} satisfies Vibe;
vibe.mood;
// 型が"happy"になる
makototit ensures that a type has all the required properties and methods of a specific interface.
特定のインターフェースに必須のプロパティとメソッドを全て持っていることを検証できる。
makototHaving to always validate whether it is a string can be frustrating and cumbersome. This is where the
satisfiesoperator comes in.
従来のtsだとunion型で都度値をチェックする処理が必要で面倒だったけど、satisfiesだとそれが解消される
makototWe can also use the
satisfiesoperator to tell the TypeScript compiler that it’s OK for an object to include only a subset of the givenkeysbut not accept others.
オブジェクトのキーに制約をかけることができる
makototSimilar to property name constraining, with the exception that in addition to restricting objects to only contain specific properties, we can also ensure that we get all of the
keysusing thesatisfiesoperator.
オブジェクトの全てのキーが欠落していないかのチェックもできる
makototThe
satisfiesoperator is not only capable of restricting the names of properties in an object, but it can also restrict the values of those properties.
オブジェクトのキーだけではなく値にも制限をかけられる。
makotot
makototWhen using colon annotation, the type supercedes the value. This means that if you declare a wider type (such as
Record) and then try to assign and access a narrower value, typescript will not help you.
コロンアノテーションで広めに型定義したら、狭めに値を扱いたいケースでtsの助けはない。
makototThe
satisfieskeyword is a way to say "this value satisfies this type".
satisfiesは、ある値がある型を満たしているという型定義。
makototThis is useful when you want to ensure a value is of the correct type, while keeping it as narrow as possible.
型をなるべく狭めつつ、その型に当てはまる値であることを確かなものとしたいときに便利。
makotot
satisfiesshould not be your default. It's for handling edge cases
常にsatisfiesを使えば良いということはなく、エッジケースでの利用に留めるもの。
ユースケースとして言及してるのは
https://zenn.dev/link/comments/03a76fe853911e と同じ？
makotot
シナリオ
makototSafe Upcast
The safest workaround is to have a dummy function,
function up<T>(arg: T): T
安全に型をアップキャストするならダミー関数作ることに。
makototProperty Name Constraining
We might want to make a lookup table where the property keys must come from some predefined subset, but not lose type information about what each property's value was:
オブジェクトのプロパティ名に制約をかけつつ各プロパティの型情報を保つ方法がない？
makototProperty Name Fulfillment
Same as Property Name Constraining, except we might want to ensure that we get all of the keys:
すべてのプロパティが欠けてないことを保証する方法がない？
makototProperty Value Conformance
This is the flipside of Property Name Constraining - we might want to make sure that all property values in an object conform to some type, but still keep record of which keys are present:
オブジェクトの各プロパティ値がある型に一致することを確かめたい？
makototEnsure Interface Implementation
We might want to leverage type inference, but still check that something conforms to an interface and use that interface to provide contextual typing
型推論を活かしつつ、インターフェイスを満たすかチェックしたい？
makototOptional Member Conformance
オプショナルメンバーの整合性に柔軟性が足りない？
makototOptional Member Addition
オプショナルメンバーの追加に柔軟性が足りずエラー扱いになる？
makototContextual Typing
Type inference also works in “the other direction” in some cases in TypeScript. This is known as “contextual typing”.
makototこのissueで取り上げられているユースケースについてのplayground