フロントエンドプロジェクトに対する TypeScript の漸進的な導入戦略-jsチュートリアル-php.cn

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 サイトの他の関連記事を参照してください。

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

TypeScript の紹介

tsconfig.json のセットアップ

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

型定義の使用

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

2. 自動型推論

3. カスタム型定義

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

5. 型定義の制限

IDEの統合

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

型チェックの強化

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

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