🍘 🏸 🏇🏻 在JavaScript中使用TypeScript而不编写TypeScript 😷 👋🏼 ❌

我是TypeScript的忠实粉丝。我会尽可能在我的项目中使用这种语言。 TypeScript为开发人员提供错误报告以及JavaScript和TypeScript代码中的类型检查。此外，任何编写TypeScript的人都可以使用便捷的功能完成代码，并且可以快速可靠地执行重构。 TypeScript是防止代码错误的第一道防线。该语言的另一个优点是，它允许您在编写程序时使用最新的JavaScript功能。同时，所有浏览器都支持将TypeScript代码转换为JavaScript所获得的内容。这是很不错的。

是的，并非所有前端项目都包含TypeScript。如果您可以使用TypeScript的功能，但不将整个项目（和整个团队）转换为该功能，而是向项目组装管道添加新工具，该怎么办？这要归功于VS Code和JSDoc。

搭建工作环境

▍选件编号1。VS代码设置（全局验证）

在以纯JavaScript（JS）编写的项目中使用TypeScript（TS）的第一种方法是使用TS来验证所有JS文件。这是通过包含一个全局参数VS Code来完成的。可以在用户或工作空间设置中启用此参数：

"javascript.implicitProjectConfig.checkJs": true

如果您是喜欢使用图形界面的人之一，则可以如下所示启用它。

启用TypeScript JS验证

▍选项号2。使用jsconfig.json文件（全局验证）

使用TS启用全局JS代码验证的另一种方法是使用文件jsconfig.json。如果存在这样的文件，则其中指定的设置将覆盖VS Code中指定的设置。

{
  "compilerOptions": {
    "checkJs": true
  }
}

▍选件编号3。对单个文件启用验证

使用TypeScript控制JS代码的第三种方法是在单个文件级别启用验证。它包括在文件的开头添加相应的注释：

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

使用相同的想法，您可以关闭对单个JS文件的TS检查。如果使用上述方法全局启用了TS检查，则可以执行此操作。这里还使用了特殊注释：

// @ts-nocheck
let easy = 'abc';
easy = 123; //

而且，如果您希望TypeScript仅忽略文件的一部分，则可以执行以下操作：

let easy = 'abc';
// @ts-ignore
easy = 123; //

使用JSDoc输入代码

我们刚刚讨论了如何启用文件级TS检查。这提供了基本的类型检查功能。可以通过使用JSDoc格式注释描述类型来扩展它们。

functions功能典型化

您可以使用JSDoc开始输入代码，并附上函数接受输入的描述：

/**
 * @param {number} shippingVal
 */
updateShipping(shippingVal) {
    ...
}

之后，编辑器将能够按类型给出提示。

提示函数接受的值的类型

此方法适用于简单类型，但是如果开发人员需要描述自己的类型怎么办？可以使用标记来完成@typedef。我建议将类型描述放在文件的开头。这将有助于在工作过程中检测此类描述：

/**
* @typedef {Object} CreditNoteTaxResponseViewModel
* @property {number} feeAmount
* @property {number} inclGst
* @property {number} subTotal
* @property {number} total
*
* @typedef {Object} ApiResponse
* @property {string} status
* @property {string} message
* @property {CreditNoteTaxResponseViewModel} response
*/

必要时可以使用以下描述：

/**
                * @param {CreditNoteTaxRequestViewModel} req
                * @returns {Promise<ApiResponse>}
                */
                createCreditNoteTaxApiCall(req) {
        ...
                }

此技术的另一个用例是将类型声明移动到特殊文件。假设可以调用这样的文件main.d.ts。

export interface ICreditNoteTaxRequestViewModel{
    orderID: number;
    shippingCredit: number;
    lines: IICreditNoteTaxLineViewModel[]
}

export interface ICreditNoteTaxLineViewModel{
    originalOrderLineID:number;
    creditQuantity: number;
}

export interface ICreditNoteTaxResponseViewModel{
    feeAmount: number;
    inclGst: number;
    subTotal: number;
    total: number;
}

export interface IApiResponse{
    status: string;
    status: message;
    response: ICreditNoteTaxResponseViewModel;
}

然后可以在JavaScript中使用以下类型：

/**
   * @param {import("./main").ICreditNoteTaxRequestViewModel} req
   * @returns {Promise<import("./main").IApiResponse>}
   */
  function createCreditNoteTaxApiCall(req) {
    ///  
    return;
  }

regular常规代码的典型化

上面的示例解决了键入函数的输入和输出值的问题。使用内置的JSDoc注释可以完成类似的操作。

键入常规变量

libraries图书馆的典型化

VS Code具有一个自动获取第三方库类型的系统。相应的过程适用于文件中描述的所有软件包package.json。但是，如果有人喜欢显式设置，则可以在以下位置进行适当的设置jsconfig.json：

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

类型获取系统处理完库之后，可以在JSDoc中使用这些类型：

/**
 * @param {JQuery<HTMLElement>} $itemRow
 */
initRow($itemRow) {
    ...
}

切换到TypeScript

如果您决定转换为TypeScript JavaScript项目（在其中使用了TypeScript的某些部分），则只需将其重命名jsconfig.json为tsconfig.json并在其中包含参数即可allowJs：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

之后，您可以开始将*.js-files 重命名为*.ts-files并键入这些文件的代码。将项目转换为TypeScript的过程可以逐步进行。

摘要

阅读本文之后，您可能会发现在JavaScript项目中利用TypeScript功能非常容易。为此，只需配置VS Code。此处描述的方法使您不必对项目组装过程进行任何更改，也可以避免违反该过程的风险，也不必强迫开发团队紧急切换到新语言。

如果只使用TypeScript某些功能的JS项目被决定完全转移到TS，这也很容易。而且，这种过渡可以分阶段进行。

这是 GitHub存储库，您可以在其中找到本文中使用的代码示例。

亲爱的读者们！您对使用TypeScript功能在JS代码中进行类型检查的想法有何看法？

在JavaScript中使用TypeScript而不编写TypeScript