I got parsing error

[bryce0516]

First of all please check our spectrum community chat and we recommend to ask your question there for a quickest response and the indexing in search engines:

• https://spectrum.chat/react-redux-ts

The only good reason to use issue tracker for your questions would be for "special requests" that doesn't fit into bug reports and feature requests categories.

Hi. Before I ask question, thank you for this project. I just wanted to learn typescript. That's why I chose your project. This Project is awesome. I was able to learn both styles how to handle functional component and class component. when i using class component. has got error about "Parsing error: Unexpected reserved word 'public'." like readonly, public... etc... I thought problem is in .eslintrc.js or tsconfig.json. but I couldn't figure it out. So If you don't mind, give me some advice.

here is my code.

//////////////////////////////////////////////////////////////////////////////////////////////////////////

User.ts

export class User implements IUser {
id: string = cuid();
get fullName(): string {
return `${this.firstName} ${this.lastName}`;
}

constructor(public firstName: string, public lastName: string) {} <<<<<<<<<<<<<<< i've got error here(public)

static deserialize(dto: IUserDTO): IUser { const model = new User(dto.first_name, dto.last_name); model.id = dto.id;

return model;

}

serialize(): IUserDTO { return { id: this.id, first_name: this.firstName, last_name: this.lastName, }; } }

//////////////////////////////////////////////////////////////////////////////////////////////////////////
>ClassCounter.tsx

export default class ClassCounter extends React.Component<Props, State> { state: State = { <<<<<<<<<<<<<<<<<< and i couldn't write readonly reserved keyword. cuz faced parsing.error count: 0, };

handleIncrement = () => { this.setState({ count: this.state.count + 1 }); };

render() { const { handleIncrement } = this; const { label } = this.props; const { count } = this.state; return (

{label}: {count} {`Increment`}

);

} }

//////////////////////////////////////////////////////////////////////////////////////////////////////////

here is my eslintrc.js and tsconfig and package.json

> tsconfig

{ "compilerOptions": { "target": "ESNext", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "noEmitHelpers": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noUnusedLocals": true, "noEmit": true, "jsx": "react-jsx", "noImplicitAny": true, "noImplicitThis": true, "noEmitOnError": true, "strictNullChecks": true, "sourceMap": true, "typeRoots": [ "./node_modules/@types", "./src/types" ], "types": [ "node" ] }, "include": [ "src", "./eslintrc.js" ] }

//////////////////////////////////////////////////////////////////////////////////////////////////////////
> eslintrc

module.export = { parser: "@typescript-eslint/parser", parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 2017, project: ["./tsconfig.json", "./tsconfig.eslint.json"], }, plugins: ["@typescript-eslint"], extends: [ "react-app", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", ], rules: { // turn on errors for missing imports "import/no-unresolved": "error", "import/no-anonymous-default-export": [ "error", { allowArray: false, allowArrowFunction: false, allowAnonymousClass: false, allowAnonymousFunction: false, allowCallExpression: true, // The true value here is for backward compatibility allowLiteral: false, allowObject: false, }, ], "@typescript-eslint/prefer-readonly": "warn", }, settings: { "import/parsers": { "@typescript-eslint/parser": [".ts", ".tsx"], }, "import/resolver": { typescript: { alwaysTryTypes: true, // always try to resolve types under <root>@types directory even it doesn't contain any source code, like @types/unist // Choose from one of the "project" configs below or omit to use /tsconfig.json by default // use /path/to/folder/tsconfig.json project: "./src", // Multiple tsconfigs (Useful for monorepos) // use a glob pattern project: "./tsconfig.json", }, }, }, };

//////////////////////////////////////////////////////////////////////////////////////////////////////////
> package.json

{ "name": "litchef-web", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.7.0", "@emotion/styled": "^11.6.0", "@mui/material": "^5.2.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.2", "@types/react-dom": "^17.0.2", "@types/react-redux": "^7.1.20", "@types/react-router-dom": "^5.3.2", "@types/rx": "^4.1.2", "connected-react-router": "^6.9.2", "cuid": "^2.1.8", "history": "^5.1.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-router": "^5.2.1", "react-scripts": "4.0.3", "redux": "^4.1.2", "redux-observable": "^2.0.0", "rxjs": "^7.4.0", "typesafe-actions": "^5.1.0", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.5.0", "@typescript-eslint/parser": "^5.5.0", "eslint-import-resolver-typescript": "^2.5.0", "eslint-plugin-import": "^2.25.3", "redux-devtools-extension": "^2.13.9" } }