One. What isTypeScript

TypeScript is a superset of Javascript that follows the latest ECMAScript specification. Typescript extends Javascript syntax, not replaces it.

  • TypescriptTo enhance theJavaScriptGrammar,JSMore rigorous, letJSMore suitable for large applications
  • TS providedThe type system, can help us provide accurate at development timeCode hinting
  • Code is done during developmentType checkingTo avoid many potential errors
  • TSIs not run directly, you need to compile to run

2. Environment Configuration

2.1 buildtsfile

Globally install typescript ts files for compilation

npm install typescript -g
tsc --init 	# generate tsconfig. Json
tsc 		You can compile ts files into JS files
tsc --watch # Monitor ts file changes to generate JS files
Copy the code

2.2 configurationrollupThe environment

Install dependencies

npm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D
Copy the code

Example Initialize the TS configuration file

npx tsc --init
Copy the code

A rollup configuration

// rollup.config.js
import ts from 'rollup-plugin-typescript2'
import {nodeResolve} from '@rollup/plugin-node-resolve';
import serve from 'rollup-plugin-serve';
import path from 'path'
export default {
    input:'src/index.ts'.output: {format:'iife'.file:path.resolve('dist/bundle.js'), 
        sourcemap:true
    },
    plugins:[
        nodeResolve({
            extensions: ['.js'.'.ts']
        }),
        ts({
            tsconfig:path.resolve(__dirname,'tsconfig.json')
        }),
        serve({
            open:true.openPage:'/public/index.html'.port:3000.contentBase:' '}})]Copy the code

Package. The json configuration

"scripts": {
      "dev": "rollup -c -w"
}
Copy the code

This will start the service for compilation with NPM run dev

2.3 Method of Resolving TS

  • Ts plug-in
  • babelparsing
  • rollupIt is usually usedrollup-plugin-typescript2
  • webpackGeneral usets-loader/babel-plugin-typescript