typescript - 在 typescript 中导入库的不同方式有什么区别？

Question

我在使用带有 typescript 的外部库时遇到了很多困难。我非常想为没有可用类型的库添加自定义类型，并且我很难理解 imports 和 requires 如何与类型一起工作。

有什么区别，相应的类型如何查找以下情况:

import something = require('something');

从 'something' 导入 * as something;

const something = require('something');

从'something'导入{something};

Answer 1

require是导入外部模块的“旧”方式，import syntax 是目前推荐的方式，与 ES6 语法对齐。取决于 module配置在 tsconfig.json TypeScript 会将此语法转换为相关的模块类型/样式。

如果您想了解 TypeScript 如何解析外部模块(它支持两种模式 node 和 classic - 可在 tsconfig.json 中配置为 moduleResolution )，请阅读此处的文档:http://www.typescriptlang.org/docs/handbook/module-resolution.html .主要区别在于如何解析非相对模块路径。

如果您想了解 TypeScript 查找类型(类型声明)的方式和位置，请阅读这篇博文:http://ivanz.com/2016/06/07/how-does-typescript-discover-type-declarations-definitions-javascript/ .来自博客 - 它将:

1. 尝试 module.d.ts在 module.js 旁边用于自定义代码
2. 尝试检查 typings:在 packages.json对于节点模块(在 node_modules 中)
3. 尝试在 declare module X 时在它正在处理的文件包中查找任何环境声明( tsconfig.json 语法)存在。这很重要，因为该文件的存在使 TypeScript 将所有包含的文件作为单个“项目”/“工作区”处理
4. 寻找三斜杠评论 /// <reference path="path/to/declarations.d.ts" /> - 我不再推荐这个 tsconfig.json可以使用项目文件。

您还有两种类型的输入:

1. 外部模块类型 - 位于文件旁边，或者在节点模块的情况下，它们的路径存在于 typings: 中在 project.json .语法是 export X没有模块声明(文件是一个模块!)。考虑将它们“绑定(bind)”到代码文件以及类似“这就是这个模块的样子”

2. 环境打字 - 生活在任何地方。语法是 declare module X .考虑“某处存在一个类型/模块 X，这就是它的样子”。对于模块，TypeScript 将根据模块名称进行匹配。其他用例是全局变量(例如 jQuery 的 $ )。

在 tsconfig.json 中可以配置什么以及如何配置的文档在这里阅读:https://github.com/Microsoft/TypeScript/wiki/tsconfig.json

关于您提供的不同示例 - 假设您有一个名为 moduleA 的模块.需要注意的一件事是，文件是 JS/TS 世界中的一个模块，因此:

moduleA.ts

export class Car
{
    public model: string = "";
}

moduleA.js - 转译(目标 ES5 和模块类型 CommonJS)

"use strict";
var Car = (function () {
    function Car() {
        this.model = "";
    }
    return Car;
}());
exports.Car = Car;

ma​​in.ts

import moduleA = require("./moduleA");

new moduleA.Car();

// equivalent to the above - import everything under myModuleName
import * as myModuleName from './moduleA';

new myModuleName.Car();

// import only the Car class
import {Car} from './moduleA'

new Car();

// import only the Car class and alias it as MyCar
import {Car as MyCar} from './moduleA'

new MyCar();

ma​​in.js - 转译(目标 ES5 和模块类型 CommonJS)

"use strict";
var moduleA = require("./moduleA");
new moduleA.Car();

// equivalent to the above - import everything under myModuleName
var myModuleName = require('./moduleA');
new myModuleName.Car();

// import only the Car class
var moduleA_1 = require('./moduleA');
new moduleA_1.Car();

// import only the Car class and alias it as MyCar
var moduleA_2 = require('./moduleA');
new moduleA_2.Car();