🐣 React実践の教科書 P204〜215
ENJIN React.js
作成日： 2022/01/07
3

今日やったこと

  • 「モダンJavaScriptの基本から始める React実践の教科書」 P204〜215
    • 8-1 TypeScriptの基本

学習メモ

基本的な型の種類

  • : string
  • : number
  • : boolean
  • : Array<型名> または : 型名[]で指定
    • <>の中に型を指定する方法をGenerics（ジェネリクス）と呼ぶ
  • : null
    • 単体で使用することはあまりないが、「文字列または null」のようなケースで使用したりする
  • : undefined
    • 単体で使用することはあまりないが、「文字列または undefined」のようなケースで使用したりする
  • : any
    • TypeScriptを導入している意味がなくなるのでなるべく避けたい型指定

関数の型指定

  • : void
    • 関数内で何もreturnしていなければ自動的にvoid型になるが、明示的にvoidを指定しておくと関数内でreturn文を記述するとエラーにすることができる

オブジェクトの型

  • : { : 型名, : 型名 … } で指定
    • 指定された型以外の変数をプロパティに設定しようとしたり、オブジェクトでない値を設定しようとするとエラーになる
const obj: { str: string, num: number } = {
	str: "A",
	num: 10,
};

obj = 10; // NG

複合的な型

  • intersection（交差）型
    • 複数の型を合体して新たな型定義を作成できるもの
    • &で複数の型を指定することで使用する
const obj: { str: string } & { num: number } = {
	str: "A",
	num: 10,
};
obj.str = "20"; // OK
obj.num = "10"; // NG

  • 以下のコードで出てくるtype構文は、TypeScriptで型を定義するための構文

    • 型定義を変数化して使い回すことで毎回複雑な方を書く必要がなくなり、型情報を一括管理できる

  • 以下のように、同じ型定義のプロパティ（str: string）が存在する場合もマージされて問題なく機能する

type TypeA = {
	str: string,
	num: number,
};
type TypeB = {
	str: string,
	num: boolean,
};
type TypeC = TypeA & TypeB;

const obj: TypeC = {
	str: "A",
	num: 10,
	bool: false,
};
  • union（合併、共同体）型
    • 複数の方を許容する型定義
    • 「文字列が設定されることもあるし、数値が設定されることもある」といった仕様の場合などで活用できる
// 型 | 型 で指定
let vali: string | number = "";

Generics（ジェネリクス）

  • 型の定義を使用時に動的に変更できる
type CustomType<T> = {
	val: T;
}
  • 型のあとに<T>のように型の変数のようなものを定義しておくことでval:Tのように動的にプロパティvalの型を扱うことができる
  • Tというのは別に何でも良く、大文字1文字で表されるのが一般的
    • TypeのTという意味でTがよく用いられるが、SでもUでも問題ない

CustomTypeの使用方法

const strObj: CustomType<string> = { val: "A" };

  • 使用する際は<>の中に任意の型名を指定する

  • ジェネリクスは使用する側が任意に型を指定して自由に扱うことができる性質上、ライブラリの型定義などでは良く用いられる

  • Reactでも useState で定義する State に型をつけるときは以下のようにジェネリクスを使うことになる

const [str, setStr] = useState<string>("");

// string以外は使用できない
setStr(10); // エラー

設定ファイル（tsconfig）

  • TypeScriptは導入したら全てのプロジェクトに同一のルールを適用するのではなく、様々な細かい設定をプロジェクトに合わせてカスタマイズできるようになっている
    • このプロジェクト毎の細かい設定を司るのがtsconfig.json

$ npx create-react-app <project-directory> --template typescript で作成した時のデフォルトのtsconfig.jsonは以下のようになっている

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
  • target
    どのバージョンのJSにコンパイルするか
  • lib
    • targetに指定しているバージョンに存在しない機能を使用したい場合はlibに追記する
    • esnextは最新のJS記法を利用するために必要
    • dom と dom.iterable はReact開発をする上では必要
  • module
    • JSはバックエンドで使用することもあり、フロントエンドで使用する場合とモジュールパターンが異なる
      • フロントエンドで使用する場合は module に esnext を指定しておく
      • バックエンドで使用する場合は module に commonjs を指定する
  • jsx
    • React開発では必要な設定
    • JSX構文がどのようにJavaScriptファイルに出力されるかを設定するもの
    • Reactのバージョン16まではreactを指定していたが、バージョン17でJSXの変換ロジックが変更になりそれに対する設定がreact-jsxとなる
  • strict
    • strictにはtrueかfalseを設定できる
    • 新規で開発する場合はtrueにしておくのがおすすめ
    • trueにすると、各項目がすべてtrueになる。各項目を個別にoffにすることも可能
    • 既存のJSプロジェクトをTypeScript化する際は、いきなり"strict": trueにするとエラーだらけになってしまうので、まずはfalseから始めて1項目ずつ対応していくのが理想

所感

TypeScriptの勉強に入りました。
数年前に本を読んで、良いものだなあとぼんやり思った記憶があります（使い方はほとんど忘れました…🐓）。
実務では必須の知識になるので、一通り学んでおきたいです。
Yuri Ishiguro