TypeScriptでReactを構築するときに知っておきたいこと

TypeScriptでReactを構築するときに知っておきたいこと

どうも、ぽっぽです。

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;

Specific1Specific2Object型です。

compositionで型を合成することが出来ます。union型は、Specific1またはSpecific2のどちらかのObjectになります。Specific1keyを定義したらSpecific2の一部または全部のkeyを持っても良いみたいです。

Intersection型は、Specific1Specific2のすべてのkeyを持つ型になります。

// casting
let choose1 = <Specific1>{ common: 5 };
choose1.bar = 1
console.log('choose1',choose1)

キャストはコンパイラーにプログラマーが型をあとから教える仕組みです。

Spread Operator

Spread OperatorObjectを操作するときに便利な機能です。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)

poのコピーです。コピーした後にコピー元の値を変更しても影響ありません。
qoを代入しました。=を使っています。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]

オブジェクトまたは配列のプロパティの一部を切り出す方法です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

先頭に戻る