preface

Recently I started to read the source code of VUe3, which uses a different type system than VUe2. Vue2 uses the Flow type system, while VUe3 uses TypeScript. So, in order to understand the source code for Vue3, you need to learn TypeScript. Since I haven’t used TS before (this article uses TS as a shorthand for TypeScript), it will be a series to document the entire learning process.

Article 1 – Encounter TypeScript and build a simple TS development environment – Digging for gold

First TypeScript, understanding types and type operations

Chapter 3 – A deeper look at TypeScript functions

Reading this article, you will learn:

1. What is TS? What's the difference with JS? Compile TS in node environment 3. Build ts development environment with Webpack 4. Define variables in TSCopy the code

1. What is TS?

Official explanation: TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Ts is a powerful type programming language that can be built into javascript, giving you a great tool experience on any scale.

In other words, TS will eventually compile to JS to run in a browser environment.

This makes a lot of sense, just as the code we write for ES6 will eventually be compiled into ES5 code and run in the browser.

There are a few official descriptions of TypeScript’s features that I find quite appropriate:

Began in 1.1javascript, due tojavascript

  • Use existing javascript code, including popular javascript libraries, and call TypeScript code from javascript;

  • TypeScript compiles clean, concise javascript code that runs in a browser and nodeJS environment.

1.2 TypeScriptIs a powerful tool for building large projects

  • Types allow you to use efficient development tools such as static checking when developing javascript programs;

  • Types let you define interfaces between components and gain insight into the behavior of existing javascript libraries;

1.3 Have advancedjavascript

  • TypeScript keeps pace with ECMAScript and has the latest and evolving new ECMAScript features to help build robust components;

  • These new features will eventually be compiled into neat javascript;

2. Ts compilation environment

The TS compilation environment and development environment built in this paper are built on Windows system.

The node v14.16.0 NPM v6.14.11Copy the code

Ts can compile to JS, so it can run in node and browser environments respectively.

2.1 nodeCompilation in the environment

Install dependencies:

// ts-node is a ts execution engine that compiles ts files and runs them in the node environment // tslib: // @types/node: NPM install ts-node tslib @types/ node-gCopy the code

Write a TS file test:

Function foo(STR: string) {console.log(str.length); // file test.ts function foo(STR: string) {console.log(str.length); } foo('abc');Copy the code

When ts-node test.ts is executed on the terminal, 3 is displayed.

2.2 webpack + tscSetting up the Compilation Environment

2.2.1 Initializing the Project

Mkdir webpack-ts-demo CD webpack-ts-demo // -y means to omit the step of always enter NPM init -yCopy the code

2.2.2 installationwebpackrelated

// If you use webpack V4 + and want to call 'webpack' from the command line, You also need to install 'webpack-cli' NPM install webpack webpack-cli -d // webpack service to achieve real-time compilation of code, HTML page real-time refresh effect NPM install webpack-dev-server NPM install html-webpack-plugin -d. Install html-webpack-plugin -dCopy the code

2.2.3 installationTypeScriptrelated

NPM install TypeScript -d // 'TypeScript' parser is used to parse ts files. NPM install ts-loader -d needs to be configured in webpack.config.jsCopy the code

2.2.4 Manually Configuring Some Files

2.2.4.1 configurationwebpack.config.js
  • newwebpack.config.jsFile and perform the following configuration. The configuration is relatively simple:
// webpack-ts-demo/webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); Module.exports = {// development mode, tells webpack to use the same mode's built-in optimization mode: 'development', // import file, manually create '/ SRC /main.ts' file entry in the root directory: Resolve: {path: path.resolve(__dirname, './dist'), filename: 'bundle.js'}, resolve: {// This is the suffix of the configuration file. When importing files, if the file suffix is not written, the configuration file suffix will be searched, '... ` is the default configuration, is based on the default configuration increased ` ts ` extension extensions: /. "ts", "..."  }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' // use the local template (manually create an 'index.html' file in the root directory, in the vscode editor, click new file, type'! })),], module: {// configure ts file rules: [{test: /\. Ts $/, loader: 'ts-loader' } ] } }Copy the code
2.2.4.2 configurationpackage.jsonfile
"Scripts ": {"test": "echo "Error: no test specified" && exit 1", "serve": "webpack serve", // added, startup project "build": "Webpack" // add, pack items},Copy the code
2.2.4.3 configurationtsconfig.jsonfile

Json is a TypeScript configuration file. Without this file, an error is reported when a project is started. Instead of creating this file manually, we can create it using the following command:

// Create a tsconfig.json file. // With typescript installed, you can use the TSC --init command on the terminalCopy the code

The tsconfig.json file has many configurations, which will be covered in more detail in a later article.

At this point, basically all the configuration is complete. At this point, we create the SRC folder in the root directory and create the main.ts file.

// src/main.ts
function sum(a:number, b:number) {
    return a + b
}

console.log(sum(10, 20));
Copy the code

Then run NPM run serve and the terminal will display:

Open http://localhost:8080/ in your browser and F12 in your browser console, where you’ll see output 30.

If I can output30Of course, this is only the most basic development environment, in real projects, configuration is often much more complex than this.

3. Definition of variables in TS

The definition of variables in TS is basically the same as in javascript, with more type annotations,

Var /const/let identifier: data type = assignment;

Here is a brief introduction to the definition of TS variables, followed by a series of articles that provide a systematic look at TypeScript. Follow me for updates.

4. To summarize

This article is an introduction to TypeScript. It provides a brief introduction to TypeScript concepts, features, development environments in nodeJS and browser environments, and the definition of TypeScript variables.

You can learn TypeScript as long as you have javascript background, because TypeScript+VUE or TypeScript+ React has become a trend, and learning TypeScript also helps you read open source projects such as VUe3.