javascript - 使 javascript 文件了解其 typescript 定义文件

Question

Typescript 允许您为本地 JavaScript 文件编写 .d.ts 定义文件，如下所示:

src/
  main.js
  imported.js
  imported.d.ts

main.js

import { func } from './imported';
console.log(func("1", "1"));

导入的.js

export const func = (numVal, strVal) =>
  `The number is ${numVal}, the string is ${strVal}`;

导入的.d.ts

export const func: (numVal: number, strVal: string) => string;

使用选项 noImplicitAny 会出现以下错误:

src/imported.js(1,22): error TS7006: Parameter 'numVal' implicitly has an 'any' type.
src/imported.js(1,30): error TS7006: Parameter 'strVal' implicitly has an 'any' type.
src/main.js(3,18): error TS2345: Argument of type '"1"' is not assignable to parameter of type 'number'.

最后一个错误是好的，它阻止我们在应该传递数字作为第一个参数时传递字符串。但对于前两个，在导入的 javascript 文件中，它不知道参数的类型已被定义。这会阻止您使用 noImplicitAny，但也会阻止您在例如将 numValue 传递给需要字符串的函数时出错。

是否可以让 JavaScript 文件知道它们在 TypeScript 中的定义，最好不修改原始 JavaScript。

Answer 1

虽然 javascript 文件无法识别其定义文件，但 Typescript 2.3 添加了对使用 JSDoc 注释进行类型检查的支持。

将项目更改为:

src/
  main.js
  imported.js

导入的.js

/**
 * @return {string} 
 * @param {number} numVal 
 * @param {string} strVal 
 */
export const func = (numVal, strVal) =>
  `The number is ${funcs.func3(numVal)}, the string is ${strVal}`;

main.js

import { func } from './imported';

/**
 * Works fine
 * @param {number} number 
 */
const mainFunc1 = (number) =>
  func(number, "Hello");      

/**
 * Argument of type 'string' is not assignable to parameter of type 'number'
 * @param {string} string 
 */
const mainFunc2 = (string) =>
  func(string, "Hello");

现在 typescript 编译器知道 numVal是一个数字，并且 strVal是一个字符串。试图通过numVal到一个不接受数字而导致错误的函数。 @return在func这里在技术上是多余的，因为它知道它正在返回字符串(即使没有 JSDoc，它也会知道)，但它有利于一致性。

虽然这确实需要修改原始 JavaScript，但它只使用注释来实现。

限制

这并不具备完整 Typescript 类型检查的所有功能，但它已经具备了大部分功能。例如，如果您有一个返回对象的模块，其中包含键入的键:

/**
 * @param {number} num 
 */
const func1 = (num) => num * 2;

export default {
  func1,
}

然后使用它:

import imported from './module';

imported.func1(3);    // This is okay
imported.func1("3");  // This is an error
imported.func2(3);    // This is also okay, but it shouldn't be

对于 javascript 文件，这不会出错，因为它没有生成默认导出的类型，因此它无法确认 func2 不存在。而在 Typescript 中，它会告诉你 Property 'func2' does not exist on type '{ func: (num: number) => number; }'. Did you mean 'func'? ，无需显式声明默认导出的类型。

typescript 2.5

Typescript 2.5 还添加了对 JSDoc 类型断言的支持，例如:

// Argument of type 'string | number' is not assignable to parameter of type 'number'.
const func1 = () =>
  func(funcReturnsNumberOrString(true), "Hi");

// Fine
const func2 = () =>
  func(/** @type {number} */ (funcReturnsNumberOrString(true)), "Hi");

/**
 * @returns { number | string }
 * @param {boolean} bool
 */
const funcReturnsNumberOrString = (bool) =>
  bool ? 2 : "2";

在这种情况下，我们知道 funcReturnsNumberOrString返回一个数字，因此我们可以这样告诉 Typescript。