Integravimas TypeScript su populiariais kūrimo įrankiais: Visual Studio Code, Webpack, ir Babel

Įdiekite TypeScript plėtinį Visual Studio Code

Įdiekite TypeScript plėtinį Visual Studio Code

Atidarykite Visual Studio Code ir eikite į plėtinių sritį.

Ieškokite „ TypeScript “ ir įdiekite oficialų TypeScript plėtinį.

 

Sukonfigūruokite TypeScript kompiliatoriaus parinktis tsconfig.json faile

Sukonfigūruokite TypeScript kompiliatoriaus parinktis tsconfig.json faile.

Tinkinkite kompiliatoriaus parinktis pagal savo projekto poreikius.

Pavyzdžiui:

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

 

Pasinaudokite tokiomis funkcijomis kaip „IntelliSense“, automatinis tipo tikrinimas ir kodo naršymas Visual Studio Code

Naudodami TypeScript integruotą, gausite naudos iš „IntelliSense“ pasiūlymų, įvedimo informacijos ir klaidų aptikimo, kai rašote kodą Visual Studio Code.

TypeScript Redagavimo priemonėje taip pat pasiekiamos išplėstinės kalbos funkcijos, tokios kaip kodo naršymas ir keitimas.

 

Integruojant TypeScript su Webpack

Įdiekite reikiamus paketus: typescript, ts-loader ir webpack

Norėdami įdiegti paketus, paleiskite šią komandą:

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

 

Sukonfigūruokite tvarkyti failus naudodami ts-loader webpack.config.js TypeScript

Pridėkite šią konfigūraciją prie savo failo: 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')  
  }  
};  

 

Nustatykite papildomus papildinius ir įkroviklius, kad optimizuotumėte TypeScript kompiliavimą ir grupavimą

Galite įtraukti kitus papildinius ir įkroviklius, pvz., terser- webpack -plugin, clean- webpack -plugin arba babel -loader, kad dar labiau pagerintumėte kūrimo procesą.

 

Integruojant TypeScript su Babel

Įdiekite reikiamus paketus: typescript, @ babel /preset- typescript ir @ babel /cli

Norėdami įdiegti paketus, paleiskite šią komandą:

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

 

Konfigūruokite arba įtraukite išankstinį nustatymą .babelrc babel.config.js TypeScript

Sukurti. babel rc failą arba pridėkite šią konfigūraciją prie babel.config.js failo:

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

 

Tinkinkite Babel konfigūraciją pagal konkrečias TypeScript funkcijas arba suderinamumo reikalavimus

Galite įtraukti papildomų Babel papildinių arba išankstinių nustatymų, kad įgalintumėte konkrečias TypeScript funkcijas arba užtikrintumėte suderinamumą su tikslinėmis aplinkomis.

 

Patarimai ir geriausia praktika

• Įdiekite atitinkamus TypeScript plėtinius ir papildinius, kad padidintumėte produktyvumą ir pagerintumėte kūrėjo patirtį pasirinktuose kūrimo įrankiuose.
• Pasinaudokite TypeScript laipsniško kompiliavimo funkcija( tsc --watch arba webpack --watch), kad kūrimo metu būtų greičiau kuriama.
• Ištirkite išplėstines konfigūracijos parinktis, kad galėtumėte tiksliai suderinti integraciją su konkrečia kūrimo aplinka, pvz., nustatykite ESLint taisykles, skirtas TypeScript.

 

Vadovaudamiesi šiuo išsamiu vadovu galėsite sklandžiai integruotis TypeScript į populiarius kūrimo įrankius, tokius kaip Visual Studio Code, Webpack, ir Babel. Tai pagerins jūsų kūrimo darbo eigą, suteiks pažangių kalbos funkcijų ir leis visapusiškai pasinaudoti TypeScript projektų teikiamais privalumais.