jsDoc 佈道-js教程-PHP中文網

太長了；

使用遺留程式碼庫 - 我們中的許多人無法一次又一次地躲避 - 讓我嘗試使用 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 與 Typescript

根據我的經驗，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 編輯經驗

我可以在任何編輯器中編寫jsDoc，但很少有人理解它。

節點模組體驗

我還建立了一個 npm 模組：jsdoc-duck：一個 jsDoc 編碼模組。這強調如果沒有 TypeScript，就不可能建立 jsDoc npm 模組。也許如果我花更多的時間來弄清楚 vite 建置參數，那麼就可以找到正確的解決方案。但好消息是，如果不在npm 中使用該模組，而是藉用我們的程式碼：只需將index.js 複製到某個位置- 那麼我們就可以將新的依賴項插入到我們的程式中，並且不會發生任何事情如果模組所有者將模組轉為其他東西。

jsDoc 之間的蟲洞打字稿

好消息是 Typescript 和 jsDoc 互相相容，只是 jsDoc 使用了一些不同的語法。但您可以在打字稿中使用 jsDoc 模組類型，也可以在 javascript / js jsDoc 程式中使用打字稿模組類型。所以最終決定權在你手中。

沿著黃磚路走

VS 程式碼範例展示瞭如何很好地看到 jsDoc 程式碼中的類型，在我看來，這給您的程式碼帶來的噪音令人驚訝地減少了。

jsDoc Evangelism

獎金

:: VS 程式碼片段

/** @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-duck 程式碼

（在此視圖中語法突出顯示無助於理解類型）。但是這個簡短的程式是一個很好的例子，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]);
};

登入後複製

} */"], "description": "jsdoc type" }, "@typedef": { "prefix": ["td"], "body": ["/** @typedef {} Foo */"], "description": "jsdoc typedef" },

快樂編碼，挖掘而不是添加依賴

以上是jsDoc 佈道的詳細內容。更多資訊請關注PHP中文網其他相關文章！