• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

TypeScript: Type '{ username: any; content: any; image: any; }' is not assignable to type 'never'.

VPS Starter Arubacloud
+1 głos
371 wizyt
pytanie zadane 2 lutego 2022 w JavaScript przez Karson Obywatel (1,000 p.)

Cześć,

uczę się TS, wyskoczył mi błąd o treści jak w tytule i nie wiem jak to naprawić ;( wkleję poniżej kod, jeśli ktoś wie to proszę o pomoc. Nie ważne czy dam jako typ newPost: newPostInterface czy nie bo ten błąd i tak występuje.

import React, { useState } from "react";

export const PostsContext = React.createContext({
  posts: [],
  handleAddPost: () => {},
  handleDeletePost: () => {},
});

interface PostsProviderProps {
  children: any;
}

interface newPostInterface {
  username: string;
  content: string;
  image: any;
}

const PostsProvider = ({ children }: PostsProviderProps) => {
  const [posts, setPosts] = useState([]);

  const handleAddPost = (values: any, selectedFile: any) => {
    const newPost = {
      username: values.username,
      content: values.content,
      image: selectedFile,
    };
    setPosts([newPost, ...posts]);
  };
};

 

2 odpowiedzi

+1 głos
odpowiedź 2 lutego 2022 przez Wiciorny Ekspert (269,120 p.)
wybrane 2 lutego 2022 przez Karson
 
Najlepsza

twoj useState jest useState([]) pustą tablicą nie określiłeś typu dla hooka przez co inicjalizujesz to tablica pustą, generalnie react nie wie z jakim typem doczynienia ma, i to powinieneś bardziej tablicą obiektów lub określić typ podczas ustawiania stanu dla metody -  setPost 
musisz określić typ dla state ... np 

const [data, setData] = useState<null | {albums: any}>(null);

https://stackoverflow.com/questions/53598449/react-hooks-and-typescript-property-does-not-exist-on-type-never

1
komentarz 2 lutego 2022 przez Karson Obywatel (1,000 p.)
Rzeczywiście, dziękuję za pomoc. Dodałem any dla tego useState ale czy mogę jakoś wskazać username i content na string a image na any?
1
komentarz 2 lutego 2022 przez Karson Obywatel (1,000 p.)

Dodałem tak jak sugerował ScriptyChris i mam username i content jako string i image jako any.

import React, { useState } from "react";

export const PostsContext = React.createContext({
  posts: [],
  handleAddPost: () => {},
  handleDeletePost: () => {},
});

interface PostsProviderProps {
  children: any;
}

interface newPostInterface {
  username: string;
  content: string;
}

const PostsProvider = ({ children }: PostsProviderProps) => {
  const [posts, setPosts] = useState<any>([]);

  const handleAddPost = (values: newPostInterface, selectedFile: any) => {
    const newPost = {
      username: values.username,
      content: values.content,
      image: selectedFile,
    };
    setPosts([newPost, ...posts]);
  };
};

 

komentarz 2 lutego 2022 przez Wiciorny Ekspert (269,120 p.)
bo samo any wskazuje na cokolwiek, jeśli masz gwarancje niezmienności swojego obiektu po daj go faktycznie na zasadzie  <{klucz: wartość, klucz2: wartość2 }>
komentarz 2 lutego 2022 przez Karson Obywatel (1,000 p.)
Mogę oznaczyć image na object jeżeli to będzie zdjęcie?
1
komentarz 2 lutego 2022 przez Wiciorny Ekspert (269,120 p.)

Image used as <img> element

image?: HTMLImageElement

URL to image.

image?: String

Image as file from <input> element

image?: File
2
komentarz 2 lutego 2022 przez ScriptyChris Mędrzec (190,190 p.)

Nie powinno używać się typu any, dopóki nie ma innego wyjścia, bo to właściwie wyłącza sprawdzanie typu przez TypeScript. Nie rozumiem jakim fixem jest tutaj podanie any jako generyczny typ dla useState, skoro - jako początkowy stan - ustawiona jest tam tablica, więc zmienna posts powinna od początku mieć typ tablicowy (TS powinien to sobie wywnioskować sam). Podlinkowany wyżej przykład ze StackOverflow odnosi się do sytuacji, gdy ktoś próbuje na początkowej wartości stanu null odczytać property i wtedy TS słusznie krzyczy:

    const [data, setData] = useState(null); // `data` początkowo ma wartość null

    return (
        <>
            <p>{data.albums}</p> // TS słusznie krzyczy, bo `data` nie ma property `albums`
        </>
    );

Autor odpowiedzi słusznie dopisał, że i tak później trzeba wykonać sprawdzenie czy data jest truthy, bo nawet jeśli "oszuka się" TS, że ta wartość istnieje (lub nawet jest obiektem), to i tak JavaScript w runtime rzuci błędem, bo nie będzie w stanie odwołać się do property albums na null-u (chyba, że uprzednio będzie dopisane sprawdzenie, czy to jest obiekt lub chociaż użyty optional chaining).


@Karson, u Ciebie takiej sytuacji nie ma - tworzysz zmienną, do której przypisujesz obiekt i jego wrzucasz jako aktualizacje stanu do tablicy. Ale, że jako typ argumentu values ustawiasz any, to TS (słusznie) nie wie, że ten argument ma propertisy username i content.

+1 głos
odpowiedź 2 lutego 2022 przez ScriptyChris Mędrzec (190,190 p.)

Czy ten błąd pojawia się w trakcie kompilacji czy tylko w IDE?

Pewnie przyczyną tego błędu jest, że argument values ma typ any, a próbujesz się dostać to jego propertisów (username i content). Ustaw typ newPostInterface dla argumentu values - możliwe, że będziesz wtedy musiał wyexcludować z niego property image, bo ten obiekt pewnie go nie ma, skoro bierzesz to property z osobnego argumentu.

komentarz 2 lutego 2022 przez Karson Obywatel (1,000 p.)
Pojawiał się też w trakcie kompilacji.

Podobne pytania

0 głosów
1 odpowiedź 1,573 wizyt
pytanie zadane 3 września 2020 w JavaScript przez poldeeek Mądrala (5,980 p.)
+1 głos
0 odpowiedzi 1,215 wizyt
+1 głos
1 odpowiedź 611 wizyt
pytanie zadane 3 marca 2022 w JavaScript przez Wokie Nowicjusz (170 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...