Headroom.js with Typecript找不到模塊

Question

任何人都可以在Typescript land中工作嗎？谷歌搜索，看起來不是。

將此庫合併到我的Browserify項目中沒有任何運氣。

我有這個分型文件headroom.js

• https://github.com/retyped/headroom-tsd-ambient/blob/master/headroom.d.ts
• 安裝爲node_modules/headroom.js/節點模塊（是的，它是一個文件夾的v0.9.3，我以前從未見過這樣命名爲節點模塊。 ）
• headroom.js的主入口按的package.json是node_modules/headroom.js/dist/headroom.js

當我嘗試到模塊導入我的應用程序，它不能是找到。

{ [TypeScript error: resources/assets/typescript/app.ts(12,24): Error TS2307: Cannot find module 'headroom.js'.] 
    message: 'resources/assets/typescript/app.ts(12,24): Error TS2307: Cannot find module \'headroom.js\'.', 
    fileName: 'resources/assets/typescript/app.ts', 
    line: 12, 
    column: 24, 
    name: 'TypeScript error' } 

已經嘗試了所有這些排列：

import {Headroom} from "headroom.js"; //nope 
import {Headroom} from "headroom\.js"; //nope 
import {Headroom} from "Headroom\.js"; //nope 
import {Headroom} from "headroomjs";  //nope 
import {Headroom} from "headroomjs";  //nope 
import {Headroom} from "headroom";  //nope 
import {Headroom} from "Headroom";  //nope 
import * as headroom from "headroom.js"; // nope 

的分型文件正確使用是絕對被導入。

IDE是說，它可以找到的目錄：

我在做什麼錯？

編輯13-08-2015

1. app.ts在分型拉動從typings DIR這樣的：

/// <reference path="../../../typings/index.d.ts" /> 

index.d.ts包含這些類型 /// <reference path="bootstrap/bootstrap.d.ts" /> /// <reference path="custom.d.ts" /> /// ..etc... /// <reference path="Headroom/headroom.d.ts" />

這是確定的在那裏。

Answer 1

一種分型搜索Headroom.js：

typings search headroom 

查找聲明的一組需要使用此命令進行安裝：

typings install dt~headroom --global 

安裝堅持有--global選項，這就是第一暗示發生了什麼事情。安裝類型爲全球;它們不是模塊的類型（在.d.ts中沒有定義模塊）。因此，TypeScript將而不是將它們與導入的或必需的模塊相關聯。

要使用安裝的類型，您將不得不使用require導入模塊，然後需要設置一個與類型中聲明的類匹配的全局（您提到使用的是Browserify，因此您應該能夠使用global; window也將工作）：

global["Headroom"] = require("headroom.js"); 
let h = new Headroom(...); // TypeScript should use the typings here 

在dist/headroom.js來看，這是顯而易見的，它可以通過AMD，CommonJS的或純JavaScript的消耗。爲了反映這一點，我猜想Headroom.js的類型聲明的作者已經使他們成爲全球。

Answer 2

淨空不包括任何分型。這就是爲什麼TypeScript無法找到「目錄」。你可以做兩件事：

（1）添加你自己的.d.ts文件的空間並確保它在運行時可用。

（2）使用const Headroom = require('headroom.js');來導入它。根據您的browserify配置，它應該包括在建立項目時的空間。請注意，您不會有任何類型的淨空。

我們使用（2）與webpack，它工作正常。當你在寫require('foo')時，webpack會嘗試找到名爲「foo」的npm包並將其添加到你的項目中。 TypeScript可以使用require，因爲它在其中一個包含的.d.ts文件（例如node.js）中定義。但是，當然，你會錯過TypeScript的自動完成功能等。