Types and generics in Typescript

Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

Type inference

Type guess: We define the data without specifying the type, and ts makes a guess based on the result of the assignment.

Type inference: When we define a variable, sometimes we know the type of the variable better than the computer, and the computer may not be able to guess as expected. If we tell the computer to calculate the type of the data, the computer may be more accurate in allocating memory

Note: Type inference does not convert the data type.

There are two grammars

The first type of data

The second data type is as

Enumerated type

An enumerated type is a new type of data that falls between an object and an array

Object features: You can access the value of an attribute by its name

Array features: you can access member values through index values

Enumeration type features:

You can access the index value by the property name

You can also access property names by indexing values

We define enumeration types through enum

Enum Enumeration data name {

Define attribute data names

}

Note:

1 Enumeration data names are usually capitalized.

2 We can set the index value for the enumeration data attribute name

The index value of the previous member remains unchanged

The index value of the following member increases

For example:

// Define an array
let arr: number[] = ['hello'.'color']
let arr: number[] = [100.200]
// The new member type must be always
arr[2] = true
arr[2] = 50;
// omit the type
let colors = ['red'.'green'.'blue']
// Array members can be of any type
let arr:any[] = [100.'color'.true];
/ / yuan group
let arr:[number.string] = [100.'hello'];
let arr:[number.string.boolean] = [100.'hello'.false];
// Add a member
arr[2] = 200;
arr[3] = 'red';
// If the type is not a type in a tuple
arr[3] = true;
// Define a variable of unknown type
var demo;
// We can assign values to demo
demo = 100;
demo = 'hello';
// Get the demo string length
// let len:number = demo.length;
// More accurately allocate memory space
// The first syntax
// let len:number = (<string>demo).length;
// Second syntax
let len:number = (demo as string).length;
/ / modify the demo
demo = true;
console.log(111, len, typeof demo)
// Enumeration type
enum Color {
    red,
    // Specify the index value, the preceding attribute index value is unchanged, the following attribute index value is increased
    green = 10,
    blue
}
// We can access the index value by attribute name
console.log(Color.red)
console.log(Color.green)
console.log(Color.blue)
// We can also access the attribute name through the index value
console.log(Color[0])
console.log(Color[1])
console.log(Color[2])
console.log(Color[10])
console.log(Color[11])
Copy the code

The generic

Also known as generic types, also used to process data

Usually functions also have input and output, and output is based on the processing of input data.

In general, there is no correlation between the type of the input and the result of the output. Sometimes, when we want the data type of the input to be the same as the data type of the output, we can use generics

Syntax for defining generics < type alias >

For example,

T represents a type

When using functions, you can also use generics

grammar

First function name < type >()

Second we can also omit generics and let TS guess (often)

Function name ();

Type cascade

Sometimes a variable may have multiple types, so we can change it to any, but if we want to narrow it down and be more precise, we can use type cascade

Grammar type 1 | 2 | type 3

The variable can then be one of these types

// Define the addition function
// The parameter is optional.
function add(num1:number, num2? :number) :number {
    // If one argument, plus 10
    if (num2 === undefined) {
        return num1 + 10;
    }
    // Implement addition
    return num1 + num2;
}
// Use the function
console.log(add(10.20))
// The parameter types must be consistent
console.log(add('hello'.' world'))
// The number of parameters must be the same
console.log(add(5))
// No result function
function say() :void {
    console.log('hello')
}
say()
// An error occurs during program execution
function errorFn() :never {
    console.log('Before the error occurs')
    // Throw an error
    throw new Error('There was an error')
    console.log('After an error occurs')}// Execute the function
errorFn()
/ / generics
function say(str:any) :any {
    // Implement the function body
    return 'hello ' + str;
}
// Input string, get string
console.log(say('Rookie learning'))
// Enter a number? , resulting in a string, in which case the input and output are inconsistent
console.log(say(200), typeof say(200))
// To make the input and output consistent, we can use generic types
function output<T> (str:T) :T {
    return str;
}
// Input is consistent with output
console.log(output('hello'), typeof output('hello'))
console.log(output(200), typeof output(200))
// Use the function to constrain the type
console.log(output<number> (300), typeof output<number> (300))
// You can also omit generics at work
console.log(output(300), typeof output(300))
// Type cascade
function add(num1:number, num2? :number) :number|string {
    // If an argument, add hello
    if (num2 === undefined) {
        return 'hello ' + num1;
    }
    // Implement addition
    return num1 + num2;
}
// Execute the function
console.log(add(100), typeof add(100))
console.log(add(100.200), typeof add(100.200))
Copy the code