c# - Typescript Date-objekt är en sträng

Jag har ett TypeScript-interface som har en variabel (start) med typen Date | null. Denna data hämtas från ett .NET-API som returnerar ett DateTime-objekt. Variabeln start körs genom en Date-fns-funktion som kastar ett fel, en RangeError, eftersom Date-fns har ändrat funktionen till att endast acceptera datum.

Ogiltigt tidsvärde

react_devtools_backend.js:4026 Från och med v2.0.0-beta.1 accepterar date-fns inte strängar som datumargument. Använd parseISO för att tolka strängar

Problemet jag har är att jag trodde att start redan var ett date-objekt, men när jag skriver ut det till konsolen är det faktiskt en string. Jag skulle kunna fixa detta problem genom att helt enkelt parsa det, men jag vill ändå veta varför det inte har rätt typ.

console.log("I am a" + typeof(raceEvent.start!))
console.log(raceEvent.start)

Jag är sträng

2022-04-28T08:30:00

Typescript-gränssnitt:

export interface RaceEvent {
    id: string;
    sponsor: string;
    logo: string;
    prefix: string;
    name: string;
    postfix: string;
    start: Date | null;
    end: Date | null;
}

C#-klass:

public class RaceEvent
{
    public Guid Id { get; set; }

     public string? Sponsor { get; set; }

     public string? Prefix { get; set; }

     public string Name { get; set; }

     public string? Postfix { get; set; }

     public string? Logo { get; set; }

     public DateTime Start { get; set; }

     public DateTime End { get; set; }
}

Ladda händelsefunktion

loadEvent = async (eventId: string) => {
    this.loadingInitial = true;
    
    try {
        let raceEvent = await agent.Events.details(eventId);
        runInAction(() => {
            this.selectedEvent = raceEvent;
            this.loadingInitial = false;
        });
    } catch (error) {
        console.log(error);
        runInAction(() => {
            this.loadingInitial = false;
        });
    }
};

agent.ts

const Events = {
    details: (id: string) => requests.get<RaceEvent>(`/raceEvents/${id}`),
};

const responseBody = <T>(response: AxiosResponse<T>) => response.data;

const requests = {
    get: <T>(url: string) => axios.get<T>(url).then(responseBody),
    post: <T>(url: string, body: {}) => axios.post<T>(url, body).then(responseBody),
    put: <T>(url: string, body: {}) => axios.put<T>(url, body).then(responseBody),
    del: <T>(url: string) => axios.delete<T>(url).then(responseBody),
};

Svar #1

Viss information saknas, men jag föreställer mig att du använder JSON för att utbyta data mellan frontend (något JS-bibliotek) och backend (dotnet). Det första är att JSON inte specificerar en datumtyp i sin specifikation, men det finns vissa metoder för att representera datum som en sträng i JSON.

date-fns-biblioteket kräver Date-objekt för att manipulera datum. Då behöver du omvandla denna sträng som tas emot från API:et till ett datumobjekt genom new Date(dateString).

Bara en notering, Typescript-typdeklarationer är bara en 'simulation' ovanpå Javascript, det fungerar endast vid typkontroll vid kompileringstid, det finns ingen typ av tvångskonvertering vid körning.

Svar #2

Jag har samma problem. Vad som fungerar för mig är att jag helt enkelt skapar ett nytt datum innan jag använder date-fns-funktionen.

start = new Date(Start)

Efter det fungerar fns-date-funktionerna utan problem. Självklart är det inte den lösning jag vill ha. :)

Relaterade artiklar