• 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'.

+1 głos
110 wizyt
pytanie zadane 2 lutego 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 przez Wiciorny Ekspert (230,930 p.)
wybrane 2 lutego 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 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 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 przez Wiciorny Ekspert (230,930 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 przez Karson Obywatel (1,000 p.)
Mogę oznaczyć image na object jeżeli to będzie zdjęcie?
1
komentarz 2 lutego przez Wiciorny Ekspert (230,930 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 przez ScriptyChris Mędrzec (183,660 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 przez ScriptyChris Mędrzec (183,660 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 przez Karson Obywatel (1,000 p.)
Pojawiał się też w trakcie kompilacji.

Podobne pytania

0 głosów
1 odpowiedź 1,197 wizyt
pytanie zadane 3 września 2020 w JavaScript przez poldeeek Mądrala (5,990 p.)
+1 głos
0 odpowiedzi 964 wizyt
+2 głosów
1 odpowiedź 190 wizyt
pytanie zadane 3 marca w JavaScript przez Wokie Nowicjusz (160 p.)

89,082 zapytań

137,670 odpowiedzi

307,610 komentarzy

59,140 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...