High versions of the three most popular Angular frameworks force ts dependencies, and later React and Vue introduced TS support. In addition to being a superset of JS, TS is probably the future of JS, so it’s worth taking the time to learn it. Start by configuring a TS Web development environment.

First create the folder TS-Web and enter, then initialize NPM

#Create the project folder TS-web
mkdir ts-web
#Go to the folder
cd ts-web
#Initialize the NPM
npm init -y
Copy the code

Install the dependencies associated with TS

# Install typescript globally first
npm i typescript -g
Copy the code
#Then install typescript and TS-Loader in the project
npm i typescript ts-loader -D
Copy the code

Install webPack-related dependencies

npm i webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin -D
Copy the code

./package.json

{
  "name": "ts-web"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "clean-webpack-plugin": "^ 3.0.0"."html-webpack-plugin": "^ 3.2.0"."ts-loader": "^ 6.2.1." "."typescript": "^ 3.7.4." "."webpack": "^ 4.41.4"."webpack-cli": "^ 3.3.10"."webpack-dev-server": "^ 3.10.1"."webpack-merge": "^ 4.2.2." "}}Copy the code
  • Webpack – CLI is a webPack simple client
  • Webpack-dev-server Enables you to start a local Web service with a configuration item
  • Webpack-merge is used to merge webpack configuration files
  • Html-webpack-plugin is an entry to configure HTML
  • The clean-webpack-plugin is used to clean up previously generated files at compile time

Create tsconfig.json using the TSC –init command

tsc --init
Copy the code

./tsconfig.json

{
  "compilerOptions": {
    "target": "es5"."module": "commonjs"."strict": true."esModuleInterop": true."forceConsistentCasingInFileNames": true}}Copy the code

The default is going to be the values of these properties, so don’t worry about that.

Configure WebPack to create a build folder in the root directory. Create the following four configuration files in the Build folder

The file name instructions
webpack.base.config.js The basic configuration
webpack.config.js The default configuration
webpack.dev.config.js Development Environment Configuration
webpack.dev.config.js Generate environment configuration

./build/webpack.config.js

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')

module.exports = (env, argv) = > {
  let config = argv.mode === 'development' ? devConfig : proConfig;
  return merge(baseConfig, config);
};
Copy the code

./build/webpack.base.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.ts'.output: {
    filename: 'app.js'
  },
  resolve: {
    extensions: ['.js'.'.ts'.'.tsx']},module: {
    rules: [{test: /\.tsx? $/i,
        use: [{
          loader: 'ts-loader'}].exclude: /node_modules/}},plugins: [
    new HtmlWebpackPlugin({
      template: './src/tpl/index.html'}})]Copy the code

The entry file is defined as ‘./ SRC /index.ts’, the output file is named ‘app.js’, and the default HTML template defined in ‘plugins’ is ‘./ SRC/TPL /index.html’, so you need to create the corresponding file.

./build/webpack.dev.config.js

module.exports = {
  devtool: 'cheap-module-eval-source-map'
}
Copy the code

./build/webpack.pro.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
}
Copy the code

You need to modify package.json. /package.json

{
  "name": "ts-web"."version": "1.0.0"."description": ""."main": "./src/index.ts"."scripts": {
  	"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js"."build": "webpack --mode=production --config ./build/webpack.config.js"."test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "clean-webpack-plugin": "^ 3.0.0"."html-webpack-plugin": "^ 3.2.0"."ts-loader": "^ 6.2.1." "."typescript": "^ 3.7.4." "."webpack": "^ 4.41.4"."webpack-cli": "^ 3.3.10"."webpack-dev-server": "^ 3.10.1"."webpack-merge": "^ 4.2.2." "}}Copy the code

Change “main” to “./ SRC /index.ts” “scripts” and add two scripts” start” and “build”

Create the HTML template./ SRC/TPL /index.html

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TypeScript Web Demo</title>
</head>
<body>
  <div class="app"></div>
  <div class="app"></div>
</body>
</html>
Copy the code

Create the entry file for ts./ SRC /index.ts

let str : string = 'hello ts';
let num : number = 200;
document.querySelectorAll('.app') [0].innerHTML = str;
document.querySelectorAll('.app') [1].innerHTML = num.toString();
Copy the code

Start the service

npm start
Copy the code

Visit http://localhost:8080/ to see the results

Execute compile command

npm run build
Copy the code

You will see that the root directory generates the dist folder, just run the index. HTML inside