1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TypeScript: typeof, keyof [アウトプット全くしてこなかったのでアウトプットする002]

Last updated at Posted at 2022-02-27

あんまりわかっていないので調べました。

typeof

TypeScriptの"typeofは変数から型を抽出する型演算子です"。次は、変数pointにtypeof演算子を用いて、Point型を定義する例です。

const point = { x: 135, y: 35 };
type Point = typeof point;
// このPoint型は次のような型になります。

type Point = {
  x: number;
  y: number;
};

keyof

keyofは"オブジェクト型からプロパティ名を型として返す型演算子"です。たとえば、nameプロパティを持つ型に対して、keyofを使うと文字列リテラル型の"name"が得られます。

type Person = {
  name: string;
};
type PersonKey = keyof Person;
// 上は次と同じ意味です
type PersonKey = "name";

keyofは型に対して行う

type Colors = {
  red: 'red',
  blue: 'blue'
}

type ColorsKey = keyof Colors;

typeofは値に対して行う

const colors = {
  red: 'red',
  blue: 'blue'
}

type Colors = typeof colors;

keyof typeofをするとユニオンタイプになる

const colors = {
  red: 'red',
  blue: 'blue'
}
type Colors = keyof typeof colors;

image.png

ただColors.と打った時にサジェストが出てこない。

image.png

以下のようにするとサジェスト出てくる

const Colors = {
  red: 'red',
  blue: 'blue'
} as const;
type Colors = typeof Colors[keyof typeof Colors];
Colors.red

image.png

強くなりたい!!!!!!

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?