TypeScript advanced types

The number types, string types, boolean types, array types, etc. that we learned earlier may all be familiar data types, and we can often see them in other computer languages. And in this section we are going to learn the TypeScript , such as cross type, union type, type alias, literal type, etc.

Cross type

Cross type is to combine multiple types into one type. The combination can be achieved through & , and the new type generated contains all the required characteristics.

As an example, suppose A , B , and C are three different data types. We merge the three types into a new cross type A & B & C , then the object using this cross type declaration can contain the members of the three types A、B、C .

The general cross type is mostly used for mixins, or other places that are not suitable for typical object-oriented models. There are many situations where this happens in JavaScript.

Example:

Let's look at a simple example, the following User and Student are two interfaces that we have defined:

interface User {
    id: number,
    username: string,
    age: number
}
  
interface Student{
    id: number,
    score: number[],
}
  
let cross: User & Student;  // 交叉类型

// 变量cross拥有两个接口中的所有属性
cross.id;
cross.username;
cross.age;
cross.score;

The cross type User & Student contains all the attributes in the above two interfaces, and the variable cross declared by the cross type has all the attributes in the two interfaces.

But this method also needs to pay attention to a problem, that is, if the two interfaces have the same attributes, but the attribute types are different, this will cause conflicts and cannot be assigned. E.g:

Union type

The union type can set multiple types of variables through the pipeline, and assign values according to the set type when assigning values. That is to say, the variable of the joint type can be one of the several data types specified, and we can separate the different types |

Syntax format:

Type1|Type2|Type3 

It should be noted that a variable declared as a union type can only be assigned a value of the specified type, and an error will be reported if it is assigned to a value of other type.

Example:

For example, we declare a variable our union type:

let our:number|string|boolean;

our = 18;
our = 'xkd';
our = true;

The above code indicates that the value of the our number type string boolean or the type 0614363027fefb. If we assign the variable our value other than the three specified data types, it will cause an error.

Type alias

When we use the type, we can use the type keyword to give an alias to the type. Type aliases are mostly used in composite types such as joint types and cross types, so as to avoid us from repeating their definitions.

Making an alias does not create a new type, it just creates a new name to refer to that type.

Example:

For example, add a type alias admix to a custom union type, and then when we use this union type to declare a variable, we only need to specify the variable as type admix In this way, we don't need to define number|string|boolean multiple times, but directly use the alias admix to refer to this type:

type admix = number|string|boolean;  // 给联合类型加上别名

let a:admix = 100;
let b:admix = 'xkd';
let c:admix = true;

console.log(a);
console.log(b);
console.log(c);

Compile into JavaScript code:

var a = 100;
var b = 'xkd';
var c = true;
console.log(a);
console.log(b);
console.log(c);

Output:

100
xkd
true

Literal type

In TypeScript , the literal type allows us to specify the necessary fixed value. Different literals are separated | type defined literal type can also be aliased through the 0614363027ffe8 keyword.

Example:

For example, when the value of the variable "Peter Pan" is one of the "Mercury", then we can combine these two values into a combined type literal:

type names = '小飞侠' | '水星仔';  

let a:names = '小飞侠';
let b:names = '水星仔';

In the above code, the variables a and b names , then the value of these two variables can only be one of "Peter Pan" or "Mercury", otherwise an error will be reported.

Generally, we rarely use it directly. In some special cases, such as using string literal type to distinguish function overloading, or for narrowing down debugging bug etc., it can be used in this way.

Access the properties or methods of the union type

When TypeScript not sure which type a variable of a union type is, we can only access the attributes or methods common to all types of this union type.

Example:

In one example, we function info definition of two parameters, parameters username of type string type, age type is a union type, it may be string type or number Type:

function info( username: string, age : string | number) {
    console.log(age.length);  // 报错
}

When we use age to access the attribute length , it will cause an error. This is because only the string type has the attribute length , and the number type does not have this attribute. Since length not a common attribute of the numeric type and the string type, the variable age declared as this joint type cannot access this attribute.

function info( username: string, age : string | number) {
    console.log(age.toString());  
}

Accessing the toString() method through age will not report an error. This is because the toString() method is a method shared by the number type and the string type, so the age declared as a joint type can access this method.