使打字无法在Typescript中工作

Question

Edit: I rewrote the post to better explain the steps I've taken and the issues I'm facing 编辑：我重写了帖子，以更好地解释我所采取的步骤和面临的问题

I started out with a simple html/js page. 我从一个简单的html / js页面开始。 I'm also using xregexp from a cdn. 我还使用xregexp从CDN。

 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>

Next, I want to convert the js file to typescript. 接下来，我想将js文件转换为打字稿。 So I: 所以我：

rename .js to .ts 将.js重命名为.ts
added declare var XRegExp:any; 添加了declare var XRegExp:any; to the top of the ts file ( described here ) 到ts文件的顶部（此处描述）
ran tsc --init to create tsconfig file 运行tsc --init创建tsconfig文件
ran tsc 运行tsc

So far, Typescript compiles fine, and page is still working. 到目前为止，Typescript可以正常编译，并且页面仍在工作。

Next, I want to replace the declare var XRegExp:any with an interface, one from a community-maintained declaration file. 接下来，我想用接口替换declare var XRegExp:any ，该接口来自社区维护的声明文件。

I install the typings for xregexp via typings install dt~xregexp -SG ( d.ts file link ) 我通过xregexp typings install dt~xregexp -SG （ d.ts文件链接） typings install dt~xregexp -SG 类型

But I'm unable to access the interfaces declared in the .d.ts file, because the declaration uses declare module 'xregexp' and export = . 但是我无法访问.d.ts文件中声明的接口，因为该声明使用了declare module 'xregexp'和export = 。

According to Typescript's documentation on Modules , export = is used with import = require() . 根据Typescript关于模块的文档， export =与import = require() 。 But that involves module loading, which is not what I want. 但这涉及模块加载，这不是我想要的。

I've tried Pelle's suggestion, but still have no idea how to declare an ambient variable using it. 我已经尝试了Pelle的建议，但是仍然不知道如何使用它来声明环境变量。

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

I would like to know: 我想知道：

The d.ts declaration uses declare module "xregexp" . d.ts声明使用declare module "xregexp" 。 Can I refer to any of its inner interfaces/types without an import ? 我可以在不import情况下引用其任何内部接口/类型吗？
is it possible for me to create an additional d.ts to declare the ambient variable? 我可以创建一个附加的d.ts来声明环境变量吗？ (like what dt~react-global does) How do I do this, without modifying the downloaded d.ts ? （如d.ts dt~react-global一样）如何在不修改下载的d.ts情况下执行此d.ts ？
- reason: I would rather not change the declaration file pulled via typings in case of future changes. 理由：我宁愿不改变通过拉申报文件typings在未来的变化情况。

At this point, I'm not doing Node development, nor do I want to set up a module loader and/or browserify/webpack. 在这一点上，我没有在进行Node开发，也不想设置模块加载器和/或browserify / webpack。

I simply want to convert an already-working js file to ts, and would like to make Typescript aware of an ambient variable XRegExp , which has an interface as specified in the downloaded d.ts . 我只想将一个已经正常工作的js文件转换为ts，并想让Typescript知道环境变量XRegExp ，该变量具有下载的d.ts指定的接口。 Is it possible for me to achieve this without too much ceremony? 我是否可以在没有太多仪式的情况下实现这一目标？

[Edit] [编辑]

So, I rewrote the declaration file, using jquery.d.ts as a guide. 因此，我使用jquery.d.ts作为指南重写了声明文件。

This appears to work when loading via script or import, but doesn't answer my original question. 通过脚本或导入加载时，此方法似乎可以工作，但无法回答我的原始问题。

 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;

Answer 1

This is not really a typescript problem: if you want to use npm packages, it is strongly recommended to use a dependency manager like browserify or webpack to them. 这实际上不是打字稿问题：如果要使用npm软件包，强烈建议对它们使用依赖管理器，例如browserify或webpack。 (I would recommend browserify, if you're only looking for something to handle your modules). （如果您只是在寻找处理模块的方法，我建议使用browserify）。

If you really don't want to use the amazing power of npm, there is also a hacky way of solving this specific problem: changing the declaration file to declare a namespace instead of a module . 如果您真的不想使用npm的强大功能，那么还有一种解决该特定问题的简便方法： 更改声明文件以声明名称空间而不是module 。 Now you can effectively use the types anywhere in your project. 现在，您可以在项目中的任何地方有效地使用类型。

Just make these two changes to your declaration file, and you should be good to go: 只需对声明文件进行以下两项更改，就可以了：

declare a namespace instead of a module: 声明一个名称空间而不是一个模块：
```
 declare module 'xregexp' { //becomes declare namespace xregexp { 
```
get rid of the export on the bottom of the page: 摆脱页面底部的导出：
```
 // remove this: export = OuterXRegExp; 
```

Now you can call anywhere in your project. 现在，您可以在项目中的任何地方调用。 Eg: 例如：

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

But again, it is strongly recommended to pull in browserify or so 🙂 但是同样，强烈建议拉近browserify🙂

Answer 2

Try adding the following line on top of the file where you are using XRegExp: 尝试在使用XRegExp的文件顶部添加以下行：

/// <reference path="./path/to/downloaded/xregexp.d.ts" />

More on the matter triple slash directives 有关此问题的更多信息三斜杠指令

Answer 3

if you have a tsconfig.json you'll need to add the d.ts file like this: 如果您有tsconfig.json ，则需要添加d.ts文件，如下所示：

{
    "files": [
        "path/to/definition/xregexp.d.ts",
    ]
}

使打字无法在Typescript中工作

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-08-19 22:28:25

解决方案2
0 2016-08-19 18:24:58

解决方案3
0 2016-08-19 22:34:24

使打字无法在Typescript中工作

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-08-19 22:28:25

解决方案2 0 2016-08-19 18:24:58

解决方案3 0 2016-08-19 22:34:24

解决方案1
2 已采纳 2016-08-19 22:28:25

解决方案2
0 2016-08-19 18:24:58

解决方案3
0 2016-08-19 22:34:24