Some time ago, I began to learn TypeScript in my spare time, and I have just started my career. The purpose of writing this article is to summarize what I have learned. If there is any misunderstanding or problem with text description, please feel free to comment in the comments section!

TypeScript primitive data types

JS primitive data type, reference type, Symbol

We all know the five primitive data types of JS: Sting Number Null Undefined Boolean

Reference type: Object

ES6 New type: Symbol

TypeScript primitive data types

Basic types of

Number(Number type)

let decLiteral: number = 6;

String(String type)

let name: string = "zhuchangfeng";

Array (Array)

Either way, you can choose

let atlet arr: (string | number)[] = [66, "55".'111']; // The second way is to use Array generics, Array< element type >let arr: Array<string | number> = [6, 5, 8, 9, "225"];
Copy the code

Null(empty object)

let n: null = null;

Undeclared variable (Undefined)

let u: undefined = undefined;

Boolean Boolean type

let createdByNewBoolean: boolean = true; // Boolean() returns a Boolean value and new Boolean(true) returns a Boolean objectlet createdByNewBoolean: boolean = Boolean(true);
Copy the code

The Tuple (a Tuple)

let messArray=['someting', 1,true,undefined]; <! The value of the array declared with different element types must be the same as the declared type.let tuple:[number,string,undefined,null,string]=[6,'zhuchangfeng',undefined,null,'hello'];
Copy the code

Emu (enumeration)

Enumeration enum(Enumerators are assigned incrementing numbers starting from 0, and the enumeration values are also mapped backwards to the enumeration names)

    enum Color {
        Red,
        Bule,
        Green = 10,
        Sat = <any>"s"
    }
    letc: Color = Color.Green; / / 10let colorName: string = Color[10]; //Green
    let sat: Color = Color.Sat; //s
Copy the code

Any(Any value)

Any type (the easiest way to do this is to declare any when we can’t determine the type, but it’s not good to use it too much because it loses TypeScript use. There’s another type called assertion, which I’ll cover below.)

let a: any = 555;

Void(no type)

There is no void of any type. (The most common use of void is for function declarations, when a function does not need a return value.)

    public click(): void {
        console.log("object"); } <! Public getName(): string {const name: string = this.name; const name: string = this.name;return name;
    }
Copy the code

Types of assertions

Type assertions can be written as < type > names or as

    let someValue: string = "zhuchangfeng"; <! -- The first way to write -->letlen: number = (<string>someValue).length; <! -- Second way of writing -->let length: number = (someValue as string).length;
    console.log(len);
    console.log(length);

    public getLength(something: string | number): number {
        if ((<string>something).length) {
            return (<string>something).length;
        } else {
            return something.toString().length;
        }
    }

    public getLength(something: string | number): number {
        if ((something as string).length) {
            return (something as string).length;
        } else {
            returnsomething.toString().length; }}Copy the code

Never(Type of value that Never exists)

Citing official examples, I can’t think of any examples…

// A function that returns never must have an unreachable endfunctionerror(message: string): never { throw new Error(message); } // The inferred return value type is neverfunction fail() {
    return error("Something failed"); } // A function that returns never must have an unreachable endpointfunction infiniteLoop(): never {
    while (true) {}}Copy the code

Interface (interface)

interface IPerson { name: string; age? : number;readonly id: number;
    [propName: string]: any;
}
let tom: IPerson = {
    name: "zhuchangfeng", age: 5, id: 555, hello: 5 }; ? [propName: string]: any means that any value can be received, if defined as other types such as [propName: string]: string all receivers must be of type stringreadonlyValues can only be read and cannot be assignedCopy the code

So that’s the basic syntax when you talk about an interface you have to say another type alias

Type (type alias)

typeTUser = { name: string; age: string; }; <! IUser {name: string; age: number; }typeTSetUser = { (name: string, age: number): void; }; <! Interface ISetUser {(name: string, age: number): void; }Copy the code

That’s the basic way to write it and now let’s talk about the similarities and differences between them

Similarities and differences between Type and interface

The same

1. Can describe an object or a function

<! -- Describe an object -->typeTUser = { name: string; age: string; }; interface IUser { name: string; age: number; } <! Describe a function -->typeTSetUser = { (name: string, age: number): void; }; <! Interface ISetUser {(name: string, age: number): void; }Copy the code

2. Both allow expansion (although written differently)

<! --interface extends interface--> interface IName { name: string; } interface IUser extends IName { age: number; } <! --type &type-->
type TName = {
    name: string;
};
typeTUser = TName & { age: number }; <! --interface extendstype-->
type TName = {
    name: string
}
interface TAge extends TName {
    age: number;
}
let Attribute: TAge = { name: 'zyb', age: 23 }; <! --type extends interface--> interface IName { name: string; }type TAge = IName & { 
    name: number
}
let Attribute: TAge = { name: 'zyb', age: 23 };
Copy the code

different

1. Type can declare basic type aliases, union types, tuples, and so on

<! -- Declare the basic type alias -->typeTName = sting <! Interface IName = {name: sting} interface IAge = {age: number}typeTAttribute = IName | IAge <! - tuple -- -- >type TArray=[IName,IAge]
Copy the code

2. Interface can declare merge

interface IName { name: string; } interface IName { age: string; } <! Interface IName {age: string; name: string; }Copy the code

That’s it for now. In the next post, I’ll write about how some of the above syntax is used in vUE practice, so stay tuned…

Good bye!