Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'WidthSize'.
No index signature with a parameter of type 'string' was found on type 'WidthSize'.
// Width ( 24px default 는 제외 )
// 12, 14, 16, 18, 32 px
type WidthType = 'xxsmall' | 'xsmall' | 'small' | 'middle' | 'large';
type WidthSize = {
[K in WidthType]: string;
};
const Width: WidthSize = {
xxsmall: '12px',
xsmall: '14px',
small: '16px',
middle: '18px',
large: '32px',
};
// Height ( 24px default 는 제외 )
type HeightType = 'xxsmall' | 'xsmall' | 'small' | 'middle' | 'large';
type HeightSize = {
[K in HeightType]: string;
};
const Height: HeightSize = {
xxsmall: '12px',
xsmall: '14px',
small: '16px',
middle: '18px',
large: '32px',
};
const IconBlockWrapper = styled.div<{
src: string;
width?: string;
height?: string;
}>`
display: inline-flex;
justify-content: center;
align-items: center;
width: ${(props) => (props.width ? Width[props.width] : '24px')};
height: ${(props) => (props.height ? props.height : '24px')};
background: url(${(props) => props.src});
background-size: cover;
background-position: center;
background-repeat: no-repeat;
`;
I am trying to use
'xxsmall', 'xsmall' .....
as an 'Key' of 'Width' OBJ
But, since ( ex) 'xxsmall' ) type is 'string' ,
it is throwing Error
link : https://soopdop.github.io/2020/12/01/index-signatures-in-typescript/
Because it is 'Typescript'
To be more exact ,
The reason behind above error is ,
you are using 'string type' to place where 'string literal' is only allowed
const a = "Hello World"
let b = "Hello World"
const c : string = "Hello World"
1) 'b' 💗 String Type
decleard with 'let', which means any additional 'string' can be allocated to variable 'b'
2) 'c' : 'const' + ': string' 💗 string type
only 'string' type can be allocated to 'c'
compiler infer 'c' as more 'narrow' string type
that is,
'a' is "not" 💗 String Type
'a' is 💗 String literal Type
that is, only 'Hello World' can be allocated !
const obj = {
foo: "hello",
}
const propertyName = "foo"
console.log(obj[propertyName]) // ok!
console.log(obj["foo"]) // ok!
it works fine . WHY ?
'propertyName' & 'obj' is 'literal type'
for (const key of Object.keys(obj)) {
console.log(obj[key]) // compile error! key가 string타입이다.
}
Error !
WHY?
Because, Object.keys() return 'string[]' !
which means that 'key' in 'obj[key]' is 'string' type, not 'literal' type
type ObjType = {
[index: string]: string
foo: string
bar: string
}
const obj: ObjType = {
foo: "hello",
bar: "world",
}
const propertyName1 = "foo"
const propertyName2: string = "foo"
console.log(obj[propertyName1]) // ok
console.log(obj[propertyName2]) // ok
< Before >
type WidthSize = {
[K in WidthType ]: string;
};
< After >
type WidthSize = {
[K in WidthType as string]: string;
};
it means we are typing 'K' as 'string',
not 'string literal'
allow using 'string type key' to approach 'obj'