类型“未定义”不可分配给类型“日期”

Posted 2023-03-13

【中文标题】类型“未定义”不可分配给类型“日期”

【英文标题】：Type 'undefined' is not assignable to type 'Date'

【发布时间】：2021-07-02 09:10:43

【问题描述】：

实际上，我想在我的页面上显示记录的日期。为此，我创建了一个显示记录的日期的函数。但是当我发现意外错误时，我被卡住了。

这是我的代码：

import  Component, OnInit  from '@angular/core';
import  FormBuilder, FormGroup, Validators  from '@angular/forms';
import  ActivatedRoute, Router  from '@angular/router';
import  BookService  from 'src/app/services/book.service';

@Component(
  selector: 'app-update-book',
  templateUrl: './update-book.component.html',
  styleUrls: ['./update-book.component.css']
)
export class UpdateBookComponent implements OnInit 

  updateBookForm:FormGroup
  book:any
  constructor(private service:BookService,private route : ActivatedRoute,private   router:Router,private fb:FormBuilder)  

  ngOnInit(): void 
    this.service.getBookById(this.route.snapshot.params.id).subscribe(data=>
      this.book=data;

      this.updateBookForm = this.fb.group(
        id:[data.id],
        title:[data.title, Validators.required],
        author:[data.author, Validators.required],
        description:[data.description, Validators.compose([Validators.required, Validators.minLength(30)])],
        rate:[data.rate],
        dateStart:[this.formatDate (data.dateStart)],
        dateRead:[data.dateRead],
      )
    )
  

  formatDate(date: Date)
    if(date)
      return new Date(date).toISOString().substring(0,10);
    
  

  onSubmit()
  

  

我在这里创建了“formatDate”功能，但这是我面临的主要问题。

这是我的错误：-

我将如何解决这个问题。请帮忙。

更新

更新-book.component.html

<div class="update-book">

    <form [formGroup]="updateBookForm"(ngSubmit)="onSubmit()">
        
        <div class="form-group">
          <label for="title" class="required">Title</label>
          <input type="text" class="form-control" id="title" formControlName="title" placeholder="Book Title">
        </div>
        <div class="form-group">
            <label for="author" class="required">Author</label>
            <input type="text" class="form-control" id="author" formControlName="author" placeholder="Book Author">
        </div>
        <div class="form-group">
            <label for="description" class="required">Description</label>
            <input type="text" class="form-control" id="description" formControlName="description" placeholder="Book Description">
        </div>
    
        <div class="row">
    
            <div class="col-md-4 col-xs-4 col-sm-4">
                <div class="form-group">
                    <label for="dateStart">Date Start</label>
                    <input type="date" class="form-control" id="dateStart" formControlName="dateStart" placeholder="Date Start">
                </div>
            </div>
            <div class="col-md-4 col-xs-4 col-sm-4">
                <div class="form-group">
                <label for="dateRead">Date Read</label>
                    <input type="date" class="form-control" id="dateRead" formControlName="dateRead" placeholder="Date Read">
                    </div>
            </div>
            <div class="col-md-4 col-xs-4 col-sm-4">
                <div class="form-group">
                    <label for="rate">Rate</label>
                    <input type="number" min="0" max="5" class="form-control" id="rate" formControlName="rate" placeholder="Rate">
                </div>
            </div>
    
        </div>
        <button class="btn btn-success" type="submit">UPDATE</button>
        <button class="btn btn-danger" type="submit" [routerLink]="['/books']" >CANCEL</button>
    </form>
    </div>

book.service.ts

import  Injectable  from '@angular/core';
import HttpClient from '@angular/common/http';
import  Book  from '../interfaces/book'


@Injectable(
  providedIn: 'root'
)
export class BookService 

  readonly baseURL ="http://localhost:59750/api/Books"


  constructor(private http: HttpClient)  


  getAllBooks()
  
    return this.http.get<Book[]>(this.baseURL+"/GetBooks");
  

  addBook(book: Book)
    return this.http.post(this.baseURL+"/AddBook/", book);
  

  getBookById(id:number)
  
        return this.http.get<Book>(this.baseURL+"/SingleBook/"+id);
  

  upDateBook(book:Book)
    return this.http.put(this.baseURL+"/UpdateBook/"+book.id,book);
  

  

更新

book.ts

export  interface Book

    id: number;
    title: string;
    description: string;
    author: string;
    rate?: number;
    dateStart?: Date;
    dateRead? : Date;

【问题讨论】：

请同时发布您的 HTML 代码和返回的 JSON 数据。

您需要为可能的未定义值添加检查。在formatDate() 方法中添加else 条件，如果date = undefined 则返回默认值。

我认为您的 book 对象没有类型，TypeScript 无法将 dateStart 属性识别为 Date 类型。

您的Book.dateStart 属性是日期类型吗？

你能添加Book类的类型

【参考方案1】：

关于您的问题和更新。您的问题是 dateStart 是您 Book 类的可选属性。这就是您收到错误消息的原因

类型参数 'Date | undefined' 不能分配给'Date' 类型的参数

因为这个属性可能没有被设计定义。

在我看来，要改变这一点，你有两个选择。

将dateStart 属性设为“正常”属性，这样编译器就可以通过删除? 来知道该属性已设置。

您可以尝试将属性转换为Date

dateStart:[this.formatDate(data.dateStart as Date)],

这也应该可以防止错误消息，但您需要注意formatDate 函数中潜在的未定义值

【讨论】：

这一行错误消失了``` dateStart:[this.formatDate(data.dateStart)],``` 但是我的formatData()函数和我的帖子一样发现错误。

错误是：```错误TS7030：并非所有代码路径都返回值。 33 格式日期（日期：日期） ~~~~~~~~~~ ```

@Batajus 我刚刚意识到? 表示可选且不可为空。你能解释一下吗？实际上有什么不同？

其实我不知道你在问我什么。

@Linkon ，（抱歉。我在上一条评论中添加了名称，只是为了清楚起见）您现在应该在您的if 语句中添加else 语句并返回您想要的值。您可能将返回类型添加到您的函数 formatDate(date: Date):Date