今日はTypeScriptのオブジェクトの書き方について説明します。
前回までの記事に沿って説明をしているので是非、今までの記事を確認お願いします。
JavaScriptのオブジェクト
JavaScriptのオブジェクトはダイナミックです。つまり、下記のようなコードが実行でき、コードが実行される中で形を変え、キーを増やしたりすることができます。
let user = { id: 1 };
user.name = 'Yoshi'
//JSではこのようにnameキーを追加することができます。
//TypeScriptだと下記のようなエラーが出ます。
//Property 'name' does not exist on type '{ id: number; }'.ts(2339)
TypeScriptのオブジェクト
ではTypeScriptのオブジェクトを作成してみましょう。
let user: {
id: number;
name?: string;
} = { id: 1 };
user.name = "Yoshi";
このようにオブジェクト内にnameのキー、バリューがない場合はエラーがでるのでname?のようにnameがあったらストリングと指示してあげます。
もしくは下記の様にデフォルトのバリューを与えてもOKです。
let user: {
id: number;
name: string;
} = { id: 1, name: "" };
user.name = "Yoshi";
read onlyの値
オブジェクト内のidなどは変更することはありませんね。そのような場合でTypeScriptでreadonlyに設定することができます。
let user: {
readonly id: number;
name: string;
} = { id: 1, name: "" };
user.name = "Yoshi";
user.id = 2;
//Cannot assign to 'id' because it is a read-only property.ts(2540)
このようにreadonlyの値を変更しようとするとエラーが表示されるようになります。
オブジェクトに関数を入れる場合
では次にオブジェクトに関数の値を入れてみます。
let user: {
readonly id: number;
name: string;
promoted: (date: Date) => void;
} = {
id: 1,
name: "",
promoted: (date: Date) => {
console.log(date);
},
};
例のようにpromoptedの値に関数が入ることを宣言しています。ここではdateのキーに対してJavaScriptのDateオブジェクトが入ることを指示しています。さらにreturnで返す値がないのでvoidとしています。実際のid:1のオブジェクトでは単純にコンソールにDateオブジェクトを表示させる関数を格納していることが分かりますね。
このままだと見づらいので次回以降にもっと洗練された書き方を紹介します。
お疲れ様でした。