Angular2-Webpack-Typescript - 3rd 方库答案

【问题标题】：Angular2-Webpack-Typescript - 3rd party librariesAngular2-Webpack-Typescript - 3rd 方库
【发布时间】：2016-06-08 20:39:06
【问题描述】：

我从一个漂亮的种子项目开始：https://github.com/AngularClass/angular2-webpack-starter

我一直坚持使用 3rd-party 模块。有人可以帮助/解释如何正确添加/使用该项目的外部模块吗？

例如，我使用以下方法添加“不可变”：

npm install immutable --save

之后，我尝试将该模块链接到组件中：

import * as immutable from 'immutable';
import {List} from 'immutable';
import Immutable = require('immutable');

没有任何帮助，它总是返回 TS2307：找不到模块“immutable”。例如，“moment”也是如此。

【问题讨论】：

标签： typescript angular webpack immutable.js

【解决方案1】：

您需要将一个类型文件添加到位于node_modules\immutable\dist\immutable.d.ts 的项目中。您需要在项目中引用它。它应该看起来像这样：

/// <reference path="node_modules/immutable/dist/immutable.d.ts" />
import * as immutable from 'immutable';
import {List} from 'immutable';
import Immutable = require('immutable');

目前，DefinitelyTyped 上提供了类型。我建议使用tsd 来安装它们。

如果您遇到一个您想使用但找不到任何类型的库，您可以查看this question 以获得仍然使用它的简单方法。你不会得到任何 Typescript 的好处。

【讨论】：

@Alexey 是的。您可以将其添加到 tsconfig.json 文件的“文件”部分。如果您使用排除语法，只需确保它没有被排除。我还编辑了我的答案，以提供一个指向输入时刻的链接。
@rgvassar ...如果 lib 没有打字稿定义？
@deostroll 我的回答的最后一部分包含指向另一个问题的链接，该问题解决了确切的情况。

【解决方案2】：

编辑：将以下内容添加到您的 main.ts 文件中。

import 'immutable'

这应该使您可以访问所有组件中的可估算 api，而无需任何额外的导入。

【讨论】：

您能否建议不包含类型的库的操作算法？例如“时刻”？

【解决方案3】：

让我为使用第三方 (npm) javascript 模块且没有类型定义并希望摆脱“找不到模块”错误消息的人提供一种可能的解决方法

假设您使用 npm 包 jsonapi-serializer 并在您的 example.ts 文件中引用它：

import {Serializer, Deserializer} from "jsonapi-serializer";

@Injectable()
export class ExampleService {
  var deserializer = new Deserializer({ keyForAttribute: 'camelCase'});
}

编译器会报错：Error:(1, 40) TS2307:Cannot find module 'jsonapi-serializer'.

您可以通过创建以下文件自己声明类型定义：jsonapi-serializer.d.ts。您必须指定主要功能，但使用any 类型可以使其相对简单。（如果您创建完整的定义，请考虑 donating 定义文件）：

declare module 'jsonapi-serializer' {

    export class Serializer {
        constructor(type: string, ...options: any[]);
        serialize(arg: any)
    }

    export  class Deserializer {
        constructor(...options: any[]);
        deserialize()
    }
}

如果您将此文件放在项目中，编译器将识别该模块。如果这不起作用，您还可以通过将以下行放在文件顶部来从您的 ExampleService.ts 文件中引用它：

///<reference path="jsonapi-serializer.d.ts"/>

【讨论】：