Mixing
issue with typing an object Typescript error - no index signature
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have an object that I need to type, but am unsure how to do this.
The following is the error I am seeing and my code is below.
Element implicitly has an 'any' type because type '{ LIV: string; MAN:
string; LDN: string; }' has no index signature. [7017]
type Props = {
city: string;
cityMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const city = cityMap[city];
return <>{city}</>;
};
javascript reactjs typescript
asked Jan 3 at 9:51
peter flanaganpeter flanagan
1,13011439
add a comment |
I have an object that I need to type, but am unsure how to do this.
The following is the error I am seeing and my code is below.
Element implicitly has an 'any' type because type '{ LIV: string; MAN:
string; LDN: string; }' has no index signature. [7017]
type Props = {
city: string;
cityMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const city = cityMap[city];
return <>{city}</>;
};
javascript reactjs typescript
asked Jan 3 at 9:51
peter flanaganpeter flanagan
1,13011439
add a comment |
I have an object that I need to type, but am unsure how to do this.
The following is the error I am seeing and my code is below.
Element implicitly has an 'any' type because type '{ LIV: string; MAN:
string; LDN: string; }' has no index signature. [7017]
type Props = {
city: string;
cityMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const city = cityMap[city];
return <>{city}</>;
};
javascript reactjs typescript
asked Jan 3 at 9:51
peter flanaganpeter flanagan
1,13011439
I have an object that I need to type, but am unsure how to do this.
The following is the error I am seeing and my code is below.
Element implicitly has an 'any' type because type '{ LIV: string; MAN:
string; LDN: string; }' has no index signature. [7017]
type Props = {
city: string;
cityMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const city = cityMap[city];
return <>{city}</>;
};
javascript reactjs typescript
javascript reactjs typescript
asked Jan 3 at 9:51
peter flanaganpeter flanagan
1,13011439
asked Jan 3 at 9:51
peter flanaganpeter flanagan
1,13011439
edited Jan 3 at 10:15
peter flanagan
asked Jan 3 at 9:51
peter flanaganpeter flanagan
1,13011439
asked Jan 3 at 9:51
peter flanaganpeter flanagan
1,13011439
asked Jan 3 at 9:51
peter flanaganpeter flanagan
1,13011439
1,13011439
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
With noImplictAny typescript will not let you index into objects with arbitrary strings (as this is not really type safe and the result of such an index operation would implicitly be any)
There are several possible solutions.
Change the type of city to be keyof Props['currencyMap']
type Props = {
city: keyof Props['currencyMap'];
currencyMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city];
};.
Or use a type assertion to tell the compiler you are sure city will be an apropriate key:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city as keyof Props['currencyMap']];
};
Or you can use a check to ensure city is an expected key with a custom type guard:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const isCity = (c: string): c is keyof Props['currencyMap'] => c in cityMap;
if (isCity(city)) {
cityMap[city];
}else { /* What now ? error ? */ }
};
answered Jan 3 at 9:57
Titian Cernicova-DragomirTitian Cernicova-Dragomir
73.4k35370
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019830%2fissue-with-typing-an-object-typescript-error-no-index-signature%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
With noImplictAny typescript will not let you index into objects with arbitrary strings (as this is not really type safe and the result of such an index operation would implicitly be any)
There are several possible solutions.
Change the type of city to be keyof Props['currencyMap']
type Props = {
city: keyof Props['currencyMap'];
currencyMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city];
};.
Or use a type assertion to tell the compiler you are sure city will be an apropriate key:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city as keyof Props['currencyMap']];
};
Or you can use a check to ensure city is an expected key with a custom type guard:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const isCity = (c: string): c is keyof Props['currencyMap'] => c in cityMap;
if (isCity(city)) {
cityMap[city];
}else { /* What now ? error ? */ }
};
answered Jan 3 at 9:57
Titian Cernicova-DragomirTitian Cernicova-Dragomir
73.4k35370
add a comment |
With noImplictAny typescript will not let you index into objects with arbitrary strings (as this is not really type safe and the result of such an index operation would implicitly be any)
There are several possible solutions.
Change the type of city to be keyof Props['currencyMap']
type Props = {
city: keyof Props['currencyMap'];
currencyMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city];
};.
Or use a type assertion to tell the compiler you are sure city will be an apropriate key:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city as keyof Props['currencyMap']];
};
Or you can use a check to ensure city is an expected key with a custom type guard:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const isCity = (c: string): c is keyof Props['currencyMap'] => c in cityMap;
if (isCity(city)) {
cityMap[city];
}else { /* What now ? error ? */ }
};
answered Jan 3 at 9:57
Titian Cernicova-DragomirTitian Cernicova-Dragomir
73.4k35370
add a comment |
With noImplictAny typescript will not let you index into objects with arbitrary strings (as this is not really type safe and the result of such an index operation would implicitly be any)
There are several possible solutions.
Change the type of city to be keyof Props['currencyMap']
type Props = {
city: keyof Props['currencyMap'];
currencyMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city];
};.
Or use a type assertion to tell the compiler you are sure city will be an apropriate key:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city as keyof Props['currencyMap']];
};
Or you can use a check to ensure city is an expected key with a custom type guard:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const isCity = (c: string): c is keyof Props['currencyMap'] => c in cityMap;
if (isCity(city)) {
cityMap[city];
}else { /* What now ? error ? */ }
};
answered Jan 3 at 9:57
Titian Cernicova-DragomirTitian Cernicova-Dragomir
73.4k35370
With noImplictAny typescript will not let you index into objects with arbitrary strings (as this is not really type safe and the result of such an index operation would implicitly be any)
There are several possible solutions.
Change the type of city to be keyof Props['currencyMap']
type Props = {
city: keyof Props['currencyMap'];
currencyMap: {
LIV: string;
MAN: string;
LDN: string;
};
};
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city];
};.
Or use a type assertion to tell the compiler you are sure city will be an apropriate key:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const cityName = cityMap[city as keyof Props['currencyMap']];
};
Or you can use a check to ensure city is an expected key with a custom type guard:
const Cities = ({ city }: Props) => {
const cityMap = {
LIV: 'Liverpool',
MAN: 'Manchester',
LDN: 'London'
};
const isCity = (c: string): c is keyof Props['currencyMap'] => c in cityMap;
if (isCity(city)) {
cityMap[city];
}else { /* What now ? error ? */ }
};
answered Jan 3 at 9:57
Titian Cernicova-DragomirTitian Cernicova-Dragomir
73.4k35370
answered Jan 3 at 9:57
Titian Cernicova-DragomirTitian Cernicova-Dragomir
73.4k35370
answered Jan 3 at 9:57
Titian Cernicova-DragomirTitian Cernicova-Dragomir
73.4k35370
answered Jan 3 at 9:57
Titian Cernicova-DragomirTitian Cernicova-Dragomir
73.4k35370
73.4k35370
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019830%2fissue-with-typing-an-object-typescript-error-no-index-signature%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
