TS导入其它的JavaScript库_ts import commonjs-优快云博客

本文链接：https://blog.youkuaiyun.com/from_the_star/article/details/86016040

本文介绍了如何在TypeScript中导入不同类型的JavaScript库，包括JQuery、CommonJS、AMD和UMD模块。当缺少声明文件时，需要从DefinitelyTyped获取或自定义.d.ts文件。TypeScript主要使用ES6模块语法，但对于其他格式的库，导入方式有所不同，如使用`import { ... } from '...';`处理CommonJS和AMD的默认导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说下下载的问题。
TypeScript直接引入JavaScript可能会因为没有声明文件而报错，我们可以去DefinitelyTyped下载（最受欢迎的声明文件存储库）。使用方法：

npm install --save-dev @types/jquery

如果DefinitelyTyped不存在这个库的声明文件，你只能自己写声明文件.d.ts。
再说引入问题。
模块使用模块加载器去导入其它的模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的JavaScript模块加载器是服务于Node.js的 CommonJS和服务于Web应用的Require.js。TS使用不是这两种，它使用的是ECMAScript 2015 native modules (ES6)模块，所以导入其他不同标准的库有所不同。

一般情况下，Commonjs和AMD导出的文件,ts使用import { … } from ‘…’;这种格式就能导入，下面介绍其他的几种方法。

JQuery

JQuery.d.ts导出

这其实是ts默认导出的语法

declare let $: JQuery;
export default $;

导入（TS）

import $ from "JQuery";
$("button.continue").html( "Next Step..." );

CommonJS和AMD的默认导出

导出

let numberRegexp = /^[0-9]+$/;
class ZipCodeValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
export = ZipCodeValidator;

在CommonJS和AMD里的 “export =” 相当于ts里的 “export default ”，在ts里则要使用这种方法导入

导入（TS）

import { ZipCodeValidator } from "./ZipCodeValidator";
let myValidator = new ZipCodeValidator();

CommonJS多模块文件

node.d.ts导出

declare module "url" {
    export interface Url {
        protocol?: string;
        hostname?: string;
        pathname?: string;
    }

    export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url;
}

declare module "path" {
    export function normalize(p: string): string;
    export function join(...paths: any[]): string;
    export let sep: string;
}

导入（TS）

使用reference

/// <reference path="node.d.ts"/>
import * as URL from "url";
let myUrl = URL.parse("http://www.typescriptlang.org");

UMD模块

有些模块被设计成兼容多个模块加载器，或者不使用模块加载器（全局变量）。它们以 UMD模块为代表。这些库可以通过导入的形式或全局变量的形式访问。例如：

math-lib.d.ts

export function isPrime(x: number): boolean;
export as namespace mathLib;

之后，这个库可以在某个模块里通过导入来使用：

import { isPrime } from "math-lib";
isPrime(2);
mathLib.isPrime(2); // 错误: 不能在模块内使用全局定义。

它同样可以通过全局变量的形式使用，但只能在某个脚本（指不带有模块导入或导出的脚本文件）里。

mathLib.isPrime(2);

更多内容查看>>>TS官方文档