typescript Visual Studio Code 抱怨 *.d.ts 文件中定义的类型“找不到命名空间”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32981673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 03:06:43  来源:igfitidea点击:

Visual Studio Code complains that it "Cannot find namespace" for types defined in *.d.ts files

angularjstypescriptgulpyeomanvisual-studio-code

提问by zabbarob

I created a new project using the gulp-angularYeoman generator with language set to TypeScript. Then ran the Gulpbuild process and also opened the page in a web browser, which all worked without any bigger problems. I only had to replace ref: "master"in the tsd.jsonwith ref: "1.4.1"to make the build work. Basically I executed following commands:

我使用gulp-angularYeoman 生成器创建了一个新项目,语言设置为 TypeScript。然后运行Gulp构建过程并在 Web 浏览器中打开页面,所有这些都没有出现任何更大的问题。我只需要ref: "master"tsd.jsonwith 中替换ref: "1.4.1"即可使构建工作。基本上我执行了以下命令:

yo gulp-angular
vim tsd.json
gulp
gulp serve
code .

Afterwards I opened the project in Visual Studio Code.

之后我在Visual Studio Code 中打开了该项目。

Now, Visual Studio Code complains for example that it "Cannot find namespace 'ng'"for each occurrence where AngularJSdata types are used. It also complains about MomentJSand other typings defined in *.d.tsfiles.

现在,例如,Visual Studio Code 会抱怨每次使用AngularJS数据类型时“找不到命名空间 'ng'”。它还抱怨MomentJS和文件中定义的其他类型。*.d.ts

The project's tsd.jsonlooks like this:

项目的tsd.json样子是这样的:

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "1.4.1",
  "path": ".tmp/typings",
  "bundle": ".tmp/typings/tsd.d.ts"
}

The .tmp/typingsfolder contains following files:

.tmp/typings文件夹包含以下文件:

angular-ui-router/angular-ui-router.d.ts
angularjs/angular-animate.d.ts
angularjs/angular-cookies.d.ts
angularjs/angular-mocks.d.ts
angularjs/angular-resource.d.ts
angularjs/angular-sanitize.d.ts
angularjs/angular.d.ts
jquery/jquery.d.ts
moment/moment-node.d.ts
moment/moment.d.ts
toastr/toastr.d.ts
tsd.d.ts

To give an example of one of the source files where Visual Studio Code is complaining, here is the navbar.directive.tsfile:

为了举例说明 Visual Studio Code 抱怨的源文件之一,这里是navbar.directive.ts文件:

module editorTs {
  'use strict';

  /** @ngInject */
  export function acmeNavbar(): ng.IDirective {

    return {
      restrict: 'E',
      scope: {
        creationDate: '='
      },
      templateUrl: 'app/components/navbar/navbar.html',
      controller: NavbarController,
      controllerAs: 'vm',
      bindToController: true
    };

  }

  /** @ngInject */
  class NavbarController {
    public relativeDate: string;

    constructor(moment: moment.MomentStatic) {
      this.relativeDate = moment(1444135396045).fromNow();
    }
  }
}

In this file Visual Studio Code is complaining about the ng.IDirectivetype that it "Cannot find namespace 'ng'"and it is complaining about the moment.MomentStatictype that it "Cannot find namespace 'moment'".

在这个文件中,Visual Studio Code 抱怨ng.IDirective“找不到命名空间 'ng'”moment.MomentStatic类型,它抱怨它“找不到命名空间 'moment'”的类型

edit:

编辑:

Explicitely referencing the type definition files by adding the following to the top of navbar.directive.tsremoves the problem:

通过将以下内容添加到顶部来显式引用类型定义文件navbar.directive.ts可以解决问题:

/// <reference path="../../../../.tmp/typings/angularjs/angular.d.ts"/>
/// <reference path="../../../../.tmp/typings/moment/moment.d.ts"/>

But these files are already referenced in .tmp/tsd.d.ts, which contains the following:

但是这些文件已经在 中被引用.tmp/tsd.d.ts,其中包含以下内容:

/// <reference path="angular-ui-router/angular-ui-router.d.ts" />
/// <reference path="angularjs/angular-animate.d.ts" />
/// <reference path="angularjs/angular-cookies.d.ts" />
/// <reference path="angularjs/angular-mocks.d.ts" />
/// <reference path="angularjs/angular-resource.d.ts" />
/// <reference path="angularjs/angular-sanitize.d.ts" />
/// <reference path="angularjs/angular.d.ts" />
/// <reference path="jquery/jquery.d.ts" />
/// <reference path="moment/moment-node.d.ts" />
/// <reference path="moment/moment.d.ts" />
/// <reference path="toastr/toastr.d.ts" />

So there should be no need to explicitly reference the files?

所以应该不需要显式引用文件?

采纳答案by basarat

Cannot find namespace 'ng'"

找不到命名空间 'ng'"

Make sure the project contains no reference to declare module ng. Same for moment.

确保项目不包含对declare module ng. 暂时一样。

Update

更新

based on edit in the question:

基于问题中的编辑:

Explicitely referencing the type definition files by adding the following to the top of navbar.directive.ts removes the problem

通过将以下内容添加到 navbar.directive.ts 的顶部来显式引用类型定义文件可消除该问题

Please use a tsconfig.json: https://basarat.gitbooks.io/typescript/content/docs/project/compilation-context.html

请使用tsconfig.jsonhttps: //basarat.gitbooks.io/typescript/content/docs/project/compilation-context.html

回答by Vakey

Adding a tsconfig.jsonto the root of my VS Code project is what fixed the issue for me. Also, had to restart VS code. Here is what I put inside that file:

将 a 添加tsconfig.json到我的 VS Code 项目的根目录是为我解决问题的方法。另外,不得不重新启动VS代码。这是我在该文件中放入的内容:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    }
}

For more info on the tsconfig.jsonfile, check out:

有关该tsconfig.json文件的更多信息,请查看:

https://code.visualstudio.com/docs/languages/typescript

https://code.visualstudio.com/docs/languages/typescript

回答by djabraham

I found the following in a discreet location in the code. Likely put there to avoid type errors. Seems like vscode encountered this and redefined the global 'angular' variable as type of 'any'.

我在代码中的一个隐蔽位置发现了以下内容。可能放在那里以避免类型错误。似乎 vscode 遇到了这个并将全局“angular”变量重新定义为“any”类型。

var angular = window['angular'];

回答by Benson

I had the same problem; it appears typings was stripping the original definition file referencing the "ng" import.

我有同样的问题; 似乎打字正在剥离引用“ng”导入的原始定义文件。

Add this back to your original angular/index.d.ts file:

将此添加回您的原始 angular/index.d.ts 文件:

// Collapse angular into ng import ng = angular;

// Collapse angular into ng import ng = angular;

Or better yet, place it in a ng.d.ts file so it's not overwritten by typings again.

或者更好的是,将它放在一个 ng.d.ts 文件中,这样它就不会被再次输入覆盖。