个人中心
gpt4 book ai didi

javascript - 在 Typescript 中输入内容时遇到问题

转载 作者：行者123 更新时间：2023-12-02 14:15:52 25 4
gpt4 key购买 nike

编辑:我重写了这篇文章，以更好地解释我所采取的步骤以及我面临的问题

我从一个简单的 html/js 页面开始。我还使用 CDN 中的 xregexp。

var reg = XRegExp("^lights:(?<option>on|off)$", "xgi");
var match = XRegExp.exec("lights:on", reg);
document.body.innerText = "Lights are: " + match["option"];
<!DOCTYPE html>
<html lang="en">
   <head></head>
   <body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xregexp/3.1.1/xregexp-all.js"></script>
<script src="app.js"></script>

</html>

接下来，我想将js文件转换为typescript。所以我:

  • 将.js重命名为.ts
  • 在 ts 文件顶部添加了 declare var XRegExp:any; ( described here )
  • 运行 tsc --init 创建 tsconfig 文件
  • 运行tsc

到目前为止，Typescript 编译良好，页面仍然可以工作。

接下来，我想将 declare var XRegExp:any 替换为一个接口(interface)，该接口(interface)来自社区维护的声明文件。

我通过 typings install dt~xregexp -SG 安装 xregexp 的类型 ( d.ts file link )

但是我无法访问 .d.ts 文件中声明的接口(interface)，因为该声明使用 declare module 'xregexp' 和 export = .

根据 Typescript 的文档 Modules , export = 与 import = require() 一起使用。但这涉及到模块加载，这不是我想要的。

我已经尝试过 Pelle 的建议，但仍然不知道如何使用它声明环境变量。

declare var XRegExp:xregexp.OuterXRegExp; // <-- TS error: Module 'xregexp' has no exported member 'OuterXRegExp'

我想知道:

  1. d.ts 声明使用声明模块“xregexp”。我可以在不使用导入的情况下引用其任何内部接口(interface)/类型吗？
  2. 我可以创建一个额外的 d.ts 来声明环境变量吗？ (就像 dt~react-global 所做的那样)如何在不修改下载的 d.ts 的情况下执行此操作？
    • 原因:我不想更改通过 typings 拉取的声明文件，以防将来发生更改。

此时，我不进行 Node 开发，也不想设置模块加载器和/或 browserify/webpack。

我只是想将已经工作的 js 文件转换为 ts，并且想让 Typescript 知道环境变量 XRegExp，它具有下载的 d 中指定的接口(interface).ts。我是否可以在没有太多仪式的情况下实现这一目标？

[编辑]

因此，我使用 jquery.d.ts 作为指导重写了声明文件。

这似乎在通过脚本或导入加载时有效，但没有回答我原来的问题。

interface TokenOpts {
  scope ? : string;
  trigger ? : () => boolean;
  customFlags ? : string;
}

interface XRegExp {
  (pattern: string, flags ? : string): RegExp;
  (pattern: RegExp): RegExp;

  addToken(regex: RegExp, handler: (matchArr: RegExpExecArray, scope: string) => string, options ? : TokenOpts): void;

  build(pattern: string, subs: string[], flags ? : string): RegExp;
  cache(pattern: string, flags ? : string): RegExp;
  escape(str: string): string;
  exec(str: string, regex: RegExp, pos ? : number, sticky ? : boolean): RegExpExecArray;
  forEach(str: string, regex: RegExp, callback: (matchArr: RegExpExecArray, index: number, input: string, regexp: RegExp) => void): any;
  globalize(regex: RegExp): RegExp;

  install(options: string): void;
  install(options: Object): void;

  isInstalled(feature: string): boolean;
  isRegExp(value: any): boolean;
  match(str: string, regex: RegExp, scope: string): any;
  match(str: string, regex: RegExp, scope: "one"): string;
  match(str: string, regex: RegExp, scope: "all"): string[];
  match(str: string, regex: RegExp): string[];
  matchChain(str: string, chain: RegExp[]): string[];
  matchChain(str: string, chain: {
    regex: RegExp;
    backref: string
  }[]): string[];
  matchChain(str: string, chain: {
    regex: RegExp;
    backref: number
  }[]): string[];
  matchRecursive(str: string, left: string, right: string, flags ? : string, options ? : Object): string[];

  replace(str: string, search: string, replacement: string, scope ? : string): string;
  replace(str: string, search: string, replacement: Function, scope ? : string): string;
  replace(str: string, search: RegExp, replacement: string, scope ? : string): string;
  replace(str: string, search: RegExp, replacement: Function, scope ? : string): string;
  replaceEach(str: string, replacements: Array < RegExp | string > []): string;

  split(str: string, separator: string, limit ? : number): string[];
  split(str: string, separator: RegExp, limit ? : number): string[];

  test(str: string, regex: RegExp, pos ? : number, sticky ? : boolean): boolean;

  uninstall(options: Object): void;
  uninstall(options: string): void;

  union(patterns: string[], flags ? : string): RegExp;
  version: string;
}

declare module "xregexp" {
  export = XRegExp;
}

declare var XRegExp: XRegExp;

最佳答案

这并不是一个真正的 typescript 问题:如果你想使用 npm 包，强烈建议使用像 browserify 或 webpack 这样的依赖管理器。 (如果您只是在寻找一些东西来处理您的模块，我会推荐 browserify)。

如果您确实不想使用 npm 的惊人功能，还有一种解决此特定问题的方法:更改声明文件以声明命名空间而不是模块。现在您可以在项目中的任何位置有效地使用这些类型。

只需对声明文件进行这两项更改，就可以开始了:

  • 声明命名空间而不是模块:

    declare module 'xregexp' {
    //becomes
    declare namespace xregexp {

  • 删除页面底部的导出:

    // remove this: 
    export = OuterXRegExp;

现在您可以在项目中的任何位置调用。例如:

var outerxregexp: xregexp.OuterXRegExp.TokenOpts = { trigger: () => true }

但是，强烈建议引入 browserify 等 🙂

关于javascript - 在 Typescript 中输入内容时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39045255/

25 4 0
文章推荐： javascript - 这个对象合并功能可能会出现哪些错误？
文章推荐： javascript - jQuery:使用 setTimeout 时函数未执行两次
文章推荐： javascript - 如何调试哪个脚本正在尝试使用 Geolocation API？
文章推荐： javascript - app-location 元素 {{route}} 是如何设置的？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com