Closed thekester closed 2 months ago
During the execution of npm start
, several TypeScript errors were encountered. Below is a detailed description of each error and the corrections that were made:
createWebmap.ts
line 197Error:
ERROR in ./src/components/SaveAsWebmapDialog/createWebmap.ts:197:30
TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ title: string; description: string; tags: string; extent: string; snippet: string; text: string; type: string; overwrite: string; f: string; token: string; }'.
No index signature with a parameter of type 'string' was found on type '{ title: string; description: string; tags: string; extent: string; snippet: string; text: string; type: string; overwrite: string; f: string; token: string; }'.
195 |
196 | Object.keys(uploadRequestContent).map((key) => {
197 | formData.append(key, uploadRequestContent[key]);
| ^^^^^^^^^^^^^^^^^^^^^^^^^
198 | });
199 |
200 | try {
Solution: Added a type assertion to allow indexing by string.
Object.keys(uploadRequestContent).map((key) => {
formData.append(key, (uploadRequestContent as { [key: string]: any })[key]);
});
Switch.tsx
line 25Error:
ERROR in ./src/components/SettingDialog/Switch.tsx:25:9
TS7053: Element implicitly has an 'any' type because expression of type '"checked"' can't be used to index type '{}'.
Property 'checked' does not exist on type '{}'.
23 |
24 | if (checked) {
25 | props['checked'] = true;
| ^^^^^^^^^^^^^^^^
26 | }
27 |
28 | useEffect(() => {
Solution: Defined a generic type for props to allow dynamic properties.
const props: { [key: string]: any } = {};
if (checked) {
props['checked'] = true;
}
getPreloadedState.ts
line 189Error:
ERROR in ./src/store/getPreloadedState.ts:189:9
TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
No index signature with a parameter of type 'string' was found on type '{}'.
187 | for (const job of jobs) {
188 | const { id } = job;
189 | byId[id] = job;
| ^^^^^^^^
190 | ids.push(id);
191 | }
192 |
Solution: Defined the byId object with appropriate type to allow string indexing.
interface Job {
id: string;
// other properties
}
const byId: { [key: string]: Job } = {};
const ids: string[] = [];
for (const job of jobs) {
const { id } = job;
byId[id] = job;
ids.push(id);
}
reducer.ts
line 78Error:
ERROR in ./src/store/Wayback/reducer.ts:78:17
TS7053: Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{}'.
No index signature with a parameter of type 'number' was found on type '{}'.
76 | for (const item of items) {
77 | const { releaseNum } = item;
78 | byReleaseNumber[releaseNum] = item;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
79 | allReleaseNumbers.push(releaseNum);
80 | }
81 |
Solution: Defined the byReleaseNumber object with appropriate type to allow number indexing.
const byReleaseNumber: { [key: number]: IWaybackItem } = {};
const allReleaseNumbers: number[] = [];
for (const item of items) {
const { releaseNum } = item;
byReleaseNumber[releaseNum] = item;
allReleaseNumbers.push(releaseNum);
}
state.byReleaseNumber = byReleaseNumber;
state.allReleaseNumbers = allReleaseNumbers;
Updated the tailwind.config.js
file to extend colors and adjust content paths.
Warnings:
warn - As of Tailwind CSS v2.2, lightBlue
has been renamed to sky
.
warn - Update your configuration file to silence this warning.
warn - As of Tailwind CSS v3.0, warmGray
has been renamed to stone
.
warn - Update your configuration file to silence this warning.
warn - As of Tailwind CSS v3.0, trueGray
has been renamed to neutral
.
warn - Update your configuration file to silence this warning.
warn - As of Tailwind CSS v3.0, coolGray
has been renamed to gray
.
warn - Update your configuration file to silence this warning.
warn - As of Tailwind CSS v3.0, blueGray
has been renamed to slate
.
warn - Update your configuration file to silence this warning.
Solution:
module.exports = {
content: [
'./src/**/*.html',
'./src/**/*.{js,jsx,ts,tsx}',
],
darkMode: 'class', // or 'media' or false
theme: {
extend: {
colors: {
sky: require('tailwindcss/colors').sky,
stone: require('tailwindcss/colors').stone,
neutral: require('tailwindcss/colors').neutral,
gray: require('tailwindcss/colors').gray,
slate: require('tailwindcss/colors').slate,
custom: {
'modal': {
'background': 'rgba(26,61,96, 0.9)',
'content-background': '#000'
},
'theme': {
'blue': {
DEFAULT: '#2267AE',
'brand': '#0079c1',
'light': '#56a5d8',
'dark': '#1A3D60'
}
},
'background': {
DEFAULT: '#121212'
},
'foreground': {
DEFAULT: '#ccc'
}
}
},
},
},
variants: {
extend: {},
},
plugins: [],
}
Hi @thekester,
Thank you for submitting this PR and for your efforts in addressing the errors you encountered.
The fixes you made for the TypeScript errors look good to me, so I will merge this PR into the master branch.
However, I will revert the changes you made to the README
and tailwind.config.js
files.
Jinnan
Hi @vannizhang,
No problem, thank you for reviewing and merging the PR!
Theophile
Hello! I encountered several errors when running npm start, so I corrected them and now everything is working fine. This Pull Request addresses the issues related to type errors, indexing problems, and Tailwind CSS configuration in the Wayback project. The following changes were made:
Changes Made