Detected using a non-null assertion after an optional chain expression JS-0338
Anti-pattern
7 months ago
—
7 months old
Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong
53 </Box>
54 </Popover.Target>
55 <Popover.Dropdown p={0} sx={{ height: '222px', overflowY: 'auto' }}>
56 {searchResult?.searchResult?.length! > 0 ? (57 searchResult?.searchResult?.map((user) => (
58 <Group p={'0.5rem'} key={user!.id} sx={{ borderBottom: '1px solid lightgray' }}>
59 <AvatarName avatar={user?.avatar} name={user?.name} />
Description
Optional chain expressions are designed to return undefined if the optional property is nullish. Using non-null assertions after an optional chain expression is wrong, and introduces a serious type safety hole into your code.
Bad Practice
foo?.bar!;
foo?.bar!.baz;
foo?.bar()!;
foo?.bar!();
foo?.bar!().baz;
Recommended
foo?.bar;
(foo?.bar).baz;
foo?.bar();
foo?.bar();
foo?.bar().baz;