如何将Javascript文件导入Typescript

How to import Javascript file into Typescript

本文关键字：导入 Typescript 文件 Javascript      更新时间：2023-09-26

我想知道我是如何从 Typescript 启动 Twitter-Bootstrap 的。

$('.carousel').carousel()
我

必须实现jquery.d.ts来修复$-sign调用，但是我仍然收到在jquery.d.ts中找不到.carousel（）的错误。

我试图通过将javascript捆绑到一个模块并像那样调用它来做到这一点。但它似乎不起作用。这是我的代码：

旋转木马

declare module 'carousel/carousel' {
    var start: any; 
    export = start;
}

轮播.js

System.register('carousel/carousel', [], true, function () {
    var carousel = function () {
        function carousel() {
        }
        carousel.prototype.start = function () {
            $('.carousel').carousel();
        }
    }
    exports.carousel = carousel;
});

应用程序

import {Component} from "angular2/core";
import {bootstrap} from 'angular2/platform/browser';
import {Carousel} from "carousel/carousel";
@Component({
    selector: "carousel",
    bindings: [CarouselComponent],
    templateUrl: 'carousel.html'
})
export class CarouselComponent {
    start() {
            carousel.start();
        }        
    }
}
bootstrap(CarouselComponent)

谢谢你的帮助。

问题是您没有 carousel() 的类型定义。就像你提到的 - 它是Twitter-Bootstrap中的一个函数，但你只包含了jQuery的类型定义（*.d.ts）。您需要以相同的方式为引导程序包含它们。

可以从 DefinitelyTyped 项目中获取完整的 Bootstrap 绑定定义，可以从其 GitHub 或作为 NuGet 包获取。以下是基本部分：

interface CarouselOptions {
    interval?: number;
    pause?: string;
    wrap?: boolean;
    keybord?: boolean;
}
interface JQuery {
    carousel(options?: CarouselOptions): JQuery;
    carousel(command: string): JQuery;
}

我会像这样重构你的carousel.js文件：

System.register("carousel/carousel", [], true, function(require, exports, module) {
  var carousel = function () {
    function carousel() {
    }
    carousel.prototype.start = function () {
        $('.carousel').carousel();
    }
  }
  exports.carousel = carousel;
});

创建一个文件 "jquery-caroussel.d.ts" （并将其添加到您的 reference.ts）里面：

interface JQuery {
   carousel();
}

它会告诉 ts 编译器，而不是有一个稍后将实现的方法轮播（）。（在浏览器中，通过轮播.js文件。

如果你对另一个库有类似的问题，而不是轮播，这里有大量的界面示例：https：//github.com/DefinitelyTyped/DefinitelyTyped

您可以通过为所需的每个库声明一个环境模块来导入 JS 文件。你可以有一个ambient.d.ts文件，用于存储所有环境模块声明（即你想要导入的JavaScript库，但你没有类型定义）

环境：

// You would have a separate module declaration for each JavaScript library
// you want to import for which you do not have any type definitions
declare module 'my-module-i-want-to-import' {
  const a : any;
  export default a;
}

任何其他需要my-module-i-want-to-import的 *.ts 文件：

// Include reference to your ambient module declarations
///<reference path="./ambient.d.ts" />
import myModule from 'my-module-i-want-to-import';
// Do something with myModule
console.log(myModule);

最后，我将代码更改为使用"InjectionToken"。如下所述：在没有类型定义的情况下在 Angular/Typescript 中使用 jQuery

您可以简单地注入 jQuery 全局实例并使用它。为此，您不需要任何类型定义或类型。

import { InjectionToken } from '@angular/core';
export const JQ_TOKEN = new InjectionToken('jQuery');
export function jQueryFactory() {
    return window['jQuery'];
}
export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

在 app.module.ts 中正确设置时：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { JQ_TOKEN } from './jQuery.service';
declare let jQuery: Object;
@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

您可以在组件中开始使用它：

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';
@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }
    somefunction() {
        this.$('...').doSomething();
    }
}

在 Angular 的最终版本之后，（用于 jquery.js 和 bootstrap.js）

1） 添加以下 npm 包

  npm install --save-dev @types/jquery
  npm install --save-dev @types/bootstrap

2）在tsconfig.json中添加以下条目 类型数组，

  "types": [
             "jquery",
             "bootstrap",  
           ]

现在你现在可以走了。

Angular2/typescript 中的 Jquery 轮播方法错误

相关文章：