フロントエンド プロジェクトに対する TypeScript の漸進的な導入戦略

フロントエンド プロジェクトで TypeScript を段階的に採用する戦略には通常、次のものが含まれます。

TypeScript の紹介

2 つの数値の合計を計算する関数を含む、単純な JavaScript モジュール utils.js があるとします。

// utils.js
export function add(a, b) {
    return a + b;
}

まず、ファイル拡張子を .ts に変更し、型アノテーションの追加を段階的に開始します。

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

tsconfig.json のセットアップ

プロジェクトのルート ディレクトリに tsconfig.json を作成して、TypeScript コンパイラを構成します。

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

詳細設定項目

パス: モジュールをインポートする際のパス管理を容易にするためのパス エイリアス設定に使用されます。

"paths": {
    "@components/*": ["src/components/*"]
}

baseUrl: プロジェクトのベース ディレクトリを設定します。パスとともに使用すると、より簡潔なインポート パスを提供できます。

    "baseUrl": "./src"

resolveJsonModule: JSON ファイルの直接インポートを許可します。

    "resolveJsonModule": true

lib: ECMAScript、DOM など、プロジェクトで使用されるライブラリ ファイル コレクションを指定します。

    "lib": ["es6", "dom"]

jsx: プロジェクトで JSX 構文を使用する場合、このオプションを設定する必要があります。

    "jsx": "react-jsx"

継承された構成

プロジェクトの構造が複雑な場合は、異なるディレクトリに異なる構成が必要になる場合があります。 extends プロパティを使用して、基本的な tsconfig.json を継承できます:

// tsconfig.app.json in a subdirectory
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
    // You can override or add application-specific compilation options here
    },
    // You can add or modify include and exclude here
}

TypeScript をビルド プロセスに統合する

TypeScript をビルド プロセスに統合するには、通常、ビルド ツール (Webpack、Rollup、Parcel など) の構成を調整する必要があります。そして、構成ファイルに TypeScript 処理ルールを追加します。

npm install --save-dev typescript ts-loader webpack webpack-cli

webpack.config.js 構成ファイル

const path = require('path');

module.exports = {
  entry: './src/index.ts', // Your entry file, usually index.ts
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // Add .ts and .tsx extensions
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/, // Exclude the node_modules directory
      },
    ],
  },
  devtool: 'source-map', // Generate source map for easy debugging during development
};

tsconfig.json で、Webpack の出力ディレクトリと一致するように正しい outDir が構成されていることを確認してください:

{
  // ...
  "outDir": "./dist",
  // ...
}

これで、コマンド ラインから次のコマンドを実行してビルド プロセスを開始できます。

npx webpack

これにより、Webpack と ts-loader を使用して TypeScript ソース コードが JavaScript にコンパイルされ、dist ディレクトリに出力されます。

npm スクリプトを使用している場合は、package.json にビルド スクリプトを追加できます。

{
  "scripts": {
    "build": "webpack"
  }
}

次に、npm run build 経由でビルドを実行します。

型定義の使用

プロジェクトでサードパーティのライブラリを使用する場合は、@types/lodash などの対応する型定義パッケージを必ずインストールしてください。公式な型定義のないライブラリの場合は、コミュニティによって提供される定義を試すか、独自の宣言ファイルを作成できます。

1. タイプ定義パッケージをインストールします。

最も一般的なライブラリには、対応する型定義パッケージがあり、通常は @types 名前空間にあります。たとえば、プロジェクトで lodash を使用している場合、次のコマンドを実行してそのタイプ定義をインストールできます。

// utils.js
export function add(a, b) {
    return a + b;
}

または糸を使用します:

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

2. 自動型推論

型定義をインストールすると、TypeScript コンパイラーはこれらの型定義を自動的に認識して使用します。これらをコード内で明示的にインポートする必要はなく、プロジェクト内で通常どおりライブラリを参照するだけです。

3. カスタム型定義

公式の型定義がないライブラリを使用する場合、または公式の型定義が不完全な場合は、独自の型宣言ファイル (.d.ts) を作成できます。通常、このファイルはライブラリの JavaScript ファイルと同じ場所、または types ディレクトリまたは @types ディレクトリに配置する必要があります。

たとえば、customLib というライブラリがあり、そのメイン ファイルがcustomLib.js であるとします。 CustomLib.d.ts ファイルを作成してその型を宣言できます:

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

コード内で、TypeScript はこれらの型を認識して使用します。

4. コミュニティタイプの定義

コミュニティが非公式の型定義を提供する場合があります。 DefinitelyTyped リポジトリ (https://github.com/DefinitelyTyped/DefinitelyTyped) で見つけるか、GitHub で @types/library-name を検索してください。

5. 型定義の制限

型定義はコードの品質を向上させるのに役立ちますが、すべてのライブラリが完全な型定義を提供しているわけではなく、ライブラリの実際の動作と完全に一致していない場合もあります。この場合、コード内で any type または // @ts-ignore コメントを使用して、特定の型チェックをスキップする必要がある場合があります。

IDEの統合

コード補完、型チェック、その他の機能を利用するには、IDE (VSCode など) に TypeScript プラグインがインストールされていることを確認してください。

他のモジュールを段階的に移行する

時間の経過とともに、他の JavaScript モジュールを TypeScript に徐々に変換できます。たとえば、app.js があるとします。これも同様に app.ts に変換して型アノテーションを追加できます。

• app.js の名前を app.ts に変更します。このステップは、モジュールが正式に TypeScript 環境に入ったことを示します。

• app.ts を開き、変数、関数パラメーター、戻り値などに型注釈の追加を開始します。これにより、TypeScript コンパイラーが型チェックを実行し、潜在的な型エラーを減らすことができます。
  

// utils.js
export function add(a, b) {
    return a + b;
}

• 複雑なデータ構造の場合は、コードの可読性と保守性を向上させるために、インターフェイス (インターフェイス) または型エイリアス (型エイリアス) を使用して型を定義することを検討してください。

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

型チェックの強化

チームが TypeScript に慣れたら、tsconfig.json で strictNullChecks などのより厳密な型チェック オプションを徐々に有効にできます。

以上がフロントエンド プロジェクトに対する TypeScript の漸進的な導入戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。