Angular2-Webpack-Typescript - 3rd 方库

Posted

技术标签:

【中文标题】Angular2-Webpack-Typescript - 3rd 方库【英文标题】:Angular2-Webpack-Typescript - 3rd party libraries 【发布时间】: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”也是如此。

【问题讨论】:

【参考方案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"/>

【讨论】:

以上是关于Angular2-Webpack-Typescript - 3rd 方库的主要内容,如果未能解决你的问题,请参考以下文章