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.