首页 > 其他分享 >如何为你的 js 项目添加 ts 支持?

如何为你的 js 项目添加 ts 支持?

时间:2023-08-02 20:34:22浏览次数:40  
标签:文件 TypeScript ts js 添加 security true types

前一段时间为公司内的一个 JS 公共库,增加了一些 TypeScript 类型支持。在这里简答记录一下。

安装 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/**/*"
+  ]
}

字段说明

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

  • allowJscheckJs 增加 JS 文件支持
  • declarationemitDeclarationOnly 我们只需要 tsc 帮我们生成类型声明文件即可
  • rootDiroutDir 指定了类型声明文件生成到 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/ 生成的类型声明文件了。

本文由mdnice多平台发布

标签:文件,TypeScript,ts,js,添加,security,true,types
From: https://www.cnblogs.com/zhangbao90s/p/17601676.html

相关文章

  • fastjson 1.2.80 漏洞浅析及利用payload
    0x01说明在fastjson的1.2.80版本中可以通过将依赖加入到java.lang.Exception期望类的子类中,绕过checkAuto。0x02简析{"@type":"java.lang.Exception","@type":"org.codehaus.groovy.control.CompilationFailedException","unit":{......
  • 老杜 JavaWeb 讲解(十七) ——JSP补充
    (十六)JSP补充相关视频:49-JSP的page指令以及九大内置对象和EL表达式指令指令的作用:指导JSP的翻译引擎如何工作(指导当前的JSP翻译引擎如何翻译JSP文件。)指令包括哪些呢?include指令:包含指令,在JSP中完成静态包含,很少用了。(这里不讲)taglib指令:引入标签库的指令。这个到JS......
  • golang json字符串转结构体
    1、不知道结构体类型的情况下funcJsonStringToMap(jsonStrstring)(map[string]interface{},error){//未知值类型m:=make(map[string]interface{})err:=json.Unmarshal([]byte(jsonStr),&m)iferr!=nil{fmt.Printf("Unmarshalwither......
  • threeJs的场景实现鼠标拖动旋转控制
    前面一个章节中已经实现在场景中放置一个正方体,并添加灯光使得正方体可见。但是由于是静态的还不能证明是3D的,我们需要添加一些控制器,使得通过鼠标控制正方体可以动起来,实现真正的3D效果,由此引入OrbitControls组件,他实质是改变相机的位置,实现从不同角度看场景中的物体。下面源码中......
  • v_jstools js逆向分析工具
    1.工具地址:https://github.com/cilame/v_jstools2.下载文件文件下载下来以后,复制到桌面,然后解压到当前文件夹,会看到一个  v_jstools-main 的文件夹。3.插件安装谷歌浏览器地址栏输入如下url,打开扩展程序页面,并打开开发者模式:chrome://extensions/打开后,点击......
  • ubuntu20.04 的 jetson设备命令行设置静态ip
    参考:https://github.com/f1tenth/f1tenth_doc/blob/stable/getting_started/software_setup/optional_software_nx.rst查看网口设备ifconfig#查看ip地址nmclid#查看网口设备nmclicshow#展示网口设备对应的名字修改eth0的ipsudonmclicmodWired\co......
  • RTSP流媒体服务器LntonNVR(源码版)平台配置录像阀值,实现边删边录的具体操作步骤
    LntonNVR是基于RTSP/Onvif协议的视频接入、处理及分发的安防视频云平台,可提供丰富且灵活的视频能力,包括:设备接入、实时视频直播、录像、云存储、录像回放与检索等功能,也能支持GB28181协议进行平台级联。有很多用户咨询我们,在LntonNVR使用过程中,当开启录像时,如果磁盘的存储空间满了,......
  • 运维平台 WGCLOUD 主机列表页面怎么添加主机
    WGCLOUD页面没有添加主机的按钮或入口因为只要你部署并运行了agent,主机列表就会发现这个agent主机,不用手动添加主机......
  • 【vue】vue3+ts+element-plus制作的vueCms后台管理系统(开源)
    我的开源项目地址:vueCms_xg......
  • 再也不用担心变量类型错误!学会JS中如何轻松检查变量类型
    今天要分享的问题就是:如何在JS中检查一个变量的类型?先上结论:如果判断的是基本数据类型或JavaScript内置对象,使用toString;如果要判断的是自定义类型,请使用instanceof。在ECMAScript规范中,共定义了7种数据类型,分为基本类型和引用类型两大类。基本类型也称为简单类型,按值......