TypeScript中如何指定必存在于数组中的变量与数组类型？

一、字符串标签场景的修复 #

原代码报错有两个核心原因：

1. tabs: string[]允许空数组，导致tabs[0]可能为undefined，和useState<string>的类型不匹配；
2. Array.find()的返回类型默认是string | undefined，TypeScript无法确定你一定能找到匹配项，因此和setActiveTab接收的string类型冲突。

类型定义与代码修改 #

1. 给tabs定义非空数组类型：用[string, ...string[]]表示数组至少包含一个字符串元素，确保tabs[0]必然存在；
2. 对find()的结果使用非空断言!，明确告诉TypeScript该值一定存在（前提是你的业务逻辑能保证activeTab必然在tabs数组中）。

修改后的代码：

const TabsBar = ({ tabs }: { tabs: [string, ...string[]] }) => {
    // 此时tabs[0]必然是string，无需额外处理
    const [activeTab, setActiveTab] = useState<string>(tabs[0])

    useEffect(() => {
        // 非空断言!消除undefined类型的报错
        setActiveTab(tabs.find(tab => tab === activeTab)!)
    }, [tabs, activeTab])
    
    // ...其他逻辑
}

二、对象类型标签场景的修复 #

当标签是{id: number; title: string}类型时，思路和字符串场景一致，只需先定义对象类型，再处理数组和查找逻辑。

类型定义与代码修改 #

1. 先定义标签对象的类型：

type Tab = {
    id: number;
    title: string;
}

2. 给tabs定义非空数组类型[Tab, ...Tab[]]；
3. 对find()的结果使用非空断言，因为业务逻辑保证activeTab的id必然存在于tabs的元素中。

修改后的代码：

type Tab = {
    id: number;
    title: string;
}

const TabsBar = ({ tabs }: { tabs: [Tab, ...Tab[]] }) => {
    const [activeTab, setActiveTab] = useState<Tab>(tabs[0])

    useEffect(() => {
        setActiveTab(tabs.find(tab => tab.id === activeTab.id)!)
    }, [tabs, activeTab])
    
    // ...其他逻辑
}

补充严谨写法 #

如果不想依赖业务逻辑的假设，可以先判断find()的结果是否存在，再执行赋值：

useEffect(() => {
    const foundTab = tabs.find(tab => tab.id === activeTab.id)
    if (foundTab) {
        setActiveTab(foundTab)
    } else {
        // 处理意外情况，比如重置到第一个标签
        setActiveTab(tabs[0])
    }
}, [tabs, activeTab])

内容的提问来源于stack exchange，提问作者Nguyễn Minh