Found template literal expression having a non-string type JS-0378
Anti-pattern
Minor
a year ago
—
a year old
Invalid type "string | null" of template literal expression
50 <Avatar size='lg' radius='xl' src={s.avatar ? s.avatar : ''} />
51 </Anchor>
52 </Link>
53 <Link href={`/${s.name}`} passHref>54 <Anchor mt='1rem' underline={false} color='dark'>
55 {s.name}
56 </Anchor>Invalid type "string | null" of template literal expression
45 border: '1px solid lightgray',
46 borderRadius: '5px',
47 }}>
48 <Link href={`/${s.name}`} passHref>49 <Anchor>
50 <Avatar size='lg' radius='xl' src={s.avatar ? s.avatar : ''} />
51 </Anchor>Invalid type "string | null | undefined" of template literal expression
20 async onSuccess() {
21 if (type === 'profile') {
22 await utils.invalidateQueries('user.get-profile')
23 router.push(`/${name}`, undefined, { shallow: true })24 } else if (type === 'feed') {
25 await utils.invalidateQueries('feed.get-feed')
26 }Invalid type "string | null | undefined" of template literal expression
11const AvatarName = ({ avatar, name, undername }: Props) => {
12 return (
13 <Box sx={{ display: 'flex', alignItems: 'center' }}>
14 <Link href={`/${name}`} passHref>15 <Anchor>
16 {avatar ? (
17 <Avatar radius='xl' src={avatar === '0' ? null : avatar} alt={name!} />Invalid type "string | null | undefined" of template literal expression
45 </Box>
46 {mobileQuery && (
47 <Box>
48 <ActionIcon onClick={() => router.push(`/${name}`, undefined, { shallow: true })}> 49 <MdClose size={30} />
50 </ActionIcon>
51 </Box>
Description
Using only string values in placeholders is recommended as otherwise, the value may be wrongly displayed; for example, if an object value is directly included in a string, it will be shown as [object Object]. Using only string values can also ensure that null or undefined values are not directly displayed.
A placeholder is represented by ${}, with anything within the curly brackets treated as an executable JavaScript expression and anything outside the brackets treated as a string.
To avoid unwanted implicit string coercions like [object Object], we can explicitly add a toString() call to the end of the expression, as shown below:
console.log(`${o.toString()} <- is ok`)
// [object Object] <- is ok
Bad Practice
const arg1 = [1, 2];
const msg1 = `arg1 = ${arg1}`;
const arg2 = { name: 'DeepSource' };
const msg2 = `arg2 = ${arg2 || null}`;
Recommended
const arg = 'DeepSource';
const msg1 = `arg = ${arg}`;
const msg2 = `arg = ${arg || 'default'}`;
const stringWithKindProp: string & { _kind?: 'MyString' } = 'DeepSource';
const msg3 = `stringWithKindProp = ${stringWithKindProp}`;