TypeScript中如何避免可选属性访问时的undefined报错？

1. 用类型守卫过滤数组 #

提前过滤掉数组中info为undefined的元素，TypeScript会自动推断后续访问的元素一定包含info：

interface Book {
    id: number
    info?: {
        name: string,
    }
}

const bookList: Book[] = [
    { id: 1, info: { name: "TypeScript实战" } },
    { id: 2 }
];

// 过滤出存在info的有效元素
const validBooks = bookList.filter(book => book.info !== undefined);

// 此时访问不会触发空值报错
console.log(validBooks[0].info.name);

2. 拆分类型区分场景 #

定义两个接口，分别对应“含完整info的Book”和“允许info缺失的Book”，按需使用：

// 完整结构的Book，info必填
interface CompleteBook {
    id: number
    info: {
        name: string,
    }
}

// 允许info缺失的Book
interface PartialBook extends Omit<CompleteBook, 'info'> {
    info?: CompleteBook['info']
}

const bookList: PartialBook[] = [
    { id: 1, info: { name: "TypeScript实战" } },
    { id: 2 }
];

// 转换为完整类型后访问
const firstValidBook = bookList[0] as CompleteBook;
console.log(firstValidBook.info.name);

3. 集中做非空断言（限明确安全的场景） #

如果能确定数组中特定位置的元素一定有info，可以在初始化时集中做类型断言，避免多处加!：

interface Book {
    id: number
    info?: {
        name: string,
    }
}

const bookList: Book[] = [
    { id: 1, info: { name: "TypeScript实战" } } as Required<Book>,
    { id: 2 }
];

// 访问第一个元素不会报错
console.log(bookList[0].info.name);

4. 修改编译器配置（谨慎使用） #

若项目可以接受全局关闭空值检查，可修改tsconfig.json的strictNullChecks为false，但这会隐藏所有空值相关的潜在问题，不推荐大型项目使用：

{
  "compilerOptions": {
    "strictNullChecks": false
  }
}

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