类型 'number' 不可分配给类型 'never'

Question

我正在创建自定义钩子 useArray 以与 Typescript 反应，我正在为数组类型使用泛型，因为我希望任何可能的值作为数组元素，但是当我尝试推送任何数字时，它会给我错误：类型 'number' 不可分配给类型 'never'。和任何其他类型一样 well.if 我用一些值初始化我的数组然后只能再次推送这些值而不是任何其他 values.How 来解决这个问题？

这里我提供代码： useArray.ts :

import { useState } from "react";
type CompType = string | number;
export default function useArray<T extends CompType>(defaultValue: T[]): {
    array: T[],
    set: React.Dispatch<SetStateAction<T[]>>,
    push: (elemet: T) => void,
    remove: (index: number) => void,
    filter: (callback: (n: T) => boolean) => void,
    update: (index: number, newElement: T) => void,
    clear: () => void

} {
    const [array, setArray] = useState(defaultValue);

    function push(element: T) {
        setArray((a) => [...a, element]);
    }

    function filter(callback: (n: T) => boolean) {
        setArray((a) => a.filter(callback));
    }

    function update(index: number, newElement: T) {
        setArray((a) => [
            ...a.slice(0, index),
            newElement,
            ...a.slice(index + 1, a.length),
        ]);
    }

    function remove(index: number) {
        setArray((a) => [...a.slice(0, index), ...a.slice(index + 1, a.length)]);
    }

    function clear() {
        setArray([]);
    }

    return { array, set: setArray, push, filter, update, remove, clear };

ArrayComp.tsx :

import useArray from "./useArray";
function ArrayComp() {
  const { array, set, push, remove, filter, update, clear } = useArray([]);

  return (
    <div>
      <h1>Updated array: </h1>
      <div> {array.join(", ")} </div>
      <button onClick={() => set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])}>
        set to[1, 2, 3, 4, 5, 6, 7, 8, 9,10]
      </button>
      <button onClick={() => push(5)}> Add 5 </button>
      <button onClick={() => push("Hello")}> Add "Hello" </button>
      <button onClick={() => update(3, 5)}> update 5 at index 3 </button>
      <button onClick={() => filter((n) => n < 10)}>
        filter numbers less than 10
      </button>
      <button onClick={() => remove(3)}> Remove forth Element </button>
      <button onClick={clear}> Empty array </button>
    </div>
  );
}
export default ArrayComp;

App.tsx :

import "./App.css";
import ArrayComp from "./components/ArrayComp";

function App() {
  return (
    <div className="App">
      <h1>React Custom Hook useArray()</h1>
      <ArrayComp />
    </div>
  );
}

export default App;

Answer 1

调用 useArray() 时，您传递了一个空数组 []。 React根据空数组并不知道数组中的元素应该是什么类型，所以他给T赋值unknown.

类型

一种可能的解决方案是在调用 useArray().

时指定正确的类型

const { 
  array, set, push, remove, filter, update, clear 
} = useArray<string | number>([])

解决此问题的另一种方法是使 defaultValue 可选。

function useArray<T extends CompType>(defaultValue?: T[]): /* ... */ {
  if (!defaultValue || defaultValue.length === 0) {
      defaultValue = []
  }

  /* ... */
}

如果你现在使用 useArray() 而没有任何参数，打字稿会将 CompType 分配给 T。

const { array, set, push, remove, filter, update, clear } = useArray()

类型 'number' 不可分配给类型 'never'

Type 'number' is not assignable to type 'never'

types

typescript

reactjs

typescript-generics