score:2
you're using typescript without defining types and using any
everywhere.
if you know the shape of the data that you expect to receive from the api, it's not too difficult to create some types to begin using in your component.
this would solve the other ts errors in your question.
interface movie {
title: string;
year: string;
rated: string;
released: string;
runtime: string;
genre: string;
director: string;
writer: string;
actors: string;
plot: string;
language: string;
country: string;
awards: string;
poster: string;
ratings?: ratingsentity[] | null;
metascore: string;
imdbrating: string;
imdbvotes: string;
imdbid: string;
type: string;
dvd: string;
boxoffice: string;
production: string;
website: string;
response: string;
}
interface ratingsentity {
source: string;
value: string;
}
interface favorite extends movie {
isfavorite?: boolean;
}
then you can specify what the type will be within your state.
const [favorites, setfavorites] = usestate<favorite[]>([]);
const [movies, setmovies] = usestate<movie[]>([]);
const [selectedmovie, setselectedmovie] = usestate<movie | null>(null);
const [search, setsearch] = usestate<string>("");
score:1
react.createcontext
needs to be passed a default value, that will be used by consumer
s not contained by a provider
.
and as everyone else said, if you're not assigning any useful types, why use typescript in the first place?
type movie = {
// ...
}
type moviecontexttype = {
setsearch(value: string): void
movies: movie[]
// ...
}
const moviecontext = createcontext<moviecontexttype>({ /* ... */ })
const movieapp: react.fc = ({children}) => // ...
// etc.
score:1
you need to define what types of data your state should be, for example:
const [movies, setmovies] = usestate<thetypethatisreturn>()
// an example of using an array of objects:
const [movies, setmovies] = usestate<array<{id: string, name: string}>>([])
also you should set a default value for the movies state, as its currently set to nothing and thats why you're getting the 'any[] is not assignable to never[] error.
you'll find it way easier to debug these issues if you stop using 'any', as this will allow all types to pass through and then throw errors which is whole point of typescript. you can define this at the top of the file using an interface, or even in a seperate folder/file to store your interfaces and models:
interface imoviemodel {
id: string;
name: string;
}
const [movies, setmovies] = usestate<array<imoviemodel>>([])
if you follow these steps you will fix the errors, you will also need to model the api response or at least the parts of it you want to use to stop ts complaining about id not being found.
Source: stackoverflow.com
Related Query
- Typescript react An argument for 'defaultValue' was not provided
- Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type
- React Typescript - Argument of type is not assignable to parameter of type
- React + Redux-Observable + Typescript - Compilation, Argument Not Assignable Error
- Recharts is not working for the React with typescript
- React js Typescript Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number>'
- TypeScript w/ React - Argument of type 'string' is not assignable to parameter of type 'keyof T'
- How return a basic className for element which was not clicked React
- Typescript reducer initial state and option argument for react component
- React Dumb component Typescript error: Element is not a constructor function for JSX elements, property 'render' is missing
- React types files not working in React TypeScript (.tsx) file - Throwing ESLint errors for React Component
- Not a constructor error when importing packages for React Typescript
- TypeScript errors in React Class Component property does not exist on type 'Readonly<{}>', not sure how to set types for state
- react code splitting: is the argument for the import() function not a string
- Using EmailJS in TypeScript for a contact form, Argument of type 'EventTarget' is not assignable to parameter of type... .ts(2345)
- SWR hook error: "An argument for 'Fetcher' was not provided"
- Visual Studio React Typescript webpack-dev-server hot reload not working for component changes
- React emotion styled not working but normal css was working fine for input and label styles
- Typescript React type argument of type not assignable to parameter of type
- object.key for using object as array on map not allwoing to pass argument as props to React component
- Error: A required parameter (productId) was not provided as a string in getStaticPaths for /products/[productId]
- TypeScript type for Ref as argument in React
- React and Typescript Custom hook for Api request (being called twice and not mapping to type)
- Typescript error on React Component: Argument of type 'Element' is not assignable to parameter of type
- Typescript returning error Argument of type is not assignable but it seems like it is confusing one function for another
- Argument of type 'File' is not assignable to parameter of type 'never'. React with TypeScript
- Error: A required parameter (Slug) was not provided as a string in getStaticPaths for /post/[Slug]
- How to fix React TypeScript error: Argument of type '""' is not assignable to parameter of type 'SetStateAction<undefined>'
- How to specify (optional) default props with TypeScript for stateless, functional React components?
- TypeScript workaround for rest props in React
More Query from same tag
- React hooks update sort of whenever they feel like it
- How to keep text in same position?
- Object is possibly 'undefined'. TS2532
- Disable/Enable submit button in React JS USING FUNCTION
- Writing Unit Tests for TSX (TypeScript for JSX/React) for the Browser
- React: Deep requiring is deprecated as of uuid, Please require the top-level module
- Media Object doesn't render images
- Jest cannot find module from file in the same folder
- React functional component with non-JSX class has an internal array returning undefined
- Create and Edit components written same but only one routes back to home page
- React Render List Incorrect (List is correct, but render overwrite and duplicate)
- Redux action working only with bindActionCreators
- How to select multiple checkbox in Accordion using react?
- Having styling issue
- Nested routes in react-router-4
- React Router 1.0 How to redirect write redirect code inside flux action
- Programatically change Redux-Form Checkbox Field value
- how to query firestore v9 data in react js
- create-react-app can't find react in tests when aliased with preact
- How to resolve "module not found" in Reactjs?
- What's the idiomatic way to keep UI in sync with ajax calls when using Flux?
- <Link> to same page including query Parameters
- Blank white screen after React run build
- How to custom onSubmit in tinacms
- Programmatically select an item in Dropdown in Semantic-UI-React
- React Router: props aren't passed down when directly accessing the URL of child component. Will I need to use the same state in both parent and child?
- React-Heroku Postgress-Addon: GET http://app-name.herokuapp.com/any 503 (Service Unavailable)
- React error Cannot POST /TrajetBus after calling setState on a button
- Fetch() is not returning data from server in response
- How to render the parent component in the child component using react and typescript?