TypeScript issues

[LucasDibz]

Following a boilerplate from Alura Imersão React - Aula 01

I've encountered two TypeScript issues:

props:

• backgroundImage
• backgroundRepeat
• backgroundSize
• backgroundBlendMode
• minHeight

does not exist in type StyleSheet

textFieldColors props: positive, negative are mandatory and should be optional (?)

[victordantasdev]

I had these problems too, and temporarily solved them by directly editing the components.d.ts file by adding these lines to the StyleSheet interface:

interface StyleSheet {
  ...
  backgroundImage?: ResponsiveProperty<string> | string;
  backgroundRepeat?: ResponsiveProperty<string> | string;
  backgroundSize?: ResponsiveProperty<string> | string;
  backgroundBlendMode?: ResponsiveProperty<string> | string;
  minHeight?: ResponsiveProperty<string> | string;
  ...
}

and I also had this problem in the Box component:

and also solved it temporarily by adding these lines in components.d.ts:

interface BoxProps {
    ...
    as?: string
}

declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, ... | "as"> & React.RefAttributes<unknown>>;

and this issue on TextField component:

wich another time, I solved it temporarily by adding these lines in components.d.ts:

declare namespace TextField {
    var defaultProps: {
        name:string;
        ...
    }
}

[LucasDibz]

PR #71 adding these CSS props to TypeScript and .json files

and I also had this problem in the Box component:

Tag as on <Box /> is deprecated, use tag instead.

[victordantasdev]

Another problem I encountered in today's class is that when you pass to <Box /> an ​​onSubmit property:

and solved it by adding these lines in components.d.ts:

interface BoxProps {
    ...
    onSubmit?: (e: HTMLFormElement) => any;
}

declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, ... | "onSubmit"> & React.RefAttributes<unknown>>;

But even solving all these issues on my local machine, I still can't upload my project to vercel because it doesn't compile.

[LucasDibz]

Another problem I encountered in today's class is that when you pass to <Box /> an ​​onSubmit property:

and solved it by adding these lines in components.d.ts:

interface BoxProps {
    ...
    onSubmit?: (e: HTMLFormElement) => any;
}

declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, ... | "onSubmit"> & React.RefAttributes<unknown>>;

But even solving all these issues on my local machine, I still can't upload my project to vercel because it doesn't compile.

You can bypass that while onSubmit is not implemented by using the "Entrar" button onClick event.

[LucasDibz]

Another problem I encountered in today's class is that when you pass to <Box /> an ​​onSubmit property:

and solved it by adding these lines in components.d.ts:

interface BoxProps {
    ...
    onSubmit?: (e: HTMLFormElement) => any;
}

declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, ... | "onSubmit"> & React.RefAttributes<unknown>>;

But even solving all these issues on my local machine, I still can't upload my project to vercel because it doesn't compile.

You can bypass that while onSubmit is not implemented by using the "Entrar" button onClick event.

Actually, to bypass you can also use a // @ts-ignore whenever you have a missing Type problem.
e.g.:

styleSheet={{
          ...
          // @ts-ignore
          maxHeight: '95vh',
        }}