This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

TS writes code that runs in a browser?

Can the code we write in TS run directly in the browser?

No, TS adds a type system on top of JS, so we need to use a compiler to compile TS into JS, so we can run it in the browser.

How do I compile TS to JS?

We can use the official compiler to compile TS to JS.

Let’s go ahead and learn how to compile TS.

Don’t worry. He that will do his work well must first sharpen his tools.

The TS community provides many tools to help us improve our development efficiency. Let’s start by learning how to build an efficient TS development environment.

Basic development environment

Before learning about type systems, let’s set up a basic development environment.

As we learn TypeScript, we have to learn and practice to master it. This is also the most effective way to learn programming.

  • node.js：nodejs.org/
  • Visual Studio Code
  • Cmd/Terminal
  • Chrome

The TypeScript compiler

TS official website: www.typescriptlang.org/

There are many ways to use TS:

  • NPM installs TypeScript globally, firstnpm install -g typescriptAnd thentsc helloworld.ts, so you can compile TS to JS
  • Visual Studio Code
  • Other editors

Shortcut keys to open VSCode integration terminal

Ctrl + `
Ctrl + Shift + `
Copy the code

Open the terminal and run the following command

npm install -g typescript
tsc helloworld.ts
Copy the code

Exercise: Compile TS files using TSC and find the following code block

Ts * @desc NPM install -g typescript // Bypass * @desc TSC index. Ts * @desc node index.js */
​
const num = (index: number) :number= > {
  return 8 << index;
}
console.log(num(2)); / / the result?
Copy the code

The result of compiling TS to JS is as follows

var num = function (index) {
    return 8 << index;
};
num(2);
Copy the code

The above code block is index.ts compiled using TSC. So the result of this code block is the result of the expression 8 << 2. 8 << 2 moves the binary form of 8 2 bits to the left, filling the right with zeros. The binary of 8 is 1000, so 8 << 2 => 100000 => 32.

Initialize the project in vscode

Features of Visual Studio Code

  • Integrated terminal
  • Code completion
  • Jump to definition
  • Code debugging
  • Custom Tasks

What is the basic TS project directory structure?

  • Lib: is the result of compiling TS. For example, it has index.js in it
  • Node_modules: Where NPM dependency packages are stored
  • SRC: where the TS source code is stored. For example, index.ts
  • .gitignore: List of ignored files in git repository
  • Package. json: A place to store project information and dependencies
  • Tsconfig. json: configuration file of the TS project

How should tsconfig.json be configured?

Here is the basic tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "outDir": "lib"
  },
  "include": [
    "src/**/*"
  ]
}
Copy the code
  • CompilerOptions: compilation options, more on this later
  • Include: refers to the location of TS source code

How should package.json be configured?

We typically generate a package.json using the following command.

NPM init # Initializes a package.json file with the corresponding information NPM init -yCopy the code

The contents of the package. The json

{"name": "learning-typescript", "version": "1.0.0", "description": "learning-typescript", "main": "lib/index.js", "directories": { "lib": "lib" }, "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "MIT" }Copy the code

Problem: what error will be displayed when I run the following code in VSCode?

let animal = 'panda';
animal = 10;
Copy the code

A. Cannot assign type “10” to type “string”

B. Cannot assign type “number” to type “string”

C. Cannot assign “animal” because it is a constant or read-only property

D. “animal” unassigned type “string”

This question is relatively simple, VSCode can run the code to get the answer.

let animal = 'panda';
Copy the code

Now animal is of type string;

animal = 10;
Copy the code

10 to animal.

Custom build scripts

How to compile source ts into lib?

We could use the TSC command to compile it, but that would be very cumbersome to type every time. A better way is to write common scripts to scripts in package.json.

Instead of using the global installation, this time we will use the local installation and run the following command from the terminal:

npm install typescript --save-dev
Copy the code

In this case, our typescript dependencies are installed in devDependencies. A package-lock.json file is also generated, so you can leave it alone.

Add command to scripts in package.json:

"build": "tsc"
Copy the code

The TSC command above will use our tsconfig.json configuration to compile the source file into the lib folder.

Execute a command

npm run build
Copy the code

We can see that the files in lib have been updated.

Now can you listen for file changes under the SRC folder, as soon as you change the source code, will automatically compile.

At this point you can add another command

"build": "tsc --watch"
Copy the code

Run the following command on the terminal:

npm start
Copy the code

SRC /index.ts to see if lib/index.js has changed.

Package. json Complete content

{
  "name": "learning-typescript"."version": "1.0.0"."description": "Learning TypeScript"."main": "lib/index.js"."directories": {
    "lib": "lib"
  },
  "scripts": {
    "start": "tsc --watch"."build": "tsc"."test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": ""."license": "MIT"."devDependencies": {
    "typescript": "^ 4.4.3." "}}Copy the code