avoid Typescript complaint on missing React component props

Question

Using typescript checker only with VSCode on a javascript React project with a jsconfig.json I will need disable/bypass some typescript checks like missing property on objects and omited props.

for Example:

const Comp = ({ color, center, dark }) => <div> /* real code here */ </div>


<Comp color="blue" />   // TS check complaint on missing property: ts 2739

I would like to be able to use some TS check and disable others.

I try, without luck:

// global.d.ts
declare global {
  namespace JSX {
    type Element = string;
    interface ElementAttributesProperty {
    }
  }
}

It's not possible to disable certain messages. Why do you want to do this? Is it because center and dark are optional? Or are you in a hurry and you don't want to write types? (In the latter case, perhaps you could write a .jsx file instead of a .tsx file.) Another option is to use //@ts-ignore — joeytwiddle
– joeytwiddle, Commented Feb 10, 2019 at 9:35
I just want to use only certains features of typescript on the editor and avoid write some types, specially React related. My files are .js — scrapy_user
– scrapy_user, Commented Feb 10, 2019 at 9:40

joeytwiddle · Accepted Answer · 2019-02-11 03:03:33Z

1

If you really want to avoid writing types for those properties, then you could use any:

const Comp = ({ color, center, dark }: any) => <div> /* real code here */ </div>

You will of course need to disable the no-any rule, assuming you have that enabled (you should). You can disable it for the entire file by putting this earlier in the file:

/* tslint:disable:no-any */

Of course, doing this will lose the ability for TypeScript to warn you when you are passing the wrong properties! But at least it will make it clear where the missing types are, and you can always go over later and clean up.

In our team, we discourage people from using any and instead encourage them to get used to writing types for everything. This did slow us down at first, but it didn't take long for us to get used to doing it.

answered Feb 11, 2019 at 3:03

joeytwiddle

31.6k14 gold badges130 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aron · Accepted Answer · 2019-02-10 09:34:41Z

0

The problem is that you haven't specified the signature of your component's props. You could solve this by declaring an interface

interface CompProps {
  color: string;
  center: boolean; // or whatever its type is
  dark: boolean;
}

const Comp = ({ color, center, dark }: CompProps) => <div>{/* real code here */}</div>

answered Feb 10, 2019 at 9:34

Aron

9,3187 gold badges37 silver badges60 bronze badges

1 Comment

scrapy_user Over a year ago

I'm trying to avoid write React related types. I will like to add some ambient JSX declaration in order to avoid specified Components type declarations.

Collectives™ on Stack Overflow

avoid Typescript complaint on missing React component props

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related