我如何使用 JSDoc 記錄 useState 掛鈎？

Question

我正在嘗試使用 JSDoc 記錄我的 react state 掛鈎的解構部分，例如：

const [referenceState, setReferenceState] = useState(null);

這里， referenceState的類型是 Object，而setReferenceState需要一個 Object。

根據網上的一些信息，我正在嘗試按照以下方式做一些事情：

/**
* @param {Object} stateToSet
* @returns {GenericArray} current state and function to change value
*/
const [referenceState, setReferenceState] = useState(null);

但這不會產生任何東西..

有人可以幫我記錄referenceState和setReferenceState嗎？

Answer 1

我想你可以試試這個方法：

/**
 * @typedef {Object} ReferenceState
 */

/**
 * @callback ReferenceStateSetter
 * @param {ReferenceState} state
 * @returns {void}
 */

/**
 * @namespace {Object}
 * @property {ReferenceState} 0
 * @property {ReferenceStateSetter} 1 
 */
const [referenceState, setReferenceState] = useState(null);

或者，為了避免必須記錄立即解構的數組，而是從最后添加一些縮進更改中受益：

/**
 * @typedef {Object} ReferenceState
 */

/**
 * @callback ReferenceStateSetter
 * @param {ReferenceState} state
 * @returns {void}
 */

const [
    /**
     * @type {ReferenceState}
     */
    referenceState,

    /**
     * @type {ReferenceStateSetter}
     */
    setReferenceState
] = useState(null);

如果你不想有ReferenceState文檔，你可以去掉它的@typedef並用Object替換對它的引用，但我認為有文檔更清楚。

上面的void是一種更簡單的方式，表示不返回任何特殊內容（即undefined ）——如果這就是 setter 返回的內容。 如果@returns僅返回undefined ，則某些項目只會刪除它，但我喜歡添加它以顯示已知返回值是undefined ，而不僅僅是未記錄的。

Answer 2

我會創建一個通用類型，它等於與 React 的 useState function 相同的返回類型。

/**
 * Add this type in top of your file, or if commonly used in some types file.
 * @template T
 * @typedef {[T, import('react').Dispatch<import('react').SetStateAction<T>>]} useState
 */

然后你可以像這樣在你的 React 組件中使用它：

/** @type {useState<string>} */
const [someString, setSomeString] = useState('');

/** @type {useState<number>} */
const [someNumber, setSomeNumber] = useState(2);

或者，如果您想使用自定義 object：

/**
 * @typedef SomeOtherType
 * @property {string} property1
 * @property {number} property2
 */

/** @type {useState<SomeOtherType>} */
const [someOtherValue, setSomeOtherValue] = useState(null);

Answer 3

在webstorm中，你可以這樣寫（我沒有在其他編輯器中測試過）：

const [state, setState] = useState(/** @type {{name: string, age: number?}} */null)

或者

/**
 * @typedef People
 * @property {string} name
 * @property {number} [age]
 */

//........

const [state, setState] = useState(/** @type {People} */null)

Answer 4

作為替代方案，可以在解構之前聲明變量，並照常使用 JSDoc 進行注釋。

/**
* Current state.
* @type {Object}
*/
let referenceState;
/**
* Current state setter.
* @type {Function}
* @param {any} state updated state value.
* @returns void
*/
let setReferenceState;
[referenceState, setReferenceState] = useState(null);

Answer 5

最短的方法是這樣的：但是添加一個模板

/**
 * @type {[MyType, React.Dispatch<MyType>]} state
 */
const [value, setValue] = useState(null);

我還在 js 項目中使用 *.d.ts 文件。 VS 代碼可以看到並使用它們，因此您可以以現代方式描述類型和接口。

放一行就行

type useState<T> = [T, React.Dispatch<T>];

到 useState.d.ts 文件，然后在 JS 文件中使用

/** @type {useState<MyType>} */
const [value, setValue] = useState(null);