The development environment

1. Installation Node. Js

https://nodejs.org/zh-cn/
Copy the code

Run the node -v command to check whether the local PC is installed. If the local PC is not installed, install it according to the PC environment by referring to the Node. js installation guide

2. Initialize a TypeScript project

mkdir project && cd project
npm init -y
npm install -save-dev typescript
Copy the code

3. Create the tsconfig.json file

Method 1: in vscode, click the version number in the lower right corner

Method 2:

node_modules/.bin/tsc --init --locale zg-CN
Copy the code

Created this way, tsconfig.json contains all the compiler parameters and their descriptions

4. TS Playground tools

https://www.typescriptlang.org/play
Copy the code

Hover over the type name to see its type. CTRLCTRL + Click to see definitions and references

5. Run the index.ts file

Node cannot run TypeScript files directly; it needs to convert them to JavaScript files

Execute the following command to convert TypeScript to JavaScript code:

tsc index.ts
Copy the code

Use the node command to execute the index.js file

node index.js
Copy the code

6. Install and use the TS-Node

With ts-Node, instead of compiling, you can see the results directly

Global installation

npm install -g ts-node
Copy the code

use

ts-node index.ts  
Copy the code

Basic knowledge of

1.TypeScript programs are made up of several parts

  • The module
  • function
  • variable
  • Statements and expressions
  • annotation

2. White space and line breaks

TypeScript ignores Spaces, tabs, and newlines in programs.

Spaces and tabs are often used to indent code to make it easier to read and understand.

3.TypeScript is case sensitive

TypeScript distinguishes between uppercase and lowercase characters.

4. Semicolons are optional

Each line of instruction is a statement, and you can use semicolons with or without them. Semicolons are optional in TypeScript and recommended.

If the statements are written on the same line, use a semicolon to separate them; otherwise, an error will be reported.

5. Comments TypeScript

  • Single-line comment (//) − All words following // are comments.
  • Multi-line comment (/* */) − This comment can span multiple lines.

The base type

The data type The keyword describe
any any A variable declared as any can be assigned a value of any type.
digital number Double precision 64 bit floating point value. It can be used to represent integers and fractions.
string string A series of characters that use either single quotation marks (‘) or double quotation marks (“) to indicate the string type. Backquotes (‘) define multi-line text and inline expressions.
Boolean boolean Represents logical values: true and false.
An array of There is no Add a [] to the element type, or use array generics
tuples There is no A tuple type is used to represent an array with a known number and type of elements. The types of each element need not be the same.
The enumeration enum Enumeration types are used to define collections of values.
void void Used to identify the type of value returned by a method, indicating that the method has no return value.
null null Indicates that the object value is missing.
undefined undefined Used to initialize a variable to an undefined value
never never Never is a subtype of other types, including null and undefined, and represents a value that never occurs.

Value space and type space

A namespace that contains only type declarations does not generate JS code and does not introduce variables

The instanceof operator operates only on value Spaces

How do you tell which space the sign is in?

  1. Symbols that disappear after translation → type space

  2. Symbols as type annotations, aliases → type space

    ( type T = typeof Person; Const p: Person)

  3. Symbol after type assertion → Type space (Target as/is HTMLElement)

  4. Const, let, var symbol → value space

  5. Symbol after class, enum, namespace → value space + type space

There are some operators that exist in both Spaces but have completely different meanings:

typeof

In the value space, typeof returns a string representation of the JavaScript type corresponding to the following expression

(String, number, Bigint, Boolean, symbol, undefined, object, function) In type space, Typeof returns the TypeScript type corresponding to the identifier

[] (Indexed Access Operator Indexed Access Operator)

In the value space, val[field] or val.field returns the value of the property corresponding to val

In the Type space, Type[T] returns the corresponding TS Type

This keyword

In the value space, this points to… More complicated

In type space, this can be used as the return value of a class method to implement chained calls

& | operator

Represents Bitwise AND AND Bitwise OR in value space

Represents the intersection and union of types in type space

const

Used to declare constants in the value space

In type space with as, that is, “as const” constant assertion, narrowing the type

extends

Used to define subclasses in value space (class A extends B)

Used in the type space for type constraints (T extends Number) or interface inheritance (interface A extends B)

in

In value space for loop (for (key in object) {… }) and check whether the attribute exists (name in person)

Declarations (Mapped Types) for keys used to map types in Type space