The ES6 collection has already been updated, so let’s update TypeScript while it’s hot. There are plenty of documents and PDFS out there, but it’s your own.

directory

  • preface
  • An overview of the
  • Advantages and disadvantages TypeScript
    • advantage
    • disadvantages
  • start
    • The installation
    • Create a file
    • Execute compile command
  • The configuration file
  • Type standard library
  • Set the error message display to Chinese
    • Use VSCode Settings
    • Use the command line to set
  • Scope problem
  • TypeScript learns maps

preface

We have already discussed JavaScript’s own type system. If you are not sure about strong and weak types and the benefits of strong typing, look back at the JavaScript type system. We also introduced the JavaScript type checker Flow used in Vue2.0 source code. Review Flow (I) – JavaScript static type checker. The source code for Vue3.0 already uses TypeScript for type checking. Many libraries use TypeScript as well, so let’s take a quick look at it.

An overview of the

TypeScript is a programming language built on top of JavaScript. It is a superset of JavaScript. Flow, like Flow, is designed to solve problems with JavaScript’s type system. We can see the relationship between JavaScript, ES6, and TypeScript in the following figure

TypeScript is a statically typed language that is used for development. However, TypeScript is not supported in the browser environment and must be compiled into JavaScript in the production environment to support TypeScript. At the same time, TypeScript is not strongly typed because it requires javascript-compatible implicit type conversions. It just advances type checking rather than making the type system itself more rigorous.

Advantages and disadvantages TypeScript

advantage

  • To solveJavaScriptThe type system is inadequate, and type checking during development can greatly improve the reliability of your code.
  • Incremental development, if notTypeScriptIn the beginningJavaScriptIt’s also supported. You can learn one feature and use one feature.
  • TypeScriptCompared withFlowType check, more powerful function, ecology is more sound, perfect.
  • Gradually it became widely used,Angular.Vue3.0Are already in use,TypeScriptHas become the second language of the front end.

disadvantages

  • The language itself adds many concepts, raising the cost of learning
  • At the beginning of the project, introductionTypeScriptIt’s going to cost a little bit more, and it’s going to have to be compiled

start

  • The TypeScript’s official website
  • TypeScript Chinese website

The installation

npm-typescript

# yarn
yarn add typescript --dev

# npm
npm install -g typescript
Copy the code

After the installation, there are TSC files in node-modules /bin, we can use TSC to convert TS files to JS files

Create a file

Add a.ts file to the SRC folder

// Use the new ES6 features
const hello = (name: string) = > {
  console.log(name)
}

hello('TypeScript')
Copy the code

Execute compile command

# yarn
yarn tsc hello-TypeScript.ts

# npm
tsc .\src\hello-TypeScript.ts
Copy the code

Will add a compiled JS file in the same directory

// All conversions to ES3 syntax (default is ES3)
var hello = function (name) {
    console.log(name);
};
hello('TypeScript');
Copy the code

The configuration file

When you compile your project, you can generate a configuration file, tsconfig.json

# yarn
yarn tsc --init
# npm
tsc --init
Copy the code

These properties are options for typescript compiler configuration. We can change what we want

Once we have the configuration file, it will only take effect when we compile the entire project using the TSC command, not if it is a single file.

# yarn
yarn tsc
# npm
tsc
Copy the code

You can see that there are js files and js.map files in the dist directory

Type standard library

The default version of the configuration file is es3, so type declarations like Symbol, Promise, Array, console can also give errors in some cases. In this case, the application should be aware of those types. In VSCode, The lib folder contains the TypeScript standard library’s built-in object definitions. Use Symbol as an example:

For example, Symbol, which is only supported by ES6 syntax, has two solutions

  • Need to add the configuration filetargetInstead ofes2015
  • Don’t changetargetThat will belibOption to["ES2015"]

If you set this separately, the console definition will report an error, and the default DOM library will be overwritten, so you need to add “DOM”

The next time you encounter a similar error, you can find the standard library it references and reference it in the configuration file.

Set the error message display to Chinese

Develop tips to make TypeScript display error messages in Chinese.

Use VSCode Settings

Set -> Type typescript locale -> typescript: locale -> zh-cn

Use the command line to set

# yarn
yarn tsc --locale zh-CN
# npm
tsc --locale zh-CN

# Set it to English mode
tsc --locale en
Copy the code

Scope problem

If you execute ts files in a project, the same variable in different files will be reported as an error. To avoid this problem, scope handling is performed

// Solution 1: wrap each file with an immediate execution function
(function () {
   const a = 123}) ()// Solution 2: Use export to export

const a = 123
export {}
Copy the code

TypeScript learns maps