search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.65k stars 26.81k forks source link

When porting code from create-react-app-typescript to new native TS support, we get Property 'someProp' is missing in type '{}' #6016

Closed quantuminformation closed 5 years ago

quantuminformation commented 5 years ago

This error did not occur anywhere in our app when using the create-react-app-typescript

        Property 'someProp' is missing in type '{}'.  TS2345

Any ideas what difference could cause this with the native TS support?

quantuminformation commented 5 years ago

Found our issue: they type object was not accepting another type,

isInitialValid?: boolean | ((props: object) => boolean | undefined);

So we changed our code from a specific type to any

isInitialValid: (props: Foo) => (props.user ? !isEmpty(props.user) : false), to isInitialValid: (props: any) => (props.user ? !isEmpty(props.user) : false),

mrmckeb commented 5 years ago

Thanks for the update, @QuantumInformation. Can we close this off?

quantuminformation commented 5 years ago

Soon, I'm just wondering why this error only occurs with the new native CRA. I will also discuss with Formik.

quantuminformation commented 5 years ago

https://github.com/jaredpalmer/formik/issues/1176

mrmckeb commented 5 years ago

Different projects can have different .tsconfig files - so this is likely a matter of strictness. But I haven't had a look through in detail at the config in create-react-app-typescript.

Moving to any doesn't seem right though... If you can put together a test repository, I could take a deeper look.

quantuminformation commented 5 years ago

We moved the same tsconfig in place of the one generated by the native CRA and had the same error. If we can't resolve it by using any or smth else, will try recreate it for you, thx.

quantuminformation commented 5 years ago

So we can't assign a custom type interface to an object type now?

mrmckeb commented 5 years ago

@QuantumInformation You certainly can assign custom interfaces/types to objects, I was just agreeing that (as you pointed out) any didn't seem like the right fix to your problem.

quantuminformation commented 5 years ago

I just tested it here and it works fine http://www.typescriptlang.org/play/#src=interface%20Foo%20%7B%0D%0A%20%20%20%20prop1%3Anumber%0D%0A%7D%0D%0A%0D%0Aconst%20la%3AFoo%20%3D%20%7Bprop1%3A2%7D%0D%0A%0D%0Aconst%20baa%20%3D%20(prop%3A%20object)%20%3D%3E%202%0D%0A%0D%0A%0D%0Abaa(la)

mrmckeb commented 5 years ago

OK, thanks. That certainly shouldn't cause an issue in CRA, it may be the expected type that's the issue... but again, I can't tell you without seeing a live example sorry.

quantuminformation commented 5 years ago

I think the problem is that the typing info of our custom prop, is not being passed on downstream, so consumers of this prop are expecting an object with no custom props.

Hence

` Property 'someProp' is missing in type '{}'. TS2345z

Timer commented 5 years ago

Can you try setting skipLibCheck to false in your tsconfig.json?

quantuminformation commented 5 years ago

Same error remains


    "module": "esnext",
    "target": "es5",
    "lib": [
      "es5",
      "es6",
      "es7",
      "es2017",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "skipLibCheck": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
Timer commented 5 years ago

Oops, I'm sorry, I meant try setting it to true. 😄 Or was it true previously?

Did you eject Create React App? Please paste the contents of tsconfig.json after running npm start at least once.

quantuminformation commented 5 years ago

Yes it was true before

quantuminformation commented 5 years ago

We didn't eject and have no plans too

quantuminformation commented 5 years ago

If we use cra generated config, we have same issue, we are worried its a babel thing now.

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "lib": ["es2018", "dom"]
  },
  "include": ["src"]
}
quantuminformation commented 5 years ago

https://github.com/jaredpalmer/formik/issues/1176#issuecomment-446242171

Timer commented 5 years ago

All type validation is performed with TypeScript, Babel does not perform any type checks.

This is most likely a real issue that was just suppressed in CRA-TS. If you provide a reproducing demo we can probably help more.

harrysolovay commented 5 years ago

@QuantumInformation @Timer sounds like this issue stems from not being able to configure CRA's typescript linting –– not sure if it would be useful in this instance, but I'd encourage you to check out Rescripts and the use-tslint-config rescript. Using these two packages, you can configure the linting to be as strict or lenient as you so choose 👍I just released Rescripts and am looking for feedback, so please let me know if there's a specific "rescripts" (like a rewire or plugin) that I could make for you :)

quantuminformation commented 5 years ago

Its probably a side effect of a deeper issue, we will need to port our code over gradually to find some nested TS issue.