01 Encounter typescript, build environment

The typescript code we write will eventually be compiled into javascript code to run, so we need to build the corresponding environment

npm install typescript globally

npm install typescript -g

View Version

tsc --version

Write the first ts file

Running this ts file directly at this time is an error, we need to convert it to a js file, through the tsc we just installed

// Enter tsc in the console to add your filetsc .\01_hello-typescript.ts

At this point, you will find that there is one more file in your directory, this js file is the converted file

It's too troublesome to deal with ts code in this way, there are two solutions at present

Option 1: Build a webpack environment

Option 2: Install ts-node, ts-node helps us do two things, compile and run in the node environment

Here, use ts-node in the learning stage first

npm install ts-node -g// ts-node also depends on two other packages, which we also need to install globallynpm install tslib @types/node -g

Run ts files through ts-node,

webpack builds ts environment (skipable)

This is my initial directory. After creating main.ts util.ts, after npm init, keep pressing Enter to create the package.json file

Partially install webpack webpack-cli

npm install webpack webpack-cli -D

Configure the build command in package.json first,

Create index.html in the root directory (template for creating local services)! After generating the template, it is OK

Then create the webpack.config.js file

const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {mode: "development",entry: "./src/main.ts",output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},resolve: {extensions: [".ts", ".js", ".json", ".cjs"],},devServer: {},module: {rules: [{test: /\.ts$/,loader: "ts-loader",},],},plugins: [new HtmlWebpackPlugin({template: "./index.html",}),],};

The following are various installations, at the command line

// ts-loader depends on typescriptnpm install ts-loader typescript -D// The tsconfig.json file is required, here we generate it automaticallytsc --init// You can package it here, refer to the packaged file// debugging trouble, we start the local servicenpm install webpack-dev-server -D// specify the template herenpm install html-webpack-plugin -D

Set the serve script

npm run serve

It's ok