javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js项目添加ts支持

js项目中添加ts支持实现示例详解

作者:写代码的宝哥

这篇文章主要为大家介绍了如何在js项目中添加ts支持实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

安装 TypeScript 依赖

首先安装 TypeScript 依赖,我们要通过 tsc 指令创建声明文件:

pnpm install -D typescript

创建配置文件

接下来创建 TypeScript 配置文件:

npx tsc --init

这一步会在项目的根目录下创建一个 tsconfig.json 文件。我们在原来配置的基础上开放一些配置:

{
  "compilerOptions": {
     "target": "es2016",
     "module": "commonjs",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
+    "allowJs": true,
+    "checkJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "./",
+    "outDir": "./types",
   }
+  "include": [
+    "security/**/*"
+  ]
}

字段说明

对上述字段,我们挑几个重要的说明一下。

想详细了解每个配置字段的含义,可以参考 TypeScript 官方说明:https://aka.ms/tsconfig

生成类型文件

项目根目录下创建 index.d.ts 文件

export let security: typeof import("./types/security");

接下里修改 package.json, 增加当前 npm 包的类型声明支持和构建脚本 typecheck

{
    "scripts": {
        // ...
        "typecheck": "tsc",
    },
    types: "index.d.ts"   
}

接下来执行脚本:

npm run typecheck

最后就能看到在 types/ 目录下为 security/ 生成的类型声明文件了。

以上就是js项目中添加ts支持实现示例详解的详细内容,更多关于js项目添加ts支持的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文