我试图理解这段 TypeScript 代码答案

【问题标题】：I am trying to understand this piece of TypeScript code我试图理解这段 TypeScript 代码
【发布时间】：2019-02-25 06:49:19
【问题描述】：

我有这个模板显示这些帖子：

<div class="card mb-3" *ngFor="let post of posts">
  <div class="card-body">
    <h5 class="card-title">{{post.title}}</h5>
    <p class="card-text">{{post.body}}</p>
    <button (click)="removePost(post)" class="btn btn-danger"><i class="fa fa-remove"></i></button>
    <button (click)="editPost(post)" class="btn btn-light"><i class="fa fa-pencil"></i></button>
  </div>
</div>

删除功能正在使用名为 servicePost 的服务来删除帖子

removePost(post: Post) {
    if (confirm('Are you sure?')) {
      this.postService.removePost(post.id).subscribe(() => {
        this.posts.forEach((current, index) => {
          if (post.id === current.id) {
            this.posts.splice(index, 1);
          }
        });
      });
    }
  }

还有服务本身

export class PostService {
      postsUrl: string = 'https://jsonplaceholder.typicode.com/posts';

      constructor(private http: HttpClient) { }

      removePost(post: Post | number): Observable<Post> {
        const id = typeof post === 'number' ? post : post.id;
        const url = `${this.postsUrl}/${id}`;

        return this.http.delete<Post>(url, httpOptions);  
      }

这部分我真的不明白：

removePost(post: Post | number): Observable<Post> {
const id = typeof post === 'number' ? post : post.id;

到目前为止，我了解到作者正在尝试提取post.id，以便他们可以使用它来组装return this.http.delete<Post>(url, httpOptions);并删除记录。

我不明白上面的代码是如何工作的。有什么想法吗？

【问题讨论】：

你到底有什么不明白的？ conditional operator?
您可以通过两种方式调用 removePost，removePost(post)（其中 post 是 Post 对象）和 removePost(35)（其中 35 是帖子的 id）。通过该行，作者试图了解参数是什么类型，并据此使用 id 或从对象中提取 id
@danday74 @John @Cristian 因此，如果传递的是整个对象，而不是数字，则使用 post.id 但如果传递了数字，那么这就是 id 本身，因此请按原样使用 post。因此，如果它是 `

标签： javascript arrays angular typescript observable

【解决方案1】：

点击<button (click)="removePost(post)" ...>触发删除帖子

removePost 方法依次调用postService.removePost，它发出 HTTP 请求并返回响应的 Observable。

在那个方法中...

TypeScript 允许您定义多种类型。所以在这种情况下 post 必须是 Post OR type number 类型。

如果帖子是数字类型，则将 id 设置为给定的数字。如果它是 Post 类型，则使用 post 对象 (post.id) 中的 id 属性。

removePost(post: Post | number): Observable<Post> {
const id = typeof post === 'number' ? post : post.id;

最后，在 removePost 方法的 .subscribe() 块中，接收到 HTTP 响应（但被忽略）。 subscribe 内部的函数仅在 HTTP 成功时调用，这意味着在后端服务器上已发生删除。所以他做了一个拼接，从前端数据中删除帖子。

【讨论】：

【解决方案2】：

removePost(post: Post | number)

这是一个接受一个参数的函数。该参数可以是Post 对象或简单数字。

const id = typeof post === 'number' ? post : post.id;

这部分决定如何确定ID。据推测，如果参数是一个数字，那就是 ID 本身，而如果你给它一个对象，它必须从对象的属性中获取它，所以它必须检查类型以知道使用哪种方法。如果三元语法让你感到困惑，可以大致改写成这样：

let id // changed to let because you can't declare a const without assigning it immediately
if (typeof post === 'number') {
    id = post
} else {
    id = post.id
}

【讨论】：