使用遗留代码库 - 我们中的许多人无法一次又一次地躲避 - 让我尝试使用 jsDoc 而不是 Typescript。我必须揭露令人惊讶的真相！
首先让我们清理一下： jsDoc 或 TS 只是意味着在开发人员时间下（包括稍后审查、重用、在任何环境中查看该代码：git 网页、随机编辑器、chrome、firefox、. ..:devtool、vim、cat ... );
只需打开编辑器，写下适当的注释即可测试 jsDoc 是否正常工作。
/** @typedef { 'JS' | 'JQuery' | 'TS' | 'jsDoc' } Phase; */
/**
* On typing ' editor will popup string list.
*
* @type {Phase}
*/
const badCase = 'React'; // !!!! lint alert !!!!
/** @type {Phase} */
const goodCase = 'JQuery';
根据我的经验，jsDoc 能够替换 TS 代码，此外两者之间存在虫洞。
最大的 jsDoc 功能imho：这是使用标准的 JS 注释系统，所以不要破坏任何 JS 代码，此代码将在 JS 能够运行的任何地方运行。
| feature | jsDoc | Typescript |
|---|---|---|
| compiling freedom | Do not need compiling the code. | mandatory to compile |
| dependency freedom | Can working without any dependency | at least TS is your dependency |
| namespace freedom | Don't interfere Types and other imports names. You can use same name of component and component Type in React for example. | Typesript names are identical including as any other referenct |
| rework freedom | Don't need to change existing code, just insert a comment. | at least some part in your code need to be turn to TS |
| legacy freedom | Can be use even transform to Typescript the project is not option. Many legacy projects affected this situation. | need to push management to allow that modification |
| Maximalism freedom | Don't need to use every where. Even you can use on a new commits, and after easy to search which is the new or reworked parts. | also enough to turn build system, and just part of code to TS |
| future freedom | Later can easy trasnlate to TS. Under the hood this is use same technic, just different way. | need to work if decide to use JS instead TS |
| mindset freedom | Because this is a comment your know well this is don't made any type check at runtime for you as TS also. | TS is noising your code |
我可以在任何编辑器中编写jsDoc，但很少有人理解它。
我还创建了一个 npm 模块：jsdoc-duck：一个 jsDoc 编码模块。这强调了如果没有 TypeScript，就不可能创建 jsDoc npm 模块。也许如果我花更多的时间来弄清楚 vite 构建参数，那么就可以找到正确的解决方案。但好消息是，如果不在 npm 中使用该模块，而是借用我们的代码：只需将 index.js 复制到某个位置 - 那么我们就可以将新的依赖项插入到我们的程序中，并且不会发生任何事情如果模块所有者将模块转为其他东西。
好消息是 Typescript 和 jsDoc 相互兼容，只是 jsDoc 使用了一些不同的语法。但是您可以在打字稿中使用 jsDoc 模块类型，也可以在 javascript / js jsDoc 程序中使用打字稿模块类型。所以最终决定权在你手中。
VS 代码示例展示了如何很好地看到 jsDoc 代码中的类型，在我看来，这给您的代码带来的噪音令人惊讶地减少了。
/** @typedef { 'JS' | 'JQuery' | 'TS' | 'jsDoc' } Phase; */
/**
* On typing ' editor will popup string list.
*
* @type {Phase}
*/
const badCase = 'React'; // !!!! lint alert !!!!
/** @type {Phase} */
const goodCase = 'JQuery';
（在此视图中语法突出显示无助于理解类型）。但是这个简短的程序是一个很好的例子，jsDoc 也可以使用 TS 的高级功能。
"@type": {
"prefix": ["ty"],
"body": ["/** @type {<pre class="brush:php;toolbar:false">import { useMemo, useReducer } from "react";
/**
* @template T - Payload Type
* @typedef {T extends { type: infer U, payload?: infer P } ? { type: U, payload?: P } : never} ActionType
*/
/** @template AM - Actions Map @typedef {{ [K in AM['type']]: K }} Labels */
/** @template AM - Actions Map @typedef {{ [T in AM["type"]]: Extract<AM, { type: T }> extends { payload: infer P } ? (payload: P) => void : () => void }} Quack */
/**
* @template ST - State
* @template AM - Actions Map
* @typedef {(state: ST, action: AM) => ST} Reducer
*/
/**
* Factory function to create a typed action map.
* @template AM - Actions Map
* @param {Labels<AM>} labelsObject - The keys representing action labels.
* @param {function} dispatch - The dispatch function for actions.
* @return {Quack<AM>} The resulting typed action map.
*/
export const quackFactory = (labelsObject, dispatch) => Object
.keys(labelsObject)
.reduce(
/**
* @arg {Quack<AM>} acc
* @arg {keyof Labels<AM>} type
* @return {Quack<AM>}
*/
(acc, type) => ({
...acc,
[type]: (payload) => {dispatch({ type, payload });}
}), {});
/**
* A factory hook to create a state and a typed dispatch functions\
* @exports useDuck
* @template AM - Actions Map
* @template ST - State Typer
* @param {(st: ST, action: AM) => ST} reducer - The reducer function to manage the state.
* @param {ST} initialState - The initial state value.
* @return {[ST, Quack<AM>]} The current state and a map of action dispatch functions.
*/
export const useDuck = (reducer, initialState, labels) => {
const [state, dispatch] = useReducer(reducer, initialState);
const quack = useMemo(
() => quackFactory(labels, dispatch),
[dispatch, labels]
);
return ([state, quack]);
};
快乐编码，挖掘而不是添加依赖
以上是jsDoc 布道的详细内容。更多信息请关注PHP中文网其他相关文章！
