我正在try 调查为什么当我调用文章.post[0].title时会出现运行时错误

I have post and posts and I want to call the first post of article (posts[0].title).
typescript assume I have posts size greater than 0 and doesn't throw any error.

type Post = {
    title: string
    url: string
}

type Posts = Maybe<Array<Post>>

type Article = {
   posts: Posts
}

和全局类型

type Maybe<T> = T | null;

有没有打字规则、eslint插件或编辑器插件可以检测到这个问题?

const article: Article = {
    posts: [],
}

article.posts?.[0].url

最终且正确的代码应该是

const article: Article = {
    posts: [],
}

article.posts?.[0]?.url

提前谢谢你.

enter image description here error image

推荐答案

try 访问索引为at的数组:

const arr: string[] = [];
const x = arr.at(0).toUpperCase();

在这里你可以看到一个playground.

请注意,它不会判断索引或数组长度,但它会强制您在访问元素之前判断元素是否存在.

上面的代码不能编译:

对象可能是"未定义的".(2532)

而以下代码可以编译:

const arr: string[] = [];
const x = arr.at(0)?.toUpperCase();

换句话说,arr[0]的类型是string,而arr.at(0)的类型是string | undefined.

一个不错的做法是永远不要使用方括号表示法访问数组,但是:

  • 使用.at(...)访问数组的特定索引
  • 使用.map.filter.reduce等函数方法迭代数组

Javascript相关问答推荐

为什么JavaScript双边字符串文字插值不是二次的?

确定MutationRecord中removedNodes的索引

Vega中的模运算符

没有输出到带有chrome.Devtools扩展的控制台

Mongoose post hook在使用await保存时不返回Postman响应

空的结果抓取网站与Fetch和Cheerio

引用在HTMLAttributes<;HTMLDivElement>;中不可用

如何从Intl.DateTimeFormat中仅获取时区名称?

无法读取未定义错误的属性路径名''

如何将未排序的元素追加到数组的末尾?

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

在表单集中保存更改时删除';禁用';

在验证和提交表单后使用useNavigate()进行react 重定向,使用带有加载器和操作的路由

如何在Reaction中清除输入字段

有没有办法在R中创建一张具有多个色标的热图?

如何在Reaction中设置缺省值, Select 下拉列表,动态追加剩余值?

扩散运算符未按预期工作,引发语法错误

我如何才能让p5.js在不使用实例模式的情况下工作?

REACT-本机错误:错误类型错误:无法读取未定义的容器的属性

如何在不获取其子元素的文本内容的情况下获取元素的文本内容?