How to realize the progress from a little white to a master, need a complete life cycle of learning, maybe need to fill a lot of holes, of course, more important is that we need to have the simplest knowledge point more skilled use and thinking.

Let’s slowly uncover a less mysterious veil and explore this new world from the shallow to the deep

First, let’s look at some of TypeScript’s advantages

The advantage of the TypeScript

  • Avoid a lot of low-level errors and save actual development time.
  • In the scenario where many of us work together, we can reduce the cost of work, be friendly to large projects, and save time and effort
  • Having good code prompts is a great experience during actual development

Build the TypeScript development environment

As the saying goes, “To learn a language well, we need to have a suitable and efficient development environment.

Of course, there are several basic development environments that need to be installed on our system before we can set up a TypeScript environment

1. Node.js is based on the current stable version, mine is v15.11.0 2. Node-based package management tool NPM, yarn 3. A code can be edited, I used vscodeCopy the code

I have an older version of the Node environment setup guide for Windows users, if you need to take a look

Then I will use my MAC as the basic setup

The NPM and YARN installation guide is provided on the official website

npm install typescript --save-dev

yarn add typescript --dev
Copy the code

If directly to install in the global

npm install -g typescript
Copy the code
Create an environment

Create the directory where our project resides

 mkdir ts-learning
Copy the code

Open the directory structure

 cd ts-learning
Copy the code

Next we create the SRC directory

 mkdir src && touch src/index.ts
Copy the code

Initialize the directory with NPM

npm init
Copy the code

package.json

{" name ":" ts - learing ", "version" : "1.0.0", "description" : "ts - learing", "main" : "index. Js", "scripts" : {" test ": "echo \"Error: no test specified\" && exit 1" }, "author": "jiuwo", "license": "ISC" }Copy the code

Of course, for TS we also need to do an initialization

tsc --init
Copy the code

We will then generate a tsconfig.json and we will need to customize the configuration with the parts we need

{"compilerOptions": {"target": "es5", // specify the ECMAScript target version: 'ES5' "module": "commonjs", // specify the module to use: 'commonjs', 'amd', 'system', 'umd' or 'es2015' "moduleResolution": "node", // select moduleResolution strategy "experimentalDecorators": True, / / enable experimental ES decorator "allowSyntheticDefaultImports" : true, / / allows never to set the default import export modules by default. "SourceMap ": true, // While compiling ts files into js files, generate the corresponding map file "strict": true, // enable all strict type checking options "noImplicitAny": // Check modules in strict mode and add 'use strict' "declaration" to each file: True, // Generate the corresponding.d.ts file "removeComments": true, // remove all the compiled comments "noImplicitReturns": "ImportHelpers ": true, "importHelpers": true, "lib": "importHelpers": true, "importHelpers": true, "lib": "importHelpers": true, "importHelpers": true, "importHelpers": true [" es6 ", "dom"], / / specified to the library files contained in compiling "typeRoots:" [] "node_modules / @ types", "outDir" : ". / dist ", "rootDir" : ". / SRC "}, "include:" [/ / need to compile a ts file * files matching * * said to ignore the depth of the problem. / SRC / / * * *. "ts"], "exclude" : [ "node_modules", "dist", "**/*.test.ts", ] }Copy the code

Next, we need to modify our package.json file accordingly

{" name ":" ts - learing ", "version" : "1.0.0", "description" : "ts - learing", "main" : "index. Js", "scripts" : {" build ": }, "author": "jiuwo", "license": "ISC", "devDependencies": {"typescript ": "^3.6.4"}}Copy the code

Now that the setup is over, let’s do a simple test

   function firstTest(human) {
      return "hello" + human
   }
Copy the code

This error may be the reason why some colleagues called ts anySrcipt earlier. We need a strict development mode, turning on noImplicitAny mode, with hints and warnings for implicit any variables and types ⚠️

   function firstTest(human: string) {
      return "hello" + human
   }
Copy the code

We can see the type of the function’s return value above, thanks to TypeScript’s built-in type derivation.