使用遺留程式碼庫 - 我們中的許多人無法一次又一次地躲避 - 讓我嘗試使用 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中文網其他相關文章！
