TypeScript基礎

TypeScriptはMicrosoftによって開発されたAltJSの言語(JavaScriptの拡張版)。 型チェックなどの機能があるためコンパイルに時間がかかる特徴がある。 JavaScriptとは異なる言語ではなく、型に関すること以外のコードについては通常のJavaScriptと同様の構文を使って記述することができる。

名称	URL
typeScript 公式ドキュメント	https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
サバイバルTypeScript	https://typescriptbook.jp/
React TypeScript Cheatsheet	https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/
TypeScriptチートシート	https://chott-works.com/tips/TypescriptCheatSheet

1. TypeScriptの環境構築

1.1. TypeScriptの基本的な使用方法

インストールと確認(使用にはNode.js必須)

npm install -D typescript //開発モードでのinstall

npx tsc -v

npx tsc --init //tsconfig.jsonの作成

tsファイルのコンパイル

tsc ファイル名

tsファイルから型定義ファイル(.d.ts)の作成

tsc -d ファイル名

1.2. tsconfig.json

各設定パラメータ

名称	詳細
compilerOptions	コンパイルする際のオプションを記述するブロック
target	どのバージョンのJavScriptに出力するか指定可能(ES2021, ES2020, ES2019, ES2018, ES2017...)
lib	使いたいtargetには使いたい機能がないが使用したい場合にlibオプション指定で使用可能, セットでtargetも明記する必要あり

設定例

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */

    /* Language and Environment */
    "target": "ES2022",
    /* "lib": ["DOM", "ES2021"], */

    /* Modules */
    "module": "CommonJS",
    "moduleResolution": "Node",
    "resolveJsonModule": true,

    /* Emit */
    "sourceMap": true,
    "outDir": "./dist",
    "noEmitOnError": true,

    /* Interop Constraints */
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,

    /* Completeness */
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "scripts/**/*.ts"],
  "exclude": ["src/**/*.test.ts", "**/node_modules/**", "dist"]
}

1.3. 様々な使い方

ts-nodeも合わせた使い方

TypeScriptとts-nodeのインストール

npm install --save typescript ts-node

webpackを含めた使い方

この場合、TypeScriptをwebpackで処理するために「ts-loader」も一緒にインストールします。

ts-loader: JSをTSにトランスコンパイルするパッケージ

npm install -D webpack webpack-cli typescript ts-loader

webpackを使いやすいようにpackage.jsonのscriptsに自前のビルドコマンドを記述すると便利です。

{
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  "devDependencies": {
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },
  "private": true
}

typescriptsの設定ファイルtsconfig.json

webpack+reactの使い方

初めに webpack関連のパッケージとtypeScript, ts-loaderをインポート

npm install -D webpack webpack-cli typescript ts-loader

次に「react」「react-dom」モジュールもインストールします。 型定義ファイルも欲しいので「@types/react」「@types/react-dom」も指定します。

npm i -S react react-dom @types/react @types/react-dom

tsconfig.jsonのjsxオプションにはreactを指定します。

{
  "compilerOptions": {
    // 厳密モードとして設定
    "strict": true,
    // ソースマップを有効化
    "sourceMap": true,
    // TSはECMAScript 5に変換
    "target": "ES5",
    // TSのモジュールはES Modulesとして出力
    "module": "ES2015",
    // JSXの書式を有効に設定
    "jsx": "react",
    "moduleResolution": "node",
    "lib": [
      "ES2021",
      "DOM"
    ]
  }
}

webpack.config.jsのrulesやresolveの部分で拡張子.tsxを指定します。

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development",

  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: "./src/main.tsx",
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js"
  },
  module: {
    rules: [
      {
        // 拡張子 .ts もしくは .tsx の場合
        test: /\.tsx?$/,
        // TypeScript をコンパイルする
        use: "ts-loader"
      }
    ]
  },
  // import 文で .ts や .tsx ファイルを解決するため
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  // ES5(IE11等)向けの指定（webpack 5以上で必要）
  target: ["web", "es5"],
};

