close

Kuunganishwa TypeScript na Zana Maarufu za Maendeleo: Visual Studio Code, Webpack, na Babel

Sakinisha TypeScript kiendelezi ndani Visual Studio Code

Sakinisha TypeScript kiendelezi ndani Visual Studio Code

Fungua Visual Studio Code na uende kwenye kidirisha cha Viendelezi.

Tafuta " TypeScript " na usakinishe kiendelezi rasmi TypeScript.

 

Sanidi TypeScript chaguo za mkusanyaji katika faili ya tsconfig.json

Sanidi TypeScript chaguo za mkusanyaji katika faili ya tsconfig.json.

Geuza kukufaa chaguo za mkusanyaji kulingana na mahitaji ya mradi wako.

Kwa mfano:

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

 

Tumia vipengele kama vile IntelliSense, ukaguzi wa aina otomatiki na urambazaji wa msimbo ndani Visual Studio Code

Ukiwa TypeScript umeunganishwa, utafaidika na mapendekezo ya IntelliSense, maelezo ya aina na ugunduzi wa hitilafu unapoandika msimbo katika Visual Studio Code.

TypeScript Vipengele vya juu vya lugha, kama vile urambazaji wa msimbo na urekebishaji upya, vinapatikana pia ndani ya kihariri.

 

Kuunganisha TypeScript na Webpack

Sakinisha vifurushi muhimu: typescript, ts-loader na webpack

Tumia amri ifuatayo ili kusakinisha vifurushi:

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

 

Sanidi kushughulikia faili kwa kutumia ts-loader webpack.config.js TypeScript

Ongeza usanidi ufuatao kwenye faili yako: 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')  
  }  
};

 

Sanidi programu-jalizi za ziada na vipakiaji kwa ajili ya kuboresha TypeScript mkusanyiko na kuunganisha

Unaweza kujumuisha programu-jalizi na vipakiaji vingine kama vile terser- webpack -plugin, clean- webpack -plugin, au babel -loader ili kuboresha zaidi mchakato wako wa uundaji.

 

Kuunganisha TypeScript na Babel

Sakinisha vifurushi vinavyohitajika: typescript, @ babel /preset- typescript, na @ babel /cli

Tumia amri ifuatayo ili kusakinisha vifurushi:

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

 

Sanidi au ujumuishe uwekaji awali .babelrc babel.config.js TypeScript

Unda. babel rc au ongeza usanidi ufuatao kwenye babel faili yako ya .config.js:

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

 

Geuza Babel kukufaa kwa TypeScript vipengele maalum au mahitaji ya uoanifu

Unaweza kujumuisha Babel programu-jalizi au uwekaji mapema ili kuwezesha TypeScript vipengele mahususi au kuhakikisha upatanifu na mazingira lengwa.

 

Vidokezo na Mbinu Bora

  • Sakinisha TypeScript viendelezi na programu-jalizi zinazofaa kwa tija iliyoimarishwa na matumizi ya msanidi programu katika zana ulizochagua za usanidi.
  • Ongeza TypeScript kipengele cha mkusanyo wa nyongeza( tsc --watch au webpack --watch) kwa nyakati za ujenzi wa haraka wakati wa usanidi.
  • Gundua chaguo za usanidi wa hali ya juu kwa kusawazisha muunganisho na mazingira yako mahususi ya usanidi, kama vile kuweka sheria za ESLint za TypeScript.

 

Kwa kufuata mwongozo huu wa kina, utaweza kujumuisha bila mshono TypeScript katika zana maarufu za ukuzaji kama vile Visual Studio Code, Webpack, na Babel. Hili litaimarisha utendakazi wako wa ukuzaji, kutoa vipengele vya kina vya lugha, na kukuruhusu kunufaika kikamilifu na TypeScript manufaa ya miradi yako.