Introduction to the

TypeScript is a superset of JavaScript developed by Microsoft that provides a type system and support for ES6 syntax.

The characteristics of

Compiled languages: compile at runtime. Strongly typed languages. Object-oriented languages

advantage

1. In contrast to weakly typed JavaScript, TypeScript requires that the type of a variable be specified at variable definition time. When a variable value is specified, the IDE does type detection to indicate errors and reduce the chance of errors during development. 2. Since you need to specify a type for a variable, most functions will know how to use it by looking at the function definition to make the code more readable. 3, enhanced editor and IDE functions (code hints, modify automatic update references, interface hints, etc.)

Bottom line: TypeScript makes code more readable and maintainable.

The installation

There are two main ways to get TypeScript tools:

  • Through the NPM
  • Install Visual StudioTypeScriptThe plug-in

Visual Studio 2017 and Visual Studio 2015 Update 3 include TypeScript by default. If you don’t already have TypeScript installed in Visual Studio, you can download it.

For NPM users

npm install -g typescript
Copy the code

write

In TypeScript, the. Ts file extension specifies the type of a variable using the variable name: variable type. Create a new file named test.ts and enter the following code into the file.

function sayHi(person: string){
    return 'hello ' + person;
}
console.log(sayHi('john')); // hello john 
Copy the code

run

There are two ways to run TS. 1. Compile ts files into JS files and run them

tsc test.ts
Copy the code

A test.js file is generated in the parent directory. Run the test.js file.

2. Use the TS-Node tool to run TS files directly. We won’t go into details here, but VSCode uses TS-Node to debug TypeScript code

The data type

TypeScript has two types of data types, raw data types and object types

TypeScript’s primitive data types include booleans, values, strings, null, undefined, and the new type Symbol in ES6.

Primitive data type

This section focuses on the use of Boolean, numeric, string, NULL, and undefined data types in TypeScript.

Boolean value

Use the Boolean keyword in TypeScript to define Boolean value types.

let isRead: boolean = true;
Copy the code

Note that new Boolean(true) does not get a Boolean value.

let isDone: boolean = new Boolean(true);

Type "Boolean" cannot be assigned to type "Boolean".
// Boolean is a primitive, but Boolean is a wrapper object. If possible, Boolean is preferred.
Copy the code

The appeal code will report an error because new Boolean(true) does not get a Boolean value, but a Boolean object.

Of course if you call Boolean(true) you get a Boolean.

const isDone: boolean = Boolean(true);
Copy the code

In TypeScript, Boolean is a primitive data type and Boolean is a constructor, as are other primitive types (except null and undefined).

The numerical

The number keyword is used in TypeScript to define numeric types.

As in JavaScript, all numbers in TypeScript are floating point numbers. In addition to supporting decimal and hexadecimal numbers, TypeScript also supports binary and octal representations introduced in ES6.

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// Binary representation in ES6
let binaryLiteral: number = 0b1010;
// Octal notation in ES6
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
Copy the code
Compile the results
var decLiteral = 6;
var hexLiteral = 0xf00d;
// Binary representation in ES6
var binaryLiteral = 10;
// Octal notation in ES6
var octalLiteral = 484;
var notANumber = NaN;
var infinityNumber = Infinity;
Copy the code

string

In TypeScript, strings are represented by the string keyword, as in JavaScript, strings are represented by “and”.

let name: string = 'john';
name = 'lucy';
Copy the code

Typescript also supports template strings.

const name: string = 'adrien';
const age: number = 22;

const str: string = `my name is ${name}
I'll be ${ age + 1 } years old next month`;
Copy the code

The way STR is defined above is the same as the result below

const str = "my name is " + name + "I'll be " + (age + 1) + " years old next month";
Copy the code

Null 和 Undefined

Null and undefined can be used in typescript to define these two data types.

const n: nulll = null;
const u: undefined = undefined;
Copy the code

Null and undefined are subtypes of all types in typescript. That is, null and undefined can be assigned to any type of variable.

const num: number = null;
const str: string = undefined;

// All of the above are allowed without error
Copy the code