javascript - 在 Typescript 中使用外部 JS-Library(基本原语图)

标签 javascript typescript

我正在采取第一步将一个相当大的项目从 javascript 迁移到 typescript。作为一名大约 2 年前开始 javascript 开发的 Java 开发人员,我的工具链仍然很初级。
我正在尝试将一个小的 JS 文件迁移到 TS 作为概念证明。 JS代码配置了Basic Primitives Diagram .
几乎所有事情都解决了。但是我在以 typescript 可以理解的方式声明全局范围函数时遇到了大问题。这是我的代码的一小部分:

export {}
declare global {
  export interface Window {
    MyGlobalVar: any;
  }

  export ChartItemConfig{
    //properties
  }

  //I thought this and the following declarations would solve the problem. They dont :(
  export interface primitives {
    orgdiagram: Orgdiagram;
  }

  export interface Orgdiagram {
    Config: Config;
  }

  export interface Config {
    //properties
  }
}

window.MyGlobalVar.myGlobalFunction = function (id: string, items: Array<ChartItemConfig>) {
    //... more code
    // @ts-ignore
    let options: Config = new primitives.orgdiagram.Config();
    //... more code
 }
我想摆脱 @ts-ignore陈述。但无论我尝试什么,我的代码都不会转换。我收到错误 TS2693: 'primitives' only refers to a type, but is being used as a value here.我确定这是一个初学者的问题,但我在 www 中找不到解决方案。
编辑:
看来我对我的问题还不够清楚:new primitives.orgdiagram.Config();在运行时是有效的 JS 代码。如何以 TS 理解它是构造函数调用的方式声明符号?
编辑:
我的当前版本:
export {}
declare global {
  export interface Window {
    MyGlobalVar: any;
  }

  export const primitives:Primitives;

  export class Primitives {
    orgdiagram: Orgdiagram;
  }

  export class Orgdiagram {
    Config: () => Config;
  }

  export class Config { }
  
  //... more
}

window.MyGlobalVar.myGlobalFunction  = function (id: string, items: Array<ChartItemConfig>) {
  //The following line fails with: TS7009: 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type
  let options: Config = new primitives.orgdiagram.Config();
  //... more
}
编辑:
我终于让它工作了。 fettblog.eu introduced me to the constructor interface pattern ,这解决了我的问题:)
我的工作声明现在是
export {}
declare global {
      
  const primitives:Primitives;

  class Primitives {
    orgdiagram: Orgdiagram;
  }

  class Orgdiagram {
    Config: ConfigConstructor;
  }

  interface ConfigConstructor{
    new (): Config;
  }

  class Config {
    //....

最佳答案

你需要做的是声明一个 const :

declare global {
    export const primitives: Primitives

    export interface Primitives {
        orgdiagram: Orgdiagram;
    }
}
通过这种方式,您告诉 Typescript “相信我,在全局范围内的其他地方声明了一个常量,称为 primitives,其类型为 Primitives”。它会生成正确的代码。
至于构造函数,您需要指定该函数是构造函数,以便能够与 new 一起使用。 :
export class Orgdiagram {
    Config: { new(): Config };
}

关于javascript - 在 Typescript 中使用外部 JS-Library(基本原语图),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63391974/

相关文章:

javascript - 谷歌电子表格 : How to html publish pages based on current day

javascript - Typescript:表达函数实例属性

Typescript 根据是否存在变量更改返回值的类型推断

javascript - 如何在 TypeScript 中的类型上定义互斥属性?

javascript - 如何为多种语言生成类

javascript - Chrome 扩展跨域请求

javascript - 使用 svg 格式的 D3.js 预渲染饼图服务器时出错

javascript - ag-grid:使用 'serverSide' rowModel 刷新当前 View

typescript - Angular 2找不到文件名 'Set'

javascript - 我正在尝试获取元素上文本阴影的 X 和 Y 值