在 Node.js 中混合 JavaScript 和 TypeScript

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/49640121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 05:20:05  来源:igfitidea点击:

Mixing JavaScript and TypeScript in Node.js

javascriptnode.jstypescriptjsdoc

提问by Alexander Zeitler

While having parts of a Node.js in plain ES6, is it possible to mix in some Typescript modules within the same project?

虽然在普通 ES6 中拥有部分 Node.js,但是否可以在同一个项目中混合一些 Typescript 模块?

E.g. having some Types defined in TypeScript that are imported via requireinto plain ES6 files?

例如,在 TypeScript 中定义了一些通过require导入到普通 ES6 文件中的类型?

回答by Aluan Haddad

Yes this is possible.

是的,这是可能的。

Combine the following TypeScript compiler options

结合以下 TypeScript 编译器选项

  1. --allowJs

    Explicitly supports mixed JavaScript and TypeScript sources

  2. --outDir

    Since all files will be transpiled, it is necessary to output the resulting JavaScript into a different directory otherwise the input .jsfiles would be overwritten1.

  3. --checkJs

    This is completely optional. If specified, the compiler will typecheck JavaScript files, reporting errors just as in TypeScript files, where as it would otherwise tolerate inconsistencies.

  1. --allowJs

    明确支持混合 JavaScript 和 TypeScript 源

  2. --outDir

    由于所有文件都将被转译,因此有必要将生成的 JavaScript 输出到不同的目录中,否则输入 .js文件将被覆盖1

  3. --checkJs

    这是完全可选的。如果指定,编译器将检查 JavaScript 文件,报告错误,就像在 TypeScript 文件中一样,否则它会容忍不一致。

As to using types declared in a TypeScript file in a JavaScript file, this can indeed be done.

至于在 JavaScript 文件中使用 TypeScript 文件中声明的类型,这确实可以做到。

TypeScript actually powers all of the JavaScript intellisense in tools like Visual Studio Code.

TypeScript 实际上支持 Visual Studio Code 等工具中的所有 JavaScript 智能感知。

Types may be placed in JSDoc2comments. These comments can reference types imported from TypeScript (.ts/.tsx/.d.ts) files. IDEs like Visual Studio Code will provide syntax-highlighting and auto completion within these comments.

类型可以放在 JSDoc 2注释中。这些意见可以参考来自打字稿(进口类型.ts/ .tsx/ .d.ts)文件。Visual Studio Code 等 IDE 将在这些注释中提供语法突出显示和自动完成功能。

There's a caveat however. Because there's no manifest syntax for types in JavaScript, they cannot be imported individually but must be attached to a valuewhich is imported. This is most conveniently achieved via TypeScript's declaration merging as shown below.

然而,有一个警告。因为 JavaScript 中没有类型的清单语法,它们不能单独导入,而必须附加到导入的。这是通过 TypeScript 的声明合并最方便地实现的,如下所示。

Example:

例子:

a.ts

a.ts

export default createThing;

function createThing(...args): createThing.Thing  {...}

namespace createThing {
  export interface Thing {...}
}

b.js

js

import createThing from './a';

/**
 * @param {createThing.Thing} thing
 */
export function takesThing(thing) {}

Notes:

笔记:

1: --outDiris not necessary if you additionally specify the --noEmitflag. You would do this when using a tool such as SystemJS(with plugin-typescript) or Webpack(with awesome-typescript-loaderor ts-loader) to host the TypeScript transpiler. The same applies if you are using TS Node.

1:--outDir如果您另外指定--noEmit标志,则不需要。当使用诸如SystemJS(带有plugin- typescript)或Webpack(带有awesome- typescript -loaderts-loader)之类的工具来托管 TypeScript 转译器时,您会这样做。如果您使用TS Node ,这同样适用。

2: Although called JSDoccomments, they are interpreted in the context of the TypeScript type system, notthe JSDoc system. Languages and tools like TypeScript, and Google's Closure Compiler, effectively hiHyman the JSDoc syntax for their own purposes and thereby confer potentially conflicting meanings to its constructs. This isn't usually a problem but it's worth knowing because it can be difficult to determine the applicability and correctness of these comments and the compatibility of the types that they reference or declare.

2:虽然叫做JSDoc注释,但它们是在TypeScript类型系统的上下文中解释的,而不是JSDoc系统。像 TypeScript 和 Google 的Closure Compiler这样的语言和工具,为了自己的目的有效地劫持了 JSDoc 语法,从而赋予其结构潜在冲突的含义。这通常不是问题,但值得了解,因为很难确定这些注释的适用性和正确性以及它们引用或声明的类型的兼容性。

Remarks:

评论:

Although this question and answer is all about importing types for use in JavaScript files, it's very often unnecessary as the compiler will infer the types from the values of your expressions.

虽然这个问题和答案都是关于导入用于 JavaScript 文件的类型,但它通常是不必要的,因为编译器会从表达式的值中推断出类型。

It's also worth mentioning that if you find yourself needing to write a lot of JSDoc style type annotations you are almost certainly better off converting the file to TypeScript as the syntax for expressing types in JSDoc is clumsy. Thanks to the --allowJsoption, you can do this on a file by file basis, as described above.

还值得一提的是,如果您发现自己需要编写大量 JSDoc 样式的类型注释,则几乎肯定最好将文件转换为 TypeScript,因为在 JSDoc 中表达类型的语法很笨拙。由于该--allowJs选项,您可以按文件逐个执行此操作,如上所述。