Don’t talk about the basics, talk about in-depth.

type

Declare data with type

There are basic types like String, number, array, etc., but if these don’t meet your requirements, you can declare a myType of your own. For example, if you want a variable to be a number or a string or a specific value, instead of declaring it directly, you can also declare it as type.

It’s similar to substitution in mathematics.

type myType = number | string | '127.0.0.1'
type goodsData = {
    name: string
    price: number
}
Copy the code

Type extension

If you request goodsData for goods, but request pet data with a female and male data type, the code will repeat itself when defining the animalsData type, just extend the data type

type animalsData = goodsData & {
    sex: string
}

// This is equivalent to simpler code
type animalsData = {
    name: string
    price: number
    sex: string
}
Copy the code

interface

In TS, I feel interface and generics are used a lot.

Interfaces are used to define objects and classes.

interface Inter {
    name: string
    say(): void
}

var obj: Inter
obj = {
    name: 'x'.say() {
        console.log(1)}},class Father implements Inter {
    name: string
    constructor(name: string) {
        this.name = name
    }

    say() {
        console.log(1)}}Copy the code

Extends inheritance

Like type, an interface can inherit from another defined type

interface Father {
    name: string
    age: number
}

interface son extends Father {
    friends: string[]}Copy the code

The difference between type and interface

If type can do that, why interface?

Because interface has things that Type can’t do.

Different declaration methods

Type is assigned with “=”, whereas interface is declared directly.

type myType = {
    name: string
}

interface myType {
    name: string
}
Copy the code

Repeat statement

Interfaces can be declared repeatedly and are eventually merged, whereas type can only be declared once.

When you get a type and you want to extend it, and it’s too complex and you can’t just replace it with another type, you can use interface to extend that type. In VUE, it is common to add a global attribute and then extend the data type with interface to make TS compile.

interface ComponentCustomProperties {
    $store: Store<State>
}

interface ComponentCustomProperties {
    $filters: filters
}
Copy the code

When do you use type? When do YOU use interface?

Type can declare any type, but has poor extensibility when it comes to classes and objects. Interfaces can only declare classes and objects; other underlying types cannot. Interfaces are more like an updated version of Type on classes and objects.

So I suggest using Type for base data types and interface for classes and objects

The generic

Generics are also something I think I use a lot in TS, but I used to use only one layer of nesting until I saw two, or even three, layers of nesting and got a little confused, so I quickly learned more about it.

You can use generics if you don’t know what data type you’re entering, right

function fn<T> (params: T) {
    return params
}
fn<number> (1)
fn<string> ('xxx')
Copy the code

But that’s just the simplest way to write it, if you ask for a data, goods and lists, return data with code, meta, data. But if goods, data is a concrete object, and if lists, data is an array of animal objects.

When writing data types, you can define goods and lists. But there are a lot of things that are the same, and only some things that are different, so you’re writing a lot of duplicate code, and you can pull out the same things and pass in a generic instead of the different things.

It’s actually the math equivalent of extracting common factors.

import axios from 'axios'

// A generic type is passed to indicate that the data is indeterminate
interface Data<T> {
    code: number
    meta: string
    data: T
}

interface goods {
    price: number
    name: string
}

interface animal extends goods {
    sex: string
}

type lists = animal[]

// Axios also supports passing in a generic to get a data structure
async function fn() {
    const result1 = await axios.get<Data<goods>>('http')
    console.log(result1.data.data.price)

    const result2 = await axios.get<Data<lists>>('http')
    console.log(result2.data.data[0].sex)
}
Copy the code

This way, when requesting data, if you know what data structure you’re returning, you can pass in a specified generic, and you’ll get a nice code hint.