1. The TypeScript

What is TypeScript?

To put it simply, TS is the superset of Javascript, and the superset is the meaning of the mathematical superset. In fact, it is based on JS, adding many more user-friendly and more convenient functions, as shown in the figure, JS has, TS has, so TS code, you can write any JS code.

What’s TypeScript’s advantage over JavaScript?

1. Strong type system, which improves the maintainability of code.

2. Support the latest syntax of ECMAScript.

3. Type inference mechanism.

4. There are code hints everywhere in the programming, and I have strong coding experience.

TypeScript trend

Angular supports TS by default. React works well with TS and has become an essential part of medium and large projects.

2. Type system of TS

First let’s look at this JS code

let a = 1
 
a.toFixed()
Copy the code

This code looks fine for now, but if you change the type of variable A, for example

let a = 1

a = '1'

a.toFixed()
Copy the code

You will see the following error displayed when the code runs

This is because the toFixed method only works on numeric types, but you will get an error when you convert the type of variable A to a string.

Let’s see what the same code looks like in TS

// ts specifies that a must be of type number
let a:number = 1

a = '1'

a.toFixed()
Copy the code

When you run this code, no, you don’t have to run this code at all, you’ll see

Yes, an error has been reported telling you that you cannot assign a string to a variable of type number.

This is the fundamental difference between TS and JS. TS is a static language, and JS is a dynamic language. Static languages make type judgments at compile time, while dynamic languages only make type judgments at runtime.

3.Type Script Common types

3.1 Type Annotations

// The type of the TS variable is the same as that of the previous data type, so that the type of the variable can be constrained.
let num: number = 10
Copy the code

3.2 Type Script Common basic types

The common types of TS are simply two kinds, one is JS existing native type, one is TS new type.

JS existing types

Therefore, I pay therefore I am 6. Therefore, I pay therefore I am 6. Therefore, I pay therefore I am 6

Object type: Object (arrays, objects, functions, etc.)

TS New type

Union types, custom types (type aliases), interfaces, tuples, literal types, enumerations, void, any, and so on

Let’s start by looking at how existing types are defined in JS.

let hero: string = 'Spirit of Ashes'

let age: number = 22

let ultimateSkill: boolean = true

Copy the code

Next comes how object types are defined.

In object types, each specific object has its own type notation.

In native JS, both Array and Object are returned as objects when typeOf is used.

So let’s start with Array.

Array

+ [] + [] + [] + []

let arr: string[] = [Spirit of the Storm.'Spirit of Ashes'.Spirit of the Earth.Spirit of Nothingness]

// The second option, Array + < type >, is not recommended, because react script tags can be written, so this option conflicts with Angle brackets on tags.

let arr2: Array<string> = ["Blue cat".'fire cat'.'soil cat'.'the purple cat']

Copy the code

What if I want an array that contains both strings and numbers or more?

Of course there is

let arr: (number | string) [] = ['Enemy mage'.30000.'One second to lie down'] 

Copy the code

This is the joint type, TS use | between two or more types.

Now let’s look at the object type, the function type. There are two types of functions, so let’s start with the first one.

Function

function add(num1, bum2) {
    return num1 + num2
}

Copy the code

This is a basic function.

First of all, for a function, the most important thing is actually the function’s parameters and return value, so in fact function types to constrain the parameters and return value of the function.

The argument to a function is a type of variable. Yes, so the argument to a function is a syntax for ordinary variables, as follows

function add(num1: number, bum2: number) {
    return num1 + num2
}

Copy the code

So how do you constrain the return value?

function add(num1: number, bum2: number) :number {
    return num1 + num2
}

Copy the code

Just add the constraint type after the parameter.

Of course, if the function is an expression, it’s the same thing

const add = (num1: number.bum2: number) :number= > {
    return num1 + num2
}

Copy the code

This is the first way of writing a function type, which defines separate types for parameters and return values, followed by the second.

The second way is to constrain both the parameter and return types of the function.

