TypeScript Angular新增引用无初始数据报错 如何预置默认引用数据

1. 修正错误的接口定义 #

你之前编写的interface属于TypeScript类型声明，仅在编译阶段做类型校验，不会生成任何运行时代码，自然不可能实现预置默认数据的效果，正确的接口定义如下：

interface QuoteData {
    quote : string;
}
// 无需额外添加quote1、quote2属性，仅保留基础的引用结构即可
export type Quote = QuoteData;

2. 前端组件初始化时预置默认引用 #

你可以在声明quotes变量时直接赋值初始值，保证组件加载时就存在至少一条默认数据：

// 声明时直接初始化默认值
public quotes: Record<string, Quote> = {
  "默认引用1": { quote: "这是预置的第一条默认引用" },
  "默认引用2": { quote: "这是预置的第二条默认引用" }
};
public columns = ['quote','Delete'];
public newquoteform = new FormGroup({
    quote: new FormControl(null, Validators.required)
})

如果你的引用数据是从后端拉取的，可以在拉取回调中增加兜底逻辑：如果拉取到的引用列表为空，就写入默认值：

// 示例：后端拉取接口回调中的处理逻辑
this.quoteApi.getQuoteList().subscribe(res => {
  this.quotes = res || {};
  // 兜底判断：无数据时插入默认值
  if (Object.keys(this.quotes).length === 0) {
    this.quotes = {
      "默认引用1": { quote: "这是预置的第一条默认引用" }
    };
    // 需要持久化到后端的话，这里调用后端保存接口即可
    this.quoteApi.saveQuoteList(this.quotes).subscribe();
  }
})

3. 优化提交逻辑兼容空数据场景 #

你现有的ID生成逻辑本身是支持空数据场景的，Object.keys传入空对象会返回空数组，indexOf判断会返回-1，不会阻断逻辑执行，你可以增加非空校验进一步提升稳定性：

submitquote() {
  // 先校验表单有效性
  if (this.newquoteform.invalid) return;
  const quote = this.newquoteform.value as Quote;
  // 增加空值兜底，避免quotes未初始化报错
  const quoteIDs = Object.keys(this.quotes ?? {});
  let id = (quote.quote).replace(/\s/g, "")
  if (quoteIDs.indexOf(id) !== -1) {
    let i = 2;
    while (quoteIDs.indexOf(id + i) !== -1) i++;
    id = id + i;
  }
  this.quotes[id] = quote;
  this.quotes = {...this.quotes}
  // 需要同步到后端的话，这里调用后端保存接口
  this.newquoteform.reset();
}

4. 后端持久化默认引用的方案 #

如果你需要默认引用持久化到数据库，需要在后端服务的启动逻辑中增加初始化判断：服务启动时检查引用存储/表中是否存在数据，为空则写入你需要的默认引用数据即可。

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