关于在声明文件里面声明了一个混合接口后，如何在ts文件里面去实现它

来源：2-15 声明文件第二部分

慕妹8262677

2023-03-11

关于这一节里面calculator函数的定义
课程里面是这样给的声明
在声明文件里面：

type Operator = "add" | "mutiple"
declare interface ICalculator {
    (operator: Operator, X: number, y: number): number
    add(x: number, y: number):number;
    mutiple(x: number, y: number): number;
}

declare let calculator:ICalculator

在具体是实现里面，我想知道怎么去定义实现这个calculator函数呢，后面我去网上看了下，直接在ts文件里面写了如下定义：

calculator = <ICalculator>function (operator, x, y) {
    if (operator == 'add') {
        return x + y
    } else {
        return x * y
    }
}
calculator.add = (x, y) => {
    return x + y
}
calculator.mutiple = (x: number, y: number): number => {
    return x * y
}

但是最后运行报错了

图片描述
老师能为我解答下吗？而且我按视频里面最开始是在声明文件里面用const声明calculator后，出来定义的时候，会报错：不能修改const定义的值

写回答

1回答

张轩

2023-03-12

同学你好

你这里还是混淆了声明文件和实际实现文件的区别。

声明文件是当你使用 js 编写模块才需要写的。

假如你直接使用 ts 编写，就不需要写声明文件，直接用 ts 写，然后编译的时候，这个 d.ts 文件可以自动生成的。

所以你可以这样修改一下，写一个文件就可以了。

//more.ts

type Operator = "add" | "mutiple"
interface ICalculator {
    (operator: Operator, X: number, y: number): number
    add(x: number, y: number):number;
    mutiple(x: number, y: number): number;
}

const calculator:ICalculator = function (operator, x, y) {
    if (operator == 'add') {
        return x + y
    } else {
        return x * y
    }
}
calculator.add = (x, y) => {
    return x + y
}
calculator.mutiple = (x: number, y: number): number => {
    return x * y
}
// 这样就没问题了哈

慕妹8262677

并且这样在声明文件声明后，在使用js去实现这个模块后，调用也会出现类型提示了，就和您课程里面说的就对上了，谢谢老师！

2023-03-12

共2条回复

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2123 学习 · 959 问题

查看课程

相似问题

关于声明文件里面export的作用

回答 1

老师我想实现一个react图片预览的功能，有没有好的第三方插件介绍一下，以前用的是viewerjs