satisfiesメモ

makotot

another way to assign types to values.

値に型を割り当てる方法

makotot

まず型割り当ての復習。

値の型をコロンに続けて明示的にアノテーション

const obj: Record<string, string> = {};

obj.id = "123";

値がアノテーションの型そのものであり、その型のみを許容。

makotot

let id: string | number = "123";

if (typeof numericId !== "undefined") {
  id = numericId;
}

型をユニオンでwidenしてアノテーションもできる。

makotot

エッジケースの欠点がある。

When you use a colon, the type BEATS the value.

コロンによる型アノテーションによって、値を型が打ち負かす。

makotot

In 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;

makotot

When you use satisfies, the value BEATS the type.

satisfiesであれば型を値が打ち負かす

makotot

This means it infers the narrowest possible type, not the wider type you specify

可能な限り最も狭い型を推論する

makotot

asによる型定義は嘘になり得る

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;

makotot

There’s one last way to give a type to a variable:

Don’t.

型付けするもう1つの方法は型定義しないこと。推論を効かせる。

makotot

colon annotations

satisfies

as annotations

not annotating and letting TS infer it

まとめると値に型を指定する方法は、コロンに続けて型指定、satisfies、as、型を書かずに推論を効かせる、の4通り

makotot

But most of the time, when you want to assign a type to a variable you probably want the type to be wider.

変数に型割り当てるなら、大抵広めに型付けしておきたいかもしれない

makotot

The 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

satisfies と as const を組み合わせると、2つのメリットを組み合わせられます。

satisfies 型: 型がマッチするかどうかをチェックできる

as const: 値が widening しない

makotot

活用事例のts playground

https://www.typescriptlang.org/play?#code/KYDwDg9gTgLgBAYwgOwM7wIZjANWFVASxTgF44AiARgDoAGGgJgrg1URXTlQxkNQBmhYOwAGAEgDeyAK4BbAEb4AvjSmzFKtdPlKoy0QG4AUMdCRYHNPHwYAchjkiycANoVAcGaBumwoAaSoDkmoDG1n6UgLRmgDEqoRSAznqACEbRgCdyUQC6rOxI1ty8-ELOUMAYACYoADYAntwwUITIAOauKSZm4NDwmVwyUKUAMvzw5JLGcKzYpcAAXJQAFjAwYKgTAPRLAO7rNFhg4zRIcksAVmBLfsNwdRAQdeNTFLPziyvrqzQXVzt7J75n5RjTl7d7gtlmsNr9-hBdpCjl9jMp0lYuDw+IJhOwhiNXABrYDlKboGr1FJTURAx5LKQE2p1Axw5rmNqI+DoXgyVB9LjkVxnDEjKqsxaUMBQCAIEREeqnPlwPgwG6UQA68oBbS0AtHIUM7Kb4jXkjFkwNm3BAYZBi0pSvmy+UUQC1DIBjhkAzwyAboZANcM6pGmp5Z11MAFhogcm2wBgwCK5pGlsmlEAMdqAMLk3XAPWk2Ezsii8uwCsUypVeXqDVVCXUtTLCHLI1T6nDGoYgA

makotot

The new satisfies operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression.

式の結果の型を変更することなく、式の型を検証できるもの。

makotot

提案のissue

makotot

Maybe 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

as 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に。

makotot

TypeScript's default type inference for objects defaults to inferring primitive values for types, rather than literals.

デフォルトのオブジェクトに対する型推論だと、リテラル型ではなくプリミティブ型

makotot

明示的に型アノテーションでも、ユニオンが型狭められてないことで開発者には直観的とはいえない

makotot

TypeScript 4.9's new satisfies operator introduces a happy compromise between : annotations and the default type inference.

satisfiesは型推論と明示的な型アノテーションの間を埋めるものになる？

makotot

In other words, satisfies makes 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"になる

makotot

it ensures that a type has all the required properties and methods of a specific interface.

特定のインターフェースに必須のプロパティとメソッドを全て持っていることを検証できる。

makotot

Having to always validate whether it is a string can be frustrating and cumbersome. This is where the satisfies operator comes in.

従来のtsだとunion型で都度値をチェックする処理が必要で面倒だったけど、satisfiesだとそれが解消される

makotot

We can also use the satisfies operator to tell the TypeScript compiler that it’s OK for an object to include only a subset of the given keys but not accept others.

オブジェクトのキーに制約をかけることができる

makotot

Similar 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 keys using the satisfies operator.

オブジェクトの全てのキーが欠落していないかのチェックもできる

makotot

The satisfies operator is not only capable of restricting the names of properties in an object, but it can also restrict the values of those properties.

オブジェクトのキーだけではなく値にも制限をかけられる。

makotot

When 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の助けはない。

makotot

The satisfies keyword is a way to say "this value satisfies this type".

satisfiesは、ある値がある型を満たしているという型定義。

makotot

This is useful when you want to ensure a value is of the correct type, while keeping it as narrow as possible.

型をなるべく狭めつつ、その型に当てはまる値であることを確かなものとしたいときに便利。

makotot

satisfies should not be your default. It's for handling edge cases

常にsatisfiesを使えば良いということはなく、エッジケースでの利用に留めるもの。

ユースケースとして言及してるのは
https://zenn.dev/link/comments/03a76fe853911e と同じ？

makotot

シナリオ

makotot

Safe Upcast

The safest workaround is to have a dummy function, function up<T>(arg: T): T

安全に型をアップキャストするならダミー関数作ることに。

makotot

Property 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:

オブジェクトのプロパティ名に制約をかけつつ各プロパティの型情報を保つ方法がない？

makotot

Property Name Fulfillment

Same as Property Name Constraining, except we might want to ensure that we get all of the keys:

すべてのプロパティが欠けてないことを保証する方法がない？

makotot

Property 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:

オブジェクトの各プロパティ値がある型に一致することを確かめたい？

makotot