如何将 Javascript 文件导入 Typescript

Posted 2023-02-22

【中文标题】如何将 Javascript 文件导入 Typescript

【英文标题】：How to import Javascript file into Typescript

【发布时间】：2016-05-10 23:20:11

【问题描述】：

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

$('.carousel').carousel()

我必须实现 jquery.d.ts 来修复 $-sign 调用，但我仍然收到 .carousel() 无法解决的错误可以在 jquery.d.ts 中找到。

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

carousel.d.ts

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

carousel.js

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

app.ts

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)

感谢您的帮助。

【问题讨论】：

你检查了那个问题 - ***.com/questions/12719529/… 吗？ - jQuery 插件（和其他基于插件的库）的问题在于，您不仅需要为基础库提供 library.d.ts 文件，还需要为每个插件提供 plugin.d.ts 文件

【参考方案1】：

我会像这样重构你的 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;
);

【讨论】：

我的项目仍然没有这样做。实现 .d.ts 库效果最好

【参考方案2】：

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

interface JQuery 
   carousel();

它会告诉 ts 编译器有一个方法 carousel() 将在稍后实现。 （在浏览器中，通过 carousel.js 文件。）

如果您在使用其他库而不是 carousel 时遇到类似问题，这里有大量界面示例：https://github.com/DefinitelyTyped/DefinitelyTyped

【参考方案3】：

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

您可以从DefinitelyTyped 项目中获取完整的Bootstrap 绑定定义，无论是从他们的GitHub 还是NuGet package。以下是基本部分：

interface CarouselOptions 
    interval?: number;
    pause?: string;
    wrap?: boolean;
    keybord?: boolean;


interface JQuery 
    carousel(options?: CarouselOptions): JQuery;
    carousel(command: string): JQuery;

【讨论】：

这对我来说是最好的解决方案。我想使用 jquery.d.ts 有点愚蠢，但没有进一步考虑并使用引导程序:)。

【参考方案4】：

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

环境.d.ts：

// 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);

【参考方案5】：

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

1) 添加以下 npm 包

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

2) 在 tsconfig.json 中在 types 数组 中添加以下条目，

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

现在你可以走了。

Jquery carousel method error in Angular2/typescript

【参考方案6】：

最后，我将代码更改为使用“InjectionToken”。 如此处所述：Use jQuery in Angular/Typescript without a type definition

您可以简单地注入 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();