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

Question

关于这一节里面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定义的值

Answer 1

张轩 2023-03-12 09:54:31

同学你好

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

声明文件是当你使用 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 #1

  哦，老师，经过你说声明文件是在使用js编写模块才需要写的这句话，我试了下用声明文件声明后，在js里面去编写刚刚声明的那个接口的定义，我这里弄懂了，原来可以在声明文件里面声明后，可以在js文件里面去直接这样写
  calculator = function (operator, x, y) {
      if (operator == 'add') {
          return x + y
      } else {
          return x * y
      }
  }
  calculator.add = (x, y) => {
      return x + y
  }
  calculator.mutiple = (x, y)=> {
      return x * y
  }
  就可以了，谢谢老师，我终于懂这里了

• 提问者 慕妹8262677 #2

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