close

Haɗin kai TypeScript tare da Shahararrun Kayan aikin haɓakawa: Visual Studio Code, Webpack, da Babel

Shigar da TypeScript tsawo a ciki Visual Studio Code

Shigar da TypeScript tsawo a ciki Visual Studio Code

Buɗe Visual Studio Code kuma kewaya zuwa Fannin kari.

Bincika " TypeScript " kuma shigar da TypeScript tsawo na hukuma.

 

Sanya TypeScript zaɓuɓɓukan mai tarawa a cikin fayil ɗin tsconfig.json

Sanya TypeScript zaɓuɓɓukan mai tarawa a cikin fayil ɗin tsconfig.json.

Keɓance zaɓukan masu tarawa gwargwadon buƙatun aikinku.

Misali:

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

 

Yi amfani da fasali kamar IntelliSense, duba nau'in atomatik, da kewayawa lamba a ciki Visual Studio Code

Tare da TypeScript haɗin kai, za ku amfana daga shawarwarin IntelliSense, rubuta bayanai, da gano kuskure yayin da kuke rubuta lamba a cikin Visual Studio Code.

TypeScript Fasalolin harshe na ci-gaba, kamar kewayawa na lamba da sake fasalin, ana samun su a cikin editan.

 

Haɗuwa TypeScript da Webpack

Shigar da fakitin da suka dace: typescript, ts-loader da webpack

Gudun umarni mai zuwa don shigar da fakitin:

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

 

Sanya don sarrafa fayiloli ta amfani da ts-loader webpack.config.js TypeScript

Ƙara wannan tsari zuwa fayil ɗin ku: 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')  
  }  
};

 

Ƙirƙiri ƙarin plugins da masu ɗaukar nauyi don haɓaka TypeScript haɗawa da haɗawa

Kuna iya haɗa wasu plugins da loda kamar terser webpack --plugin, clean webpack --plugin, ko babel -loader don ƙara haɓaka aikin ginin ku.

 

Haɗuwa TypeScript da Babel

Shigar da fakitin da suka dace: typescript, @ babel /preset- typescript, da @ babel /cli

Gudun umarni mai zuwa don shigar da fakitin:

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

 

Sanya ko don haɗa saitattun saiti .babelrc babel.config.js TypeScript

Ƙirƙiri a. babel rc ko ƙara saitin mai zuwa zuwa babel fayil ɗin .config.js:

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

 

Keɓance sanyi Babel don takamaiman TypeScript fasali ko buƙatun dacewa

Kuna iya haɗa ƙarin Babel plugins ko saitattu don kunna takamaiman TypeScript fasali ko tabbatar da dacewa tare da mahallin manufa.

 

Nasiha da Mafi kyawun Ayyuka

  • Shigar TypeScript da abubuwan haɓaka da suka dace don haɓaka haɓakawa da ƙwarewar haɓakawa a cikin zaɓaɓɓun kayan aikin haɓakawa.
  • Haɓaka TypeScript fasalin haɓakar haɓaka( tsc --watch ko webpack --watch) don lokutan ginawa cikin sauri yayin haɓakawa.
  • Bincika zaɓuɓɓukan daidaitawa na ci gaba don daidaita haɗin kai tare da takamaiman yanayin ci gaban ku, kamar kafa ƙa'idodin ESLint don TypeScript.

 

Ta bin wannan cikakkiyar jagorar, za ku sami damar haɗa kai TypeScript cikin shahararrun kayan aikin ci gaba kamar Visual Studio Code, Webpack, da Babel. Wannan zai haɓaka aikin haɓaka ku, samar da fasalulluka na harshe, kuma zai ba ku damar cin gajiyar TypeScript fa'idodin' a cikin ayyukanku.