TypeScript数组赋值时报Cannot set property 'data' of undefined错误如何解决

你初始化的val数组只有1个初始元素，当你遍历的mydata长度大于1时，索引j大于等于1的位置，val[j]本身是undefined，此时直接访问val[j].data相当于给undefined设置属性，就会触发你遇到的类型错误。
你之前定义的只是数组第一个元素的data、value属性，并不是数组所有位置的元素都会自动生成对应结构的对象。

分两种常见场景：

场景1：需要全量用mydata生成新的val数组（最常用） #

直接清空原有val，遍历mydata生成新元素插入即可，不需要预填初始值：

// 先定义数组元素类型，复用更方便
type ValItem = {
  data: string;
  value: string;
}
let val: ValItem[] = [];
// 返回值类型要和数组元素类型对应，你之前写的data[]是无效类型
const getDetails = (): ValItem[] => {
  // 先清空原有数据，如果不需要清空可以删掉这行
  val = [];
  for(let j = 0; j < mydata.length; j++){
    val.push({
      data: mydata[j].id,
      value: mydata[j].name
    })
    console.log(mydata[j].name);
    console.log(mydata[j].id);
  }
  return val;
}

也可以用更简洁的map写法替代for循环：

const getDetails = (): ValItem[] => {
  val = mydata.map(item => ({
    data: item.id,
    value: item.name
  }))
  return val;
}

场景2：需要保留原有val数组的内容，修改指定索引位置的元素 #

在赋值前先判断对应索引的元素是否存在，不存在先初始化：

type ValItem = {
  data: string;
  value: string;
}
let val: ValItem[] = [{data:"1",value:"vals"}];
const getDetails = (): ValItem[] => {
  for(let j = 0; j < mydata.length; j++){
    // 对应索引无元素时先初始化结构
    if (!val[j]) {
      val[j] = {} as ValItem;
    }
    val[j].data = mydata[j].id;
    val[j].value = mydata[j].name;
    console.log(mydata[j].name);
    console.log(mydata[j].id);
  }
  return val;
}

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