Angular 6 - 'Window'类型不存在属性'$'

Question

I am trying to use jQuery and jsGrid with my Angular 6 project, and it won't compile unless I comment offending part of code, and then once when it is compiled I comment and it works, but it gives error anyway. 我正在尝试将jQuery和jsGrid与我的Angular 6项目一起使用，除非我评论冒犯了部分代码，否则它将无法编译，然后一旦编译时我发表评论并且它有效，但无论如何它都会产生错误。 I am using Angular 6 CLI, IDE is Visual Studio Code, all latest versions. 我使用的是Angular 6 CLI，IDE是Visual Studio Code，所有最新版本。 VS highlights jQuery alias ie $ sign as a problem VS突出显示jQuery别名，即$ sign作为问题

Here is structure.directive.ts (I have to comment whole ngOnInit to start server, then uncomment it): 这是structure.directive.ts（我必须评论整个ngOnInit来启动服务器，然后取消注释它）：

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[structure]'
})
export class StructureDirective implements OnInit {

  clients = [
    { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
    { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
    { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
    { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
    { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
  ];

  countries = [
    { Name: "", Id: 0 },
    { Name: "United States", Id: 1 },
    { Name: "Canada", Id: 2 },
    { Name: "United Kingdom", Id: 3 }
  ];

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    window.$(this.elementRef.nativeElement).jsGrid({
      width: "100%",
      height: "400px",

      inserting: true,
      editing: true,
      sorting: true,
      paging: true,

      data: this.clients,

      fields: [
        { name: "Name", type: "text", width: 150, validate: "required" },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
        { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
        { type: "control" }
      ]
    })
  }
}

and here is index.html 这是index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Aug4</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Error is: 错误是：

Date: 2018-08-26T14:01:56.175Z - Hash: fb473e9c8d7de6bf4569 - Time: 224ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 52.1 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
ERROR in src/app/structure.directive.ts(26,12): error TS2339: Property '$' does not exist on type 'Window'.

How can I solve this? 我怎么解决这个问题？

Answer 1

This is a problem with the typescript types not with angular. 对于没有角度的打字稿类型，这是一个问题。 Run this command 运行此命令

npm install @types/jquery --save-dev

or if you are using yarn: 或者如果您使用纱线：

yarn add @types/jquery

And then add this in a type declaration file aka somefile.d.ts 然后将其添加到类型声明文件aka somefile.d.ts

declare global {
  interface Window {
    $: JQueryStatic
   }
}

This approach only makes the types available! 这种方法只能使类型可用！ You still have to import jquery somewhere. 你仍然需要在某处导入jquery。

alternatively you could import jquery. 或者你可以导入jquery。 This will include the library itself and the types. 这将包括库本身和类型。

import * as $ from "jquery"

and use it without the window prefix. 并使用它没有窗口前缀。

Answer 2

For the reference here is what I did (thanks to the Patrick): 这里的参考是我所做的（感谢Patrick）：

npm install @types/jquery

and then in component: 然后在组件中：

declare var $: any;
declare var jsGrid: any;

Otherwise, there will be same error for jsGrid. 否则，jsGrid会出现相同的错误。

Angular 6 - 'Window'类型不存在属性'$'

问题描述

2 个解决方案

解决方案1
4 已采纳 2018-08-26 14:15:17

解决方案2
0 2018-08-26 22:29:57

Angular 6 - 'Window'类型不存在属性'$'

问题描述

2 个解决方案

解决方案1 4 已采纳 2018-08-26 14:15:17

解决方案2 0 2018-08-26 22:29:57

解决方案1
4 已采纳 2018-08-26 14:15:17

解决方案2
0 2018-08-26 22:29:57