TypeScript 如何正确为对象属性定义类型？

问题原因 #

你当前的写法混淆了类型声明和变量赋值的逻辑：Array<IProduct>是TypeScript类型，不能直接当做对象属性的初始值写到对象字面量里，所以会触发报错。

正确写法 #

方案1：先定义对象类型接口（推荐，可维护性最高）

先给整个form对象定义专属类型，再给form变量加类型注解，初始值要和定义的类型匹配：

interface IProduct {
  artikelname: string
  artikelnummer: string
  barccode: string
}

// 第一步：定义form对象的整体类型
interface IForm {
  date: any[] // 可根据实际业务替换为更精准的类型，比如Date[]、string[]
  R2Os: any[] // 同上，替换为数组元素的实际类型
  type: number
  cats: null | unknown // 如果你后续cats会赋值其他类型，比如字符串、对象，替换为null | 对应类型即可
  selected_product: IProduct[] // 等价于Array<IProduct>
}

// 第二步：给form变量加类型注解，属性赋值符合类型要求的初始值
const form: IForm = {
  date: [],
  R2Os: [],
  type: 1,
  cats: null,
  selected_product: [] // 数组类型默认初始值为空数组即可
}

方案2：框架场景下的简化写法

如果是在框架中使用，可以直接把类型传入框架API的泛型中：

• Vue3响应式对象示例：

import { reactive } from 'vue'
const form = reactive<IForm>({
  date: [],
  R2Os: [],
  type: 1,
  cats: null,
  selected_product: []
})

• React useState示例：

import { useState } from 'react'
const [form, setForm] = useState<IForm>({
  date: [],
  R2Os: [],
  type: 1,
  cats: null,
  selected_product: []
})

内容的提问来源于stack exchange，提问作者morteza mortezaie