typescript - 怎么在 功能编写阶段 将js 和 ts 分开？

Question

某些情况下，我并不需要 ts 为我的功能函数进行类型检查，我只需要它帮我提醒使用者 功能函数 有哪些调用方式；因此我不想使用 a.ts 将其混入到一个文件。
如何做？请以此为例

// a.jsfunction yyp(a) {  return a ? a + 1 : "-";}// a.d.tsinterface yyp {    (): string;    (a: number): number;}

---

希望的使用方式：

import * as set from "./a";console.log(set.yyp());console.log(set.yyp(1));

仅引入一个文件就能进行使用，并且能够接受 ts 的类型束缚。

---

如同 echarts 插件一样，将 js-功能实现 和 ts-使用限制 分开。

import * as echarts from "echarts";echarts.init(....);

---

环境：vue3 , vite

Answer 1

project-root-directory/│├── src/│   ││   ├── functions/│   │   ├── js/│   │   │   └── a.js│   │   ││   │   ├── ts/│   │   │   └── a.d.ts│   │   ││   │   └── index.ts│   ││   ├── components/│   │   └── ... (your Vue components)│   ││   ├── App.vue│   ├── main.ts│   ││   └── ...│├── public/│   └── ...│├── vite.config.js├── tsconfig.json├── package.json└── ...

src/functions/js/ 目录放 JS 文件， a.js。
src/functions/ts/ 目录放 TS 类型声明文件，a.d.ts。
src/functions/index.ts 是索引文件，重新导出 js 子目录里的全部函数。

vue文件里：

import * as set from '@/functions';console.log(set.yyp());console.log(set.yyp(1));

tsconfig.json：

{  "compilerOptions": {    "baseUrl": "./",    "paths": {      "*": ["functions/ts/*", "functions/js/*"]    }  }}

index.ts

export * from './js/a';

Answer 2

写 ts，然后用的时候 tsc 编译后，引入使用的 js 文件