このように設定するとnpm run buildコマンドを入力すると、srcフォルダーに配置したTSXファイルがコンパイルされ、distフォルダーにmain.jsファイルが出力されます。

2. TypeScriptの基本文法

2.1. 値・型・変数

let, const, varの使用は通常通り。

宣言例

let Smaple :boolean = false;

型一覧

型	説明	使用例
boolean	True/false(真偽値)の型
number	全ての数値型(浮動小数点やBinaryなどBigintも含む)
string	文字列型
array	値の配列	let list: Array<number> = [1, 2, 3];
tuple	値の中身は同じである必要のない配列(数字,文字など)	let x: [string, number];
enum	列挙型
unknown	プロパティ、メソッドへのアクセスができない型(何も入る)
any	TypeScriptが型のチェックを放棄した型(何でも入る)
void	型を全く持たない型(値を返さない関数の戻り値としてよく使用)
null	下記説明より
undefined	下記説明より
never	決して発生しない値の型(関数式やアロー関数式で常に例外を投げるものや、絶対に返さないものに使う)
object	Jsのオブジェクト

unknownとany

違いは以下リンク https://typescriptbook.jp/reference/statements/any-vs-unknown

nullとundefined

デフォルトではnull と undefined はnumber のようなものに null と undefined を代入します。

-strictNullChecks フラグを使用すると、null と undefined は unknown、any、およびそれぞれの型にのみ代入可能です (ただし、undefined は void にも代入可能です)。 これにより、多くの一般的なエラーを回避することができます。

neverの使用例

// 関数の戻り値は到達可能な終点を持っていてはいけない
function error(message: string): never {
  throw new Error(message);
}

// 推定された戻り値の型は決してありません。
function fail() {
  return error("Something failed");
}

// 関数の戻り値は到達可能な終点を持っていてはいけない
function infiniteLoop(): never {
  while (true) {}
}

型定義(type)

typeは型エイリアスと呼ばれ文字通り型定義を扱うものです。 オブジェクトや配列の型を定義できます。

typeはintefaceと違い無名で作られた型に参照のため別名をを与えるというのに近い。

下記例ではtypeで定義した型をuseStateで使用しています。

const [todos, setTodos] = useState<SampleType[]>([]);

type SampleType = {
  name: string;
  age: number;
  isAdult: boolean;
};

型定義(inteface)

intefaceはオブジェクトとクラスの型だけに定義が可能なもの。 型自体に名前をつけることができる特徴がある。

また拡張(変数を追加)することも可能。

詳しくはこちらの記事

interface Member {
  nickName: string;
  isHuman: boolean;
  level: number;
}

let apple: Member = {
  nickName: "りんご",
  isHuman: true,
  level: 0
};

apple.isHuman = "yes" //Type 'string' is not assignable to type 'boolean'

2.2. 関数の型定義

いくつか例を記載します。

2.2.1. void(戻り値のない関数)

function log(message): void {
    console.log(message);
}

戻り値を返す関数

function add (a: number, b: number): number {
  return a + b
}

2.3. 型定義ファイル(.d.ts)に関して

hogehoge.d.ts (hogehogeは任意名)に型を定義して他のtsファイルで読み込み使うことができます。

定義にはdeclareをつける

.tsから型定義ファイル(.d.ts)を作る場合

tsc -d ファイル名

3. TypeScript向けのパッケージ

3.1. zod

zodはTypeScript First なバリデーションライブラリです。

installの際はtsのバージョンを要確認(4.5以上)

npm install zod

公式ドキュメント: https://zod.dev/

3.2. Prisma

Prisma は、Node.jsでORMを実装するためのパッケージ。

npx prisma

公式ドキュメント: https://www.prisma.io/docs

4. React特有の型

React.FCが今後非推奨なのでそれ以外の方の定義方法を書く。

基本はここベース