英文:

Typescript - Ensure that id is present in array

问题 {#heading}

以下是您要翻译的内容：

我有一个商店，我想要正确管理 id。假设我有以下的 Posts 商店：
type Post = {
  id: number;
  title: string;
  body?: string;
}

type Store = {
  postId: number | null;
  posts: Post[];
  addPost: (post: Omit<Post, "id">) => Promise<void>;
  updatePost: (id: number, post: Partial<Post>) => Promise<void>;
};
</code></pre>
<p>如果选择了一篇文章，postId 就会设置为所选文章的 id。我想告诉 TypeScript postId 始终/应始终在 posts 中。这样我就可以确保如果我想找到正确的文章，它总是存在。</p>
<p>在 TypeScript 中是否有办法做到这一点？</p>
<p>类似于这样：</p>
<pre><code>type Store = {
  postId: (number in StoreType.posts.key&lt;&quot;id&quot;&gt;) | null;
  posts: Post[];
  // ...
};


&lt;details&gt;
&lt;summary&gt;英文:&lt;/summary&gt;

I have a Store in which I want to manage ids properly. Say I have the following Posts Store:


```typescript
type Post = {
  id: number;
  title: string;
  body?: string;
}

type Store = {
  postId: number | null;
  posts: Post[];
  addPost: (post: Omit&amp;amp;lt;Post, &amp;amp;quot;id&amp;amp;quot;&amp;amp;gt;) =&amp;amp;gt; Promise&amp;amp;lt;void&amp;amp;gt;;
  updatePost: (id: number, post: Partial&amp;amp;lt;Post&amp;amp;gt;) =&amp;amp;gt; Promise&amp;amp;lt;void&amp;amp;gt;;
};
&lt;/code&gt;&lt;/pre&gt;
 &lt;p&gt;If a post is selected, the postId is set to the selected post id. I want to tell typescript that this postId is always / should always be in posts. So I can be sure that if I want to find the proper post, it's always there.&lt;/p&gt;
 &lt;p&gt;Is there any way in typescript to do this?&lt;/p&gt;
 &lt;p&gt;Something like this:&lt;/p&gt;
 &lt;pre&gt;&lt;code&gt;type Store = {
  postId: (number in StoreType.posts.key&amp;amp;lt;&amp;amp;quot;id&amp;amp;quot;&amp;amp;gt;) | null;
  posts: Post[];
  // ...
};
&lt;/code&gt;&lt;/pre&gt;
 &lt;h1 id=&quot;1&quot;&gt;答案1&lt;/h1&gt;
 &lt;p&gt;&lt;strong&gt;得分&lt;/strong&gt;: 2&lt;/p&gt;
 &lt;p&gt;没有，无法实现这一点。&lt;/p&gt;
 &lt;p&gt;这取决于运行时动态，超出了TS检查的范围。TS无法确定当您设置&lt;code&gt;id&lt;/code&gt;时，是否还有一个具有该id的数组项。&lt;/p&gt;
 &lt;details&gt;
  &lt;summary&gt;英文:&lt;/summary&gt;
  &lt;p&gt;No, there is no way to achieve this.&lt;/p&gt;
  &lt;p&gt;This depends on runtime dynamics which are out of scope for TS to check. There is no way for TS to figure out that when you're setting the &lt;code&gt;id&lt;/code&gt; you are also having an item in the array with that id.&lt;/p&gt;
 &lt;/details&gt;
 &lt;h1 id=&quot;2&quot;&gt;答案2&lt;/h1&gt;
 &lt;p&gt;&lt;strong&gt;得分&lt;/strong&gt;: 1&lt;/p&gt;
 &lt;p&gt;One thing you could do is define your posts &lt;code&gt;as const&lt;/code&gt; so the compiler can infer the post ids at compiler time. However, it's not possible to do that kind of type checking at runtime.&lt;/p&gt;
 &lt;pre tabindex=&quot;0&quot; style=&quot;color:#f8f8f2;background-color:#272822;&quot;&gt;&lt;code&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&lt;span style=&quot;color:#66d9ef&quot;&gt;const&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;posts&lt;/span&gt; &lt;span style=&quot;color:#f92672&quot;&gt;=&lt;/span&gt; [
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;id&lt;/span&gt;: &lt;span style=&quot;color:#66d9ef&quot;&gt;3&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;title&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color:#e6db74&quot;&gt;&quot;Post 5&quot;&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color:#e6db74&quot;&gt;&quot;some description&quot;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  },
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;id&lt;/span&gt;: &lt;span style=&quot;color:#66d9ef&quot;&gt;42069&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;title&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color:#e6db74&quot;&gt;&quot;Post 42069&quot;&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color:#e6db74&quot;&gt;&quot;some description&quot;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  },
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;id&lt;/span&gt;: &lt;span style=&quot;color:#66d9ef&quot;&gt;666&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;title&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color:#e6db74&quot;&gt;&quot;Post 666&quot;&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;    &lt;span style=&quot;color:#a6e22e&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color:#e6db74&quot;&gt;&quot;some description&quot;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  }
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;] &lt;span style=&quot;color:#66d9ef&quot;&gt;as&lt;/span&gt; &lt;span style=&quot;color:#66d9ef&quot;&gt;const&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&lt;span style=&quot;color:#66d9ef&quot;&gt;type&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;Store&lt;/span&gt; &lt;span style=&quot;color:#f92672&quot;&gt;=&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  &lt;span style=&quot;color:#a6e22e&quot;&gt;postId&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; (&lt;span style=&quot;color:#66d9ef&quot;&gt;typeof&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;posts&lt;/span&gt;)[&lt;span style=&quot;color:#66d9ef&quot;&gt;number&lt;/span&gt;][&lt;span style=&quot;color:#e6db74&quot;&gt;&quot;id&quot;&lt;/span&gt;]; &lt;span style=&quot;color:#75715e&quot;&gt;// 3 | 42069 | 666
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;&lt;span style=&quot;color:#75715e&quot;&gt;&lt;/span&gt;  &lt;span style=&quot;color:#a6e22e&quot;&gt;posts&lt;/span&gt;: &lt;span style=&quot;color:#66d9ef&quot;&gt;Post&lt;/span&gt;[];
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  &lt;span style=&quot;color:#a6e22e&quot;&gt;addPost&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; (&lt;span style=&quot;color:#a6e22e&quot;&gt;post&lt;/span&gt;: &lt;span style=&quot;color:#66d9ef&quot;&gt;Omit&lt;/span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;Post&lt;/span&gt;&lt;span style=&quot;color:#960050;background-color:#1e0010&quot;&gt;,&lt;/span&gt; &lt;span style=&quot;color:#960050;background-color:#1e0010&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:#a6e22e&quot;&gt;id&lt;/span&gt;&lt;span style=&quot;color:#960050;background-color:#1e0010&quot;&gt;&quot;&lt;/span&gt;&amp;gt;) &lt;span style=&quot;color:#f92672&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;Promise&lt;/span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;void&lt;/span&gt;&amp;gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;  &lt;span style=&quot;color:#a6e22e&quot;&gt;updatePost&lt;/span&gt;&lt;span style=&quot;color:#f92672&quot;&gt;:&lt;/span&gt; (&lt;span style=&quot;color:#a6e22e&quot;&gt;id&lt;/span&gt;: &lt;span style=&quot;color:#66d9ef&quot;&gt;number&lt;/span&gt;, &lt;span style=&quot;color:#a6e22e&quot;&gt;post&lt;/span&gt;: &lt;span style=&quot;color:#66d9ef&quot;&gt;Partial&lt;/span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;Post&lt;/span&gt;&amp;gt;) &lt;span style=&quot;color:#f92672&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span style=&quot;color:#a6e22e&quot;&gt;Promise&lt;/span&gt;&amp;lt;&lt;span style=&quot;color:#f92672&quot;&gt;void&lt;/span&gt;&amp;gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;display:flex;&quot;&gt;&lt;span&gt;};
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
 &lt;details&gt;
  &lt;summary&gt;英文:&lt;/summary&gt;
  &lt;p&gt;One thing you could do is define your posts &lt;code&gt;as const&lt;/code&gt; so the compiler can infer the post ids at compiler time. However, it's not possible to do that kind of type checking at runtime.&lt;/p&gt;
  &lt;pre&gt;&lt;code&gt;const posts = [
  {
    id: 3,
    title: &amp;amp;quot;Post 5&amp;amp;quot;,
    body: &amp;amp;quot;some description&amp;amp;quot;
  },
  {
    id: 42069,
    title: &amp;amp;quot;Post 42069&amp;amp;quot;,
    body: &amp;amp;quot;some description&amp;amp;quot;
  },
  {
    id: 666,
    title: &amp;amp;quot;Post 666&amp;amp;quot;,
    body: &amp;amp;quot;some description&amp;amp;quot;
  }
] as const;

type Store = {
  postId: (typeof posts)[number][&amp;amp;quot;id&amp;amp;quot;]; // 3 | 42069 | 666
  posts: Post[];
  addPost: (post: Omit&amp;amp;lt;Post, &amp;amp;quot;id&amp;amp;quot;&amp;amp;gt;) =&amp;amp;gt; Promise&amp;amp;lt;void&amp;amp;gt;;
  updatePost: (id: number, post: Partial&amp;amp;lt;Post&amp;amp;gt;) =&amp;amp;gt; Promise&amp;amp;lt;void&amp;amp;gt;;
};
&lt;/code&gt;&lt;/pre&gt;
 &lt;/details&gt;
 &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;