オブジェクトから型を生成する
多くの言語では型による構造体、オブジェクトの定義をしてからコーディングが始まりますが、元がJavaScriptであるTypeScriptにはそのような決まりがないことも多々あります。

一般的な型を先に決めるプログラミング

多くの言語ではその型が何かを決めてから、その型に属するオブジェクトを決めます。次の例はTypeScriptの例ですが、他の言語に当てはめても問題なく受け入れられると思います。
1
type Account = {
2
accuontName: string;
3
password: string;
4
age: number;
5
plan: 'Free' | 'Standard' | 'Premium';
6
};
7
8
const account: Account = {
9
accountName: 'yyts',
10
password: 'ccbyncsa30',
11
age: 80,
12
plan: 'Standard'
13
};
Copied!
すでにJavaScriptの資産があるプロジェクトにおいては表立って型などなく、そのため Account といった型は存在せず代入式の const account のみが存在していることでしょう。そんなときはこの const account をTypeScriptに変換してできるだけ近い形で型を作ることができます。

typeof

この typeof はJavaScriptのものではなく、TypeScriptの typeof です。これを実際に動作している変数に使ってみるとその変数をTypeScriptはどのような型と認識しているのかがわかります。
1
const account = {
2
accountName: 'yyts',
3
password: 'ccbyncsa30',
4
age: 80,
5
plan: 'Standard'
6
};
7
8
type Account = typeof account;
Copied!
するとこの変数から生成された型 Account は次のようになります。
1
type Account = {
2
password: string;
3
accountName: string;
4
plan: string;
5
age: number;
6
};
Copied!
plan が意図するユニオン型にはなりませんが、それなりに近い型を得ることができました。

プロパティを定数値で取得したい場合

プロパティを定数値で取得したい場合はオブジェクトに as const をつけます。
1
const account = {
2
accountName: 'yyts',
3
password: 'ccbyncsa30',
4
age: 80,
5
plan: 'Standard'
6
} as const;
7
8
type Account = typeof account;
Copied!
Account は次のようになります。
1
type Account = {
2
readonly password: 'ccbyncsa30';
3
readonly accountName: 'yyts';
4
readonly plan: 'Standard';
5
readonly age: 80;
6
};
Copied!

特定のプロパティだけを定数値で取得したい場合

これでは型の制約が強力すぎて他の値が代入できないので、もう少し柔軟にします。たとえば plan だけがユニオン型になるようにしたければ plan の右に希望の型を書いてあげればそれでその型になります。
1
const account = {
2
accountName: 'yyts',
3
password: 'ccbyncsa30',
4
age: 80,
5
plan: 'Standard' as 'Free' | 'Standard' | 'Premium'
6
};
7
8
type Account = typeof account;
Copied!
Account は次のようになります。
1
type Account = {
2
password: string;
3
accountName: string;
4
plan: 'Free' | 'Standard' | 'Premium';
5
age: number;
6
};
Copied!
最終更新 12d ago