Strategi penggunaan progresif TypeScript untuk projek hadapan

Strategi penggunaan TypeScript secara berperingkat dalam projek hadapan biasanya termasuk:

Memperkenalkan TypeScript

Jika kami mempunyai modul JavaScript ringkas utils.js, yang mengandungi fungsi untuk mengira jumlah dua nombor:

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

Mula-mula, kami menukar sambungan fail kepada .ts dan mula menambah anotasi jenis langkah demi langkah:

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

Menyediakan tsconfig.json

Buat tsconfig.json dalam direktori akar projek untuk mengkonfigurasi pengkompil 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
]
}

Item Konfigurasi Terperinci

laluan: Digunakan untuk konfigurasi alias laluan untuk memudahkan pengurusan laluan semasa mengimport modul.

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

baseUrl: Tetapkan direktori asas projek. Apabila digunakan dengan laluan, ia boleh memberikan laluan import yang lebih ringkas.

    "baseUrl": "./src"

resolveJsonModule: Membenarkan import terus fail JSON.

    "resolveJsonModule": true

lib: Menentukan koleksi fail perpustakaan yang digunakan dalam projek, seperti ECMAScript, DOM, dll.

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

jsx: Jika projek menggunakan sintaks JSX, pilihan ini perlu ditetapkan.

    "jsx": "react-jsx"

Konfigurasi diwarisi

Jika struktur projek anda rumit, anda mungkin memerlukan konfigurasi yang berbeza dalam direktori yang berbeza. Anda boleh menggunakan sifat extends untuk mewarisi tsconfig.json asas:

// 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
}

Integrasikan TypeScript ke dalam proses binaan

Menyepadukan TypeScript ke dalam proses binaan biasanya melibatkan pelarasan konfigurasi alat binaan (seperti Webpack, Rollup atau Parcel). Dan menambahkan peraturan pemprosesan TypeScript dalam fail konfigurasi.

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
};

Dalam tsconfig.json , pastikan anda telah mengkonfigurasi outDir yang betul untuk dipadankan dengan direktori output Webpack :

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

Kini anda boleh memulakan proses binaan dengan menjalankan arahan berikut daripada baris arahan:

npx webpack

Ini akan menyusun kod sumber TypeScript ke dalam JavaScript menggunakan Webpack dan ts-loader dan mengeluarkannya ke direktori dist.

Jika anda menggunakan skrip npm, anda boleh menambah skrip binaan pada package.json:

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

Kemudian jalankan binaan melalui binaan npm run.

Menggunakan definisi jenis

Jika anda menggunakan perpustakaan pihak ketiga dalam projek anda, pastikan anda memasang pakej definisi jenis yang sepadan, seperti @types/lodash. Untuk perpustakaan tanpa definisi jenis rasmi, anda boleh mencuba definisi yang disediakan oleh komuniti atau menulis fail pengisytiharan anda sendiri.

1. Pasang pakej definisi jenis:

Kebanyakan perpustakaan popular mempunyai pakej definisi jenis yang sepadan, biasanya terletak di ruang nama @types. Sebagai contoh, jika anda menggunakan lodash dalam projek anda, anda boleh menjalankan arahan berikut untuk memasang definisi jenisnya:

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

Atau gunakan Benang:

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

2. Inferens jenis automatik

Selepas memasang definisi jenis, pengkompil TypeScript akan mengecam dan menggunakan definisi jenis ini secara automatik. Anda tidak perlu mengimportnya secara eksplisit dalam kod anda, cuma rujuk perpustakaan seperti biasa dalam projek anda.

3. Takrif jenis tersuai

Jika anda menggunakan pustaka yang tidak mempunyai takrif jenis rasmi atau takrif jenis rasmi tidak lengkap, anda boleh menulis fail pengisytiharan jenis anda sendiri (.d.ts). Biasanya, fail ini harus diletakkan di lokasi yang sama dengan fail JavaScript pustaka atau dalam jenis atau direktori @types.

Sebagai contoh, katakan terdapat perpustakaan yang dipanggil customLib, dan fail utamanya ialah customLib.js. Anda boleh membuat fail CustomLib.d.ts untuk mengisytiharkan jenisnya:

{
// 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
]
}

Kemudian dalam kod anda, TypeScript akan mengenali dan menggunakan jenis ini.

4. Definisi jenis komuniti

Kadangkala, komuniti akan memberikan definisi jenis tidak rasmi. Anda boleh menemuinya dalam repositori DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped), atau cari @types/library-name di GitHub.

5. Had definisi jenis

Walaupun definisi jenis membantu untuk meningkatkan kualiti kod, tidak semua perpustakaan menyediakan definisi jenis yang lengkap atau ia mungkin tidak sepadan sepenuhnya dengan gelagat sebenar perpustakaan. Dalam kes ini, anda mungkin perlu menggunakan sebarang jenis atau // @ts-ignore ulasan dalam kod anda untuk melangkau semakan jenis tertentu.

integrasi IDE

Pastikan IDE anda (seperti VSCode) memasang pemalam TypeScript untuk mendapatkan pelengkapan kod, semakan taip dan ciri lain.

Pindahkan modul lain secara beransur-ansur

Lama kelamaan, anda boleh menukar modul JavaScript lain kepada TypeScript secara beransur-ansur. Sebagai contoh, katakan terdapat app.js, yang boleh ditukar serupa kepada app.ts dan menambah anotasi jenis.

• Namakan semula app.js kepada app.ts. Langkah ini menandakan bahawa modul telah memasuki persekitaran TypeScript secara rasmi.

• Buka app.ts dan mula menambah anotasi jenis pada pembolehubah, parameter fungsi, nilai pulangan, dll. Ini membantu pengkompil TypeScript melakukan pemeriksaan jenis dan mengurangkan kemungkinan ralat jenis.
  

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

• Untuk struktur data yang kompleks, pertimbangkan untuk menggunakan antara muka (antara muka) atau taip alias (jenis alias) untuk menentukan jenis bagi meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

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

Kuatkan pemeriksaan jenis

Selepas pasukan anda membiasakan diri dengan TypeScript, anda boleh mendayakan pilihan semakan jenis yang lebih ketat secara beransur-ansur dalam tsconfig.json, seperti strictNullChecks.

Atas ialah kandungan terperinci Strategi penggunaan progresif TypeScript untuk projek hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!