close

Integrimi TypeScript me mjetet popullore të zhvillimit: Visual Studio Code, Webpack, dhe Babel

Instaloni TypeScript shtesën në Visual Studio Code

Instaloni TypeScript shtesën në Visual Studio Code

Hapeni Visual Studio Code dhe lundroni në panelin e Zgjerimeve.

Kërkoni për " TypeScript " dhe instaloni shtesën zyrtare TypeScript.

 

Konfiguro TypeScript opsionet e përpiluesit në skedarin tsconfig.json

Konfiguro TypeScript opsionet e përpiluesit në skedarin tsconfig.json.

Personalizoni opsionet e përpiluesit sipas nevojave të projektit tuaj.

Për shembull:

{  
  "compilerOptions": {  
    "target": "es6",  
    "module": "commonjs",  
    "strict": true  
  }  
}

 

Përdorni veçori si IntelliSense, kontrollin automatik të tipit dhe navigimin e kodit brenda Visual Studio Code

Me TypeScript të integruar, do të përfitoni nga sugjerimet e IntelliSense, informacioni i llojit dhe zbulimi i gabimeve ndërsa shkruani kodin në Visual Studio Code.

TypeScript Veçoritë e avancuara të gjuhës, të tilla si navigimi i kodit dhe rifaktorimi, janë gjithashtu të disponueshme brenda redaktuesit.

 

Duke u integruar TypeScript me Webpack

Instaloni paketat e nevojshme: typescript, ts-loader dhe webpack

Ekzekutoni komandën e mëposhtme për të instaluar paketat:

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

 

Konfiguro për të trajtuar skedarët duke përdorur ts-loader webpack.config.js TypeScript

Shtoni konfigurimin e mëposhtëm në skedarin tuaj: webpack.config.js 

module.exports = {  
  entry: './src/index.ts',  
  module: {  
    rules: [  
      {  
        test: /\.ts$/,  
        use: 'ts-loader',  
        exclude: /node_module/  
      }  
    ]  
  },  
  resolve: {  
    extensions: ['.ts', '.js']  
  },  
  output: {  
    filename: 'bundle.js',  
    path: path.resolve(__dirname, 'dist')  
  }  
};

 

Vendosni shtojca dhe ngarkues shtesë për optimizimin e TypeScript përpilimit dhe paketimit

Ju mund të përfshini shtojca dhe ngarkues të tjerë si terser- webpack -plugin, clean- webpack -plugin ose babel -loader për të përmirësuar më tej procesin tuaj të ndërtimit.

 

Duke u integruar TypeScript me Babel

Instaloni paketat e nevojshme: typescript, @ babel /preset- typescript dhe @ babel /cli

Ekzekutoni komandën e mëposhtme për të instaluar paketat:

npm install typescript @babel/preset-typescript @babel/cli --save-dev

 

Konfiguro ose për të përfshirë paracaktimin .babelrc babel.config.js TypeScript

Krijo një. babel rc ose shtoni konfigurimin e mëposhtëm në babel skedarin tuaj .config.js:

module.exports = {  
  presets: ['@babel/preset-typescript']  
};

 

Personalizojeni Babel konfigurimin për TypeScript veçori specifike ose kërkesa për pajtueshmëri

Mund të përfshini Babel shtojca shtesë ose paracaktime për të aktivizuar TypeScript veçori specifike ose për të siguruar përputhshmëri me mjediset e synuara.

 

Këshilla dhe praktika më të mira

  • TypeScript Instaloni shtesat dhe shtojcat përkatëse për produktivitet të përmirësuar dhe përvojën e zhvilluesit në mjetet tuaja të zhvillimit të zgjedhur.
  • TypeScript Tipari i përpilimit në rritje të Leverage( tsc --watch ose webpack --watch) për kohë më të shpejta ndërtimi gjatë zhvillimit.
  • Eksploroni opsionet e avancuara të konfigurimit për rregullimin e mirë të integrimit me mjedisin tuaj specifik të zhvillimit, si p.sh. konfigurimi i rregullave ESLint për TypeScript.

 

Duke ndjekur këtë udhëzues gjithëpërfshirës, ​​do të jeni në gjendje të integroheni pa probleme TypeScript në mjetet popullore të zhvillimit si Visual Studio Code, Webpack, dhe Babel. Kjo do të përmirësojë rrjedhën e punës tuaj të zhvillimit, do të ofrojë veçori të avancuara gjuhësore dhe do t'ju lejojë të përfitoni plotësisht nga TypeScript përfitimet e 's në projektet tuaja.