Hellow i got some problem with typescript or eslint (im new in eslint).
I show code, and next try to explain the error.
types.ts
export type TSettingsIputsState = {
personal: {
label: string;
name: keyof TApiResponseProfile;
value: string;
activeEdit: boolean;
onActionButtonClick: () => void;
}[];
display: boolean;
};
component.tsx
const [profileInputs, setProfileInputs] = useState();
useEffect(() => {
const setFormData = async () => {
if (!profileData) return;
const inputs = await inputsItems();
setProfileInputs({
personal: [
...inputs.personalSettings.map(({ label, name }) => ({
label,
name,
activeEdit: false,
value: profileData[name],
onActionButtonClick: () => console.log("asd"),
})),
],
display: false,
});
};
setFormData();
}, [profileData]);
This code give me no error from ts or eslint, but when i delete name and add dummy value, the ts dont suggest me to add name, and dont not recognize that dummy shouldn't be there.
Another error is when i change onActionButtonClick: (testing: string) => void in type there is no error when no change in onActionButtonClick: () => console.log("asd")
Please see image on link belowa
Why no error? doesn't suggest 'name'? IMAGE
https://i.stack.imgur.com/ppIAv.png
/>
tsconfig
{
"compilerOptions": {
"baseUrl": ".",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": false,
"strict": true,
"noEmit": true,
"target": "ES2015",
"esModuleInterop": true,
"module": "esnext",
"strictPropertyInitialization": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"sourceMap": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"noImplicitAny": false,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/layouts/*": ["./layouts/*"],
"@/complex/*": ["./components/complex/*"],
"@/parts/*": ["./components/parts/*"],
"@/inputs/*": ["./components/inputs/*"],
"@/forms/*": ["./components/forms/*"],
"@/hooks/*": ["./hooks/*"],
"@/skeletons/*": ["./components/skeletons/*"],
"@/utils/*": ["./utils/*"],
"@/middlewares/*": ["./middlewares/*"],
"@/providers/*": ["./providers/*"],
"@/types/*": ["./types/*"],
"@/apiTypes/*": ["./app/api/_types/*"],
"@/yupSchema/*": ["./yupSchema/*"],
"@/apiYupSchema/*": ["./app/api/_yupSchema/*"],
"@/dbPrisma": ["./utils/db.ts"],
"@/formsInitialValues/*": ["./formsInitialValues/*"],
"@/wretch": ["./utils/wretch"]
}
},
"include": ["next-env.d.ts", "types/**/*.ts", "app/_types/**/*.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"airbnb",
"airbnb-typescript",
"eslint:recommended",
"plugin:import/typescript",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:@tanstack/eslint-plugin-query/recommended"
],
"globals": {
"__dirname": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": [
"react",
"react-hooks",
"@typescript-eslint",
"prettier",
"@kalimahapps/eslint-plugin-tailwind"
],
"rules": {
"react/react-in-jsx-scope": ["off"],
"no-unused-vars": ["off"],
"react/jsx-uses-react": ["off"],
"react/jsx-props-no-spreading": ["off"],
"react/function-component-definition": ["off"],
"react/no-unescaped-entities": ["off"],
"react-hooks/rules-of-hooks": ["error"],
"react-hooks/exhaustive-deps": ["warn"],
"react/no-array-index-key": ["off"],
"arrow-body-style": ["error", "as-needed"],
"import/extensions": ["off"],
"import/prefer-default-export": ["off"],
"import/no-extraneous-dependencies": ["off"],
"@kalimahapps/tailwind/sort": ["warn"],
"@kalimahapps/tailwind/multiline": ["warn"],
"@typescript-eslint/no-throw-literal": ["off"],
"jsx-a11y/click-events-have-key-events": ["off"],
"jsx-a11y/no-static-element-interactions": ["off"],
"no-return-await": ["off"],
"@typescript-eslint/return-await": ["off"],
"react/button-has-type": [
"off",
{
"button": true,
"submit": true,
"reset": true
}
],
"padding-line-between-statements": [
"error",
{ "blankLine": "always", "prev": "*", "next": "return" }
]
}
}
P.S.
It's only happend when personal is array, but the error with function parameter check persist anyway.
When i do this, and testing, typescript sugges ok, but not error on function parameter
personal: {
label: string;
name: keyof TApiResponseProfile;
value: string;
activeEdit: boolean;
onActionButtonClick: (testing: string) => void;
};
Can you guys/girls cam check if tsconfig or eslint have some bug?
Ty alot for your time
Typescript eslint dont not recognize object in array
Programing Coderfunda
February 04, 2024
No comments
Related Posts:
HTML Paragraph Tutorial with ExampleHTML <p> tag is used to write paragraph.Example:<!DOCTYPE html><html><body><p>This is my first paragraph.</p>… Read More
HTML IntroductionWhat is HTML?HTML is the standard markup language for creating Web pages.HTML stands for Hyper Text Markup LanguageHTML describes the structure of Web… Read More
HTML heading Tutorial with ExampleHeadings help in defining the hierarchy and the structure of the web page.Example:In this page “HTML heading Tutorial with Example” is the h… Read More
HTML Comment tag with ExampleIn HTML Comment tags are used to insert comments in the HTML code.HTML code written between comment tag can’t be execute.Syntax:<!-- Write your com… Read More
HTML5 Tutorial With ExampleHypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. … Read More
0 comments:
Post a Comment
Thanks