どうも、ぽっぽです。
GitHub – microsoft/frontend-bootcamp: Frontend Workshop from HTML/CSS/JS to TypeScript/React/Reduxで得た知識を紹介します。
Modules
歴史的にJavaScriptはブラウザに読み込ませるにはHTMLで<script>
タグを読み込ませていました。複数のJavaScriptを読み込ませる場合、個別に<script>
タグで読み込ませますが、どちらか一方が依存している場合、依存元を先に記述しなくてはなりません。書き順を把握しないとなりません。そこでモジュール化するためのライブラリが開発されてきました。
たくさんあるモジュール化のライブラリのなかで知っておきたいのは2つあります。
- commonjs – Node.jsのスタンダード
require()
関数を使って読み込むrequire()
はプログラムの過程で動的に呼び出せる
- ESM(ECMAScript) – 言語レベルでサポート
- 静的に分析可能かつ同期的
import()
で読み込む、promiseを返す動的および非同期をサポート
TypeScript Type
Documentation · TypeScriptより、Handbookに詳細があります。特徴的なTypesを紹介します。
動作を確認するには、TypeScript Playgroundにソースをコピーして確認するとより理解が深くなります。
// Basic Types
let isDone: boolean = false;
let count: number = 6;
let color: string = 'blue';
let sky: string = `the sky is ${color}`;
// Function Types
type FibFn = (n: number) => number;
// Object Types
type Obj = {
[key: string]: string;
};
型を指定する場合、:
で区切って指定します。string型では、template string
が使えてバッククオート( ` )で囲むと${ expr }
で変数を展開します。
// Object with Specified Keys
type Specific1 = {
foo: string;
bar: number;
};
type Specific2 = {
address: string;
phone: number;
};
// composition
type TypeOfObj = {
foo: string;
bar: number;
obj1: Specific1;
obj2: Specific2;
};
// Get types by property
type Obj1Type = TypeOfObj['obj1'];
// union, intersection
type Union = Specific1 | Specific2;
type Intersection = Specific1 & Specific2;
Specific1
とSpecific2
はObject
型です。
composition
で型を合成することが出来ます。union
型は、Specific1
またはSpecific2
のどちらかのObject
になります。Specific1
のkey
を定義したらSpecific2
の一部または全部のkey
を持っても良いみたいです。
Intersection
型は、Specific1
とSpecific2
のすべてのkey
を持つ型になります。
// casting
let choose1 = <Specific1>{ common: 5 };
choose1.bar = 1
console.log('choose1',choose1)
キャストはコンパイラーにプログラマーが型をあとから教える仕組みです。
Spread Operator
Spread Operator
はObject
を操作するときに便利な機能です。Object
のコピーをします。コピーなんて=
で書けば簡単と思っていました。それは、大きな間違いでした。
let o = {
'name': 'Mike',
'blood': 'A',
'height': '170'
};
//oをコピー
const p = { ...o }
o.blood='O'
console.log('p is ', p)
//oを代入
const q = o
console.log('q is ', q)
q.blood='A'
console.log('o is ', o)
//oを一部変更してコピー
const r = {...o,blood:'B'}
console.log('o is ', o)
console.log('r is ', r)
p
はo
のコピーです。コピーした後にコピー元の値を変更しても影響ありません。
q
はo
を代入しました。=
を使っています。q
の値を変更すると、コピー元の値も変更されてしまいます。このような場合は思いも寄らなずに値が更新されてしまうのでエラーとなりえます。そうならないためにSpread Operator
があります。
const obj = { a: 1, b: 2, c: 3 };
// 同じ意味になります。
// <MyComponent a={obj.a} b={obj.b} c={obj.c} />
const rendered = <MyComponent {...obj} />;
ReactのProps
を一度に定義する事ができます。
Destructuring
const obj = { foo: 1, bar: 2 };
const { foo, bar } = obj;
// foo = 1, bar = 2
const arr = [1, 2];
const [foo, bar] = arr;
// foo = 1, bar = 2
オブジェクトまたは配列のプロパティを取得する簡潔な方法です。
const obj = { a: 1, b: 2, c: 3, d: 4 };
const { a, ...rest } = obj;
// a = 1, rest = {b: 2, c: 3, d: 4}
const arr = [1, 2, 3];
const [foo, ...bar] = arr;
// foo = 1, bar = [2, 3]
オブジェクトまたは配列のプロパティの一部を切り出す方法です。