Color, by default, is a string that is set to primary. However, when used as an index in the Colors array, I encounter an issue where it is recognized as an any type. This happens because a string cannot be used as an index on type '{..etc}' The Colors represent default constants provided with Expo's tab template, but I am working on extending the color palette.
Being relatively new to TypeScript, I am unsure about the existence of an index type... So my question is, what should be the type setting for this?
I have experimented with changing it to sting[] or string{}, but the warning persists:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ primary: string; secondary: string;
black: etc.}'.
No index signature with a parameter of type 'string' was found on type '{ primary: string; secondary: string; black: string; white: string; darkGrey: etc.; }'.
import React from 'react'
... more code snippets ...
export default AppButton
Update:
Following some initial feedback, I decided to separate out the palette into its file instead of using it directly in the code. My attempt was to build upon the constants.Colors provided by Expo's Tab Template.
Should I specify the string type for the export? I noticed that the Colors object had restrictions allowing only light or dark themes. Should I define that this object can only have primary, secondary, etc., or should I search for an existing interface defined on the Color object?
export default {
primary: "#fc5c65",
secondary: "#4ecdc4",
black: "#000",
white: "#fff",
darkGrey: "#0c0c0c",
mediumGrey: "#6e6969",
lightGrey: "#f8f4f4",
danger: "#ff5252",
};