This is similar to the syntax for ordinary variables, but only if the function is an expression.

const add: (num1: number, bum2: number) = > number = (num1, num2) = > {
    return num1 + num2
}

Copy the code

One wonders what happens when a function can be used to do something without returning a value.

What happens if the above function returns no value?

const add: (num1: number, bum2: number) = > number = (num1, num2) = > {
    console.log('Go straight to a hundred times.')}Copy the code

Yes, there is an error because you specify the type of return value, but there is no return value.

So that’s where the new TS type void comes in

const add: (num1: number, bum2: number) = > void = (num1, num2) = > {
    console.log('TI10 LDG will win')}Copy the code

As shown above, this function does not return a value, but the code does not report an error

Void allows a function to return no value.

Void can only be used to specify functions that do not return a value, whereas null specifies the type of a variable.

A function that does not return a value must have a function that does not return a value

const add: (num1? :number, bum2? :number) = > void = (num1, num2) = > {
    console.log('TI10 LDG will win')}Copy the code

By adding a question mark after the argument and before the colon, you specify that the argument is not mandatory, but note that non-mandatory arguments must come last and must not be followed by mandatory arguments.

Now that function types are out of the way, let’s look at how the object type can be constrained.

Object

JS object, in fact, is a collection of attribute methods, but relative to the array, the object has a key value, that is, the name of each attribute and method.

let obj = {
    name: 'bleak'.age: 15.stageName: function() {
        console.log('fairy bei')}}Copy the code

So the object type in TS is the type that describes each property or method in an object.

let obj: {name: string; age: number; stageName(): void} = {
    name: 'bleak'.age: 15.stageName: function() {
        console.log('fairy bei')}}Copy the code

Unlike other type specifications, this is required; Separate, not comma, and wrap the outer layer with curly braces {}, not curly braces.

StageName (num1: number, num2: number): void; stageName(num1: number): void

Alternatively, use the arrow function stageName(num1: number, num2: number) => void

StageName (num1: number, num2? : number) => void

Interface

Interface, in fact, is a kind of encapsulation for object types. When an object is used repeatedly, interface can be used to encapsulate a type set, so as to improve the reuse rate and reduce the amount of code.

// use the keyword interface, where the variable name is any valid
// Use multiple lines to separate the type. If the type is on the same line as usual, a semicolon is required.
interface Person {
    name: string
    age: number
    stageName(): void
}

// It is used like a normal defined type
let obj: Person = {
    name: 'mo yan'.age: 18.stageName() {
        console.log('nothing to say')}}Copy the code

So what’s the difference between this interface and a type alias?

Both type aliases and interfaces can encapsulate objects, but interfaces can encapsulate objects only, and type aliases can encapsulate all types.

In ordinary use, in the object section, you can use anything.

Inheritance of interfaces

In practical work, there may be multiple objects with the same attributes, but different attributes, and in the use of interfaces, multiple interfaces have repeated the same type definition, then use the interface inheritance, can more effectively reduce the amount of code.

Inheritance can be used when two interfaces have duplicate attributes.
interface Person1 {
    name: string
    age: number
    stageName(): void
}
interface Person2 {
    name: string
    age: number
    stageName(): void
    rank: string
}

/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

interface Person1 {
    name: string
    age: number
    stageName(): void
}

interface Person2 {
    level: number
}

// Using the extends keyword, Person2 extends all definitions of Person1 and Person2 and adds a rank property of type string.
// I'm writing multiple simultaneous inheritance, of course you can also write a single inheritance.
interface Person3 extends Person1, Person2 {
    rank: string
}
Copy the code

Tuples

Tuples are a solution to special array type definitions, because ordinary array definitions, such as the numeric array number[], can specify that the array must be all numeric types, but cannot specify the number of arrays or the type of a special index.

// There is no need to define a single index. In general, arrays are collections of the same type.
let person: [number.number] = [123.456]
Copy the code

So much for that… I’ll talk about generics as soon as I can understand them. Smi horse racing.