【发布时间】：2016-05-06 14:50:40
【问题描述】：
我发现 ag-grid 依赖项的结构方式及其文档存在 2 个问题。希望有人可以向我推荐一个使用 ag-grid 的好的 typescript Angular1.x 示例。
我有一个基本的 AngularJs SPA 项目
我安装了"ag-grid": "3.1.0"
bower install ag-grid
通过在 Visual Studio 2015 中将依赖项添加到我的 bower.json 中，结果它在 bower_components 下添加了以下结构：
ag-grid
|
|-- dist
|--src
|
|--ts
|
...
我遇到的问题是 除非我物理删除 /bower_components/ag-grid/src 文件夹，否则 Visual Studio 将在该源文件夹下的 ts 文件中显示 926 错误。错误如：
TS2345 Argument of type 'this' is not assignable to parameter of type 'Grid'.
Type 'ag.grid.Grid' is not assignable to type 'ag.grid.Grid'. TypeScript Virtual Projects C:\MyProject\bower_components\ag-grid\src\ts\grid.ts
以及bower_components/ag-grid/dist/ag-grid.ts 和bower_components/ag-grid/src/ts/widgets/agDropdownList.ts 之间的许多重复问题，例如：
TS2300 Build: Duplicate identifier 'AgDropdownList'
TS2300 Build: Duplicate identifier 'AgDropdownList'
我知道有重复的 TS 类和其他名称，Visual Studio 2016 不喜欢这样。 但这是预期的结果吗？为什么要将源包含在 bower 依赖项中。是否我想生成（例如使用 Gulp）我自己的 dist/ag-grid.js？如果是这样，为什么要包含 dist/ag-grid.ts 文件夹，如果它会发生冲突？
我对前端开发和任务运行器策略不太熟悉，所以这可能是一种常见的做法，开发人员应该删除/bower_components/ag-grid/src 文件夹。
如果改为删除 /bower_components/ag-grid/src 文件夹，我删除了 bower_components/ag-grid/dist/ag-grid.ts 我仍然会收到 13 个错误，例如
TS2304 Build: Cannot find name 'exports'
TS2304 Build: Cannot find name 'module'
它甚至有一个对/// <reference path="../../typings/tsd" /> 的引用，因为根本没有typings 文件夹。
感觉这个依赖有点乱，不是吗？
让我对 ag-grid 感到困惑的另一件事是，在示例中它说AngularJs controller would need the ngGrid dependency。然而这个依赖没有被使用。这是我没有注入此依赖项的示例：
观点：
<div ng-controller="app.shipments.ShipmentsController as shipments">
<h1>Shipments</h1>
<div ag-grid="shipments.gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>
打字稿控制器：
module app.shipments {
'use strict';
interface IShipmentsScope {
gridOptions: ag.grid.GridOptions;
}
class ShipmentsController implements IShipmentsScope {
static $inject = [
];
constructor() {
}
gridOptions: ag.grid.GridOptions = {
columnDefs: [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
],
rowData : [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
]
};
}
angular
.module('app.shipments')
.controller('app.shipments.ShipmentsController', ShipmentsController);
}
只要我的服务器提供 JS 依赖和 2 个 css，它就可以正常工作：
<link href="../bower_components/ag-grid/dist/ag-grid.css" rel="stylesheet" />
<link href="../bower_components/ag-grid/dist/theme-fresh.css" rel="stylesheet" />
<script src="../bower_components/ag-grid/dist/ag-grid.js"></script>
我想我要的是澄清，说明为什么 bower 依赖项是以这种方式构建的，在使用这种依赖项进行开发时，VS 不抱怨 TS 错误的常见做法是什么并澄清 agGrid 依赖项是否需要注入 AngularJs 控制器。 :-) 谢谢！
【问题讨论】：
标签： angularjs typescript visual-studio-2015 bower ag-grid