1. About the typescript

Typescript (TS for short) is a superset of javascript with a type system that can be compiled. You can imagine how important it is to be able to type check and compile code before it runs (just as it does in strongly typed languages like Java).

For example, the @Angular front-end framework integrates TS by default, giving @Angular projects the ability to compile.

Don’t know about TS? Let’s go through the TS file, okay? : www.tslang.cn/docs/handbo…

Ts compiles ts by default from the tsconfig.json configuration file (which is very powerful).

Ts can be compiled using the typescript compiler alone or with ts-Loader in Webpack (similar to Babel-loader).

2. Install dependencies

Typescript related

npm install --save-dev typescript
Copy the code

Webpack related

npm install --save-dev ts-loader
Copy the code

3. Directory structure

// '--' represents directory, '-' represents file
  --demo05
    --src
      -app.js
      -User.js
    -index.html
    -tsconfig.json
    -webpack.config.js
Copy the code

src/app.js

import { User } from './User';

const user1: User = {
  name: 'simple'.age: '25'.hobby: 'play the guitar'
};

// The TSC compiler will report an error if the parameter is not enough
// const user2: User = {
// name: 'simple2',
// age: '25'
// };

console.log(user1);
Copy the code

src/User.ts

export interface User {
  name: String.age: String.hobby: String, options? :Object // This parameter is optional
}

// What about Tree Sharking for Webpack?
export interface Animal {
  name: String
}
Copy the code

4. Compile the tsconfig.json configuration file

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs"."target": "es5"."allowJs": true."lib": [
      "es2018"."dom"],},"include": [
    "./src/*"]."exclude": [
    "./node_modules"]}Copy the code

About tsconfig. Json is full of many knowledge, specific configuration according to the project configuration document or reference to: www.tslang.cn/docs/handbo…

You can also find open source projects and see how others have configured them.

5. Write a WebPack configuration file

webpack.config.js

const path = require("path");
module.exports = {
  mode: 'production' || 'development'.entry: {
    index: "./src/app.ts"
  },
  output: {
    publicPath: __dirname + "/dist/".// References to packaged resource files will be based on this path
    path: path.resolve(__dirname, "dist"), // The packaged output directory
    filename: "bundle.js"
  },
  module: {
    rules: [{test: /\.ts? $/.use: 'ts-loader'.exclude: /node_modules/}},resolve: {
    extensions: ['.ts'.'.js']}}Copy the code

6. Run the package command

(You have global Webpack and webPack-CLI installed by default)

webpack
Copy the code

After successful packaging, dist/app.bundle.js is generated in the demo05 directory

7. Verify the packaging results

Create an index.html file, reference the main file generated by the package (app.bundle.js), open it in Ie, open it in Chrome, and view the console.

Output result:

{name: "simple", age: "25", hobby: "play the guitar"}
Copy the code

8. Source address

Demo code address: github.com/SimpleCodeC…

Warehouse code address (and directory): github.com/SimpleCodeC…