'string' 类型的参数不可分配给 'Pick<IJobs, "name">' 类型的参数

Question

为什么会出现此错误？

Argument of type 'string' is not assignable to parameter of type 'Pick<IJobs, "name">'.
  Type 'string' is not assignable to type 'Pick<IJobs, "name">'

模拟数据：

export const Jobs: IJobs[] = [
  {
    id: '1',
    name: 'Trader',
    available: true
  },
  {
    id: '2',
    name: 'Seller',
    available: true
  },
  {
    id: '3',
    name: 'Manager',
    available: false
  },
  {
    id: '4',
    name: 'Cleaner',
    available: false
  }
];

型号：

export interface IJobs {
  id: string;
  name: 'Trader' | 'Seller' | 'Manager' | 'Cleaner';
  available: boolean;
}

Main.tsx

  const handleSetJobsAndOpenModal = (jobs: Pick<IJobs, 'name'>) => {
    setCurrentJobs(jobs);
  };
  const scrollData = useCallback(() => (
    <View style={s.containerMap}>
     {
       Jobs.map(((el) => (
         <Pressable onPress={() => handleSetJobsAndOpenModal(el.name)} style={s.Btn} key={el.id}>
           <Text>...</Text>
         </Pressable>
       )))
     }
     </View>
  ), [])

错误出现在 " () => handleSetJobsAndOpenModal(el.name) <-"

我做错了什么？

Answer 1

您正在从 IJobs 中选择 name。这将产生 key-value pair.

因此，类型 Pick<IJobs, 'name'> 期望它接收一个对象，该对象具有名为 name 的键和值为 'Trader' | 'Seller' | 'Manager' | 'Cleaner' 之一的值。

错误可按如下方式解决

handleSetJobsAndOpenModal({name: el.name})

如果你只想要纯字符串，那么我建议你按如下方式分隔类型。

export type JobName = 'Trader' | 'Seller' | 'Manager' | 'Cleaner'

export interface IJobs {
  id: string;
  name: JobName;
  available: boolean;
}

然后，如下使用。

const handleSetJobsAndOpenModal = (jobs: JobName) => {
    setCurrentJobs(jobs);
  };
  const scrollData = useCallback(() => (
    <View style={s.containerMap}>
     {
       Jobs.map(((el) => (
         <Pressable onPress={() => handleSetJobsAndOpenModal(el.name)} style={s.Btn} key={el.id}>
           <Text>...</Text>
         </Pressable>
       )))
     }
     </View>
  ), [])

'string' 类型的参数不可分配给 'Pick<IJobs, "name">' 类型的参数

Argument of type 'string' is not assignable to parameter of type 'Pick<IJobs, "name">'

typescript

react-native

expo