Question

TypeScript 中为非常多的内置对象都预留了泛型坑位，如 Promise 中。

function p() {
  return new Promise<boolean>((resolve, reject) => {
    resolve(true);
  });
}

数组 Array 中，其泛型参数代表数组的元素类型，几乎贯穿所有的数组方法。

const arr: Array<number> = [1, 2, 3];

// 类型“string”的参数不能赋给类型“number”的参数。
arr.push('wangxiaobai');
// 类型“string”的参数不能赋给类型“number”的参数。
arr.includes('wangxiaobai');

// number | undefined
arr.find(() => false);

// 第一种 reduce
arr.reduce((prev, curr, idx, arr) => {
  return prev;
}, 1);

// 第二种 reduce
// 报错：不能将 number 类型的值赋值给 never 类型
arr.reduce((prev, curr, idx, arr) => {
  return [...prev, curr]
}, []);

reduce 方法是相对特殊的一个，它的类型声明存在几种不同的重载：

• 当你不传入初始值时，泛型参数会从数组的元素类型中进行填充。
• 当你传入初始值时，如果初始值的类型与数组元素类型一致，则使用数组的元素类型进行填充。即这里第一个 reduce 调用。
• 当你传入一个数组类型的初始值，比如这里的第二个 reduce 调用，reduce 的泛型参数会默认从这个初始值推导出的类型进行填充，如这里是 never[]。

第三种情况也就意味着信息不足，无法推导出正确的类型，此时可以手动传入泛型参数来解决：

arr.reduce<number[]>((prev, curr, idx, arr) => {
  return prev;
}, []);

React 中同样可以找到无处不在的泛型坑位：

const [state, setState] = useState<number[]>([]);
// 不传入默认值，则类型为 number[] | undefined
const [state, setState] = useState<number[]>();

// 体现在 ref.current 上
const ref = useRef<number>();

const context =  createContext<ContextType>({});