Parameter 'values' implicitly has an 'any' type.

[MinZhang9220]

❓Question

I am new to Formik, I got this "Parameter 'values' implicitly has an 'any' type" when i learn tutorial example Validation(first example of validation). Is anything wrong with my setting or something else? Very confused now.

My package.json { "name": "app.web", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^4.9.10", "@material-ui/icons": "^4.9.1", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "@types/jest": "^24.9.1", "@types/node": "^12.12.35", "@types/react": "^16.9.34", "@types/react-dom": "^16.9.6", "bootstrap": "^4.4.1", "formik": "^2.1.4", "imports-loader": "^0.8.0", "jquery": "^3.5.0", "react": "^16.13.1", "react-bootstrap": "^1.0.0", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "snapsvg": "^0.5.1", "snapsvg-cjs": "0.0.6", "typescript": "^3.7.5", "yup": "^0.28.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/yup": "^0.26.37", "prettier": "2.0.4" } }

My tsconfig.json { "compilerOptions": { "target": "es5", "lib": [ "es6", "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react", "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, "baseUrl": "src" }, "include": [ "src" ] }

[johnrom]

Can you reproduce in codesandbox? I'll be able to point right to the issue there, but here I don't have enough information to tell you what's happening here.

[MinZhang9220]

Can you reproduce in codesandbox? I'll be able to point right to the issue there, but here I don't have enough information to tell you what's happening here.

Hi Johnrom, Thanks so much.

codesandbox:https://codesandbox.io/s/crazy-lederberg-7qzcx?file=/src/App.tsx

There are two issues. 1:

2:

[johnrom]

@MinZhang9220 you'll have to specify the type that validate expects, or define the function directly on Formik, or TypeScript will not be able to infer the value of the parameter. Like this:

interface MyValues {
  firstName: string;
}

// type is inferred here, because it knows the type of the validate prop.
const MyForm = () => <Formik<MyValues>
  validate={values => {}}
/>;

// type cannot be inferred here because it isn't being assigned to the validate prop
const validate = (values: MyValues) => {};

// errors has to be typed manually, like this:
// note FormikErrors is a special type in Formik that replaces all of the Form Values with strings,
// you may need to import it from Formik.
const validate = (values: MyValues) => {
  const errors: FormikErrors<MyValues> = {};
  errors.firstName = "Correctly typed!";
};

[johnrom]

Also, I don't know what you based your sandbox off or why it's not working, but it seemed like it wasn't built off of a proper TypeScript build of React using create-react-app or tsdx or something. I wasn't able to get it configured, but I made a new sandbox with the same Form file to show how it works:

https://codesandbox.io/s/formik-typescript-glvhw

[MinZhang9220]

@johnrom Thanks so much, this problem solved. I just copy the demo code to webstorm.