🍓
TypeScriptのオブジェクト（クラス以外）を理解する
こんにちは、小学1年生のときサッカーを始めた人です。
Railsバックエンドエンジニアを1年程度をやっており、最近は個人開発のためにフロントエンド周りの勉強をしています。
はじめに
弊社では先日発売された 「プロを目指す人のためのTypeScript入門」 の輪読会が現在開催されています。私は、3.1 オブジェクトとは の輪読当番になり、せっかくなのでzennの記事にまとめることにしました。
本の丸パクリは避けつつも、輪読担当として流れには沿って再まとめ(？)できればと思います。
👇2.5 基本的な制御構文も再まとめ(？)してます。
オブジェクトの概要
TypeScriptでは 連想配列 と呼ばれる。
他の言語だと「辞書(dictionary)」や「ハッシュ」と呼ばれていることもある。
例
基本的な構文
const obj = {
//プロパティ名： 式,
foo: 123,
bar: "Hello, world!"
};
プロパティアクセス（オブジェクトの中身の取り出し）
obj.foo // 123
obj.bar // "Hello, world!"
オブジェクトリテラル
{...}の部分はオブジェクトリテラルと呼ばれる式、ここの{}はブロックではない
基本
知らなかったこと
- オブジェクトリテラルの最後の要素の後ろにもカンマをつけれる
const obj = {
foo: 123,
//最後だけどカンマをつけれる
bar: "Hello, world!",
};
-
プロパティ名：変数名の要素でプロパティ名と変数名が一致していた場合の省略気泡がある。
const name = "John";
const obj = {
name,
bar: "Hello, world!",
};
オブジェクト（クラス以外）の機能について
プロパティ名の指定方法
- 識別子以外にも 文字列リテラルを使える。
ただし、値の取り出しは識別子の時のようにobj.fooではできず、obj["foo"]で値を取り出す。
const obj = {
"foo": 123,
"bar bar": "Hello, world!"
};
知らなかったこと
- プロパティ名を動的に決めれる（計算されたプロパティ（computed property name））
const propName = "foo"
const obj = {
[propName]: 123
};
プロパティアクセス：値の取得と代入
知らなかったこと
- constで定義したオブジェクトのプロパティの中身は書き換え可能(それが嫌なら
readonlyを使う)
const user = {
name: "uhyo",
age: 25,
}
user.age = 26;
スプレット構文
- オブジェクトのプロパティをコピーできる
const obj1 = {
bar: 456,
baz: 789,
}
const obj2 = {
foo: 123,
...obj1,
}
オブジェクトの複製について気をつけたいこと
- 以下のように単純な変数への代入だと、実体は変数同士(fooとbar)で共通になっている
const foo = { num: 1234 };
const bar = foo;
bar.num // 1234
bar.num = 0;
foo.num; //0
- 実体を分けたい場合は、スプレッド構文でオブジェクトのプロパティをコピーできる(ネストしたオブジェクトは上と同様の問題が起こるので工夫が必要)
const foo = { num: 1234 };
const bar = {...foo};
bar.num // 1234
bar.num = 0;
foo.num; //1234
まとめ
「プロを目指す人のためのTypeScript入門」 を見ながらオブジェクト（クラス以外）の基本的なところについてまとめました。
今までなんとなくでやっていたところや、知らなかった便利機能も発見できたので良かったです。
Discussion