VueBloghyhero6

TS 接口

2024-07-10 / 2024-07-10 / 38次浏览
这部分算是TS的作为强类型的特性部分,其实TS的编译器检查相对还算宽松,本人浅看过一些rust,它的强制编译器更严格数倍。

关于接口只用强类型的话,其实简单的写就是下面这样:
interface someValue {
    number: string;
    size: 10;
}

function getNumber(size: someValue) {
    console.log("====>",size)
}
扩展一个缺失类型就是
interface someValue {
    number?: string;
    size: 10;
}

function getNumber(size: someValue) {
    console.log("====>",size)
}

表示调用参数 number 可以缺省,
再有就是接口可能会返回复合对象甚至是不知道数量的,比如随便写个例子

一个是数组类型的一个键值对象类型的

interface SomeValue {
  number: string;
  sizeobj: {
    date: number;
    num: string;
  }[];
}
内联参数抽出去也行, 这么写

interface SomeValue {
  number: string;
  sizeobj: someItem[];
}

interface someItem {
    date: number;
    num: string;
}

interface SomeValue {
  number: string;
  sizeobj: {
    [key: number]: {
      date: number;
      num: string;
    };
  };
}
上面基本的写法基本可以覆盖接口参数,
上面接口部分没有写完,继续,
上面的?可选属性写过了,增加一个只读属性

interface Point {
    readonly x: number;
    readonly y: number;
}
这个接口被构造了之后就不可变更举例来说,
let p1: Point = {x: 10, y: 20};
p1.x = 5; // error
不可被二次赋值

还有就是和上面提到的 key: number 那部分
interface someConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

这养定义的接口就支持自定义命名扩展了
其实基本业务开发方面没有触碰到函数接口定义,基本定义接口参数类型就已经足够了,但是根据文档的介绍的特性还是追加函数类型。

interface somefn {
    (source: string,
    isString: string): boolean;
}

let myfn: somefn
上述函数接受俩个参数,返回一个布尔类型
myfn = function (source: string, isString: string) {
    let res = source == isString? true: false;
    return res;
}

myfn("hello", "hello"); // 返回 true
myfn("hello", "world"); // 返回 false

其实参数类型用的最多,结合 react + ts
剩余的高阶扩展
类类型
继承接口
混合类型(变量类型和函数类型混合)
比较高阶现实中的业务不见得用的到。