持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

前言

加速成长！xdm，马上就学习完TS了，有没有工作推荐啊，求个推荐

技术栈：vue2/vue3 + ts

地点上海

接口

接口也是一种对类的行为进行抽象，也可以定义一种数据类型

接口实现与使用

interface Person {
    name: string
    age:number
}
const p: Person = {
    name: "scc",
    age:18
}

这样就定义了一个Person的接口

可以和typeof一样给p定义类型

接口的属性

只读

可以使用readonly让属性变成只读属性，属性被修改就会报错

interface Person {
    readonly name: string
    age:number
}
const p: Person = {
    name: "scc",
    age:18
}

当我们修改p的name属性就会报错

可选属性

使用？让属性变成可选属性，赋值的时候可以选择不传值

interface Person {
    readonly name: string
    age?:number
}
const p: Person = {
    name: "scc",
}

不传值也没有报错

接口与typeof的区别

既然typeof已经可以定义一种类型数据，那么为什么还要用interface呢

区别

interface是可以在作用于范围内多次定义数据的，且会被合并

interface Person {
    readonly name: string
    age?:number
}
interface Person {
    friend: {
        name:string
    }
}
const p: Person = {
    name: "scc",
}

当我们赋值给p但是没有定义friend就会报错

而用typeof定义数据类型，如果定义两个就会直接报错

typeof Person {
    readonly name: string
    age?:number
}
typeof Person {
    friend: {
        name:string
    }
}

泛型

实现

泛型就是我们以把类型当作参数的形式传递给函数

我们定义一个可以返回接受一个参数，并且把参数返回的函数，此时我们就可以用泛型，让使用函数的时候把数据类型传给我们

function add<Type>(num: Type):Type {
    return num
}
add<string>("scc")

这样不论我们传什么类型的参数，都由我们调用者决定了

泛型用在接口

接口也可以使用泛型，我们只要在确定值的时候把类型传递过去就可以了

interface Person<T> {
    name: T
    age:T
}
const p: Person<string> = {
    name: "scc",
    age:"18"
}

这样我们就可以根据自己接口数据类型

结束

大家加油啊，我要加速努力了