Found non-null assertions JS-0339
Anti-pattern
7 months ago
—
7 months old
Forbidden non-null assertion
22 })
23
24 const pages = feedQuery.data?.pages
25 const suggestions = suggestionsQuery.data!.suggestions26 // observe ref element, if its entered the viewport, fetch next page
27 const handleObserver = useCallback(
28 (entries: any) => {Forbidden non-null assertion
9
10const DisplayPosts = ({ pages }: { pages: Pages }) => {
11 return (
12 <>{pages!.map(({ feed }) => feed.map((post: typeof feed[number]) => <PostCard key={post.id} post={post} />))}</>13 )
14}
15Forbidden non-null assertion
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} />
60 </Group>
61 ))Forbidden non-null assertion
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} />Forbidden non-null assertion
24
25 utils.setQueryData(['post.get-post', { postId }], {
26 post: {
27 ...snapshot!.post,28 comments: [res.commentAdded, ...snapshot!.post.comments],
29 },
30 })
Description
Using non-null assertions cancels out the benefits of strict null-checking, and introduces the possibility of runtime errors. Avoid non-null assertions unless absolutely necessary. If you still need to use one, write a skipcq comment to explain why it is safe.
Ideally, you want to have a validation function that confirms a value isn't null, with a return type like this:
type AccentedColor = `${Color}-${Accent}`
function isColorValid(name: string): name is AccentedColor {
// ...
}
Bad Practice
// a user named "injuly" may not exist in the DB
const injuly: User | null = db.getUserByName("injuly");
// Using the non-null assertion operator will bypass null-checking
const pfp = injuly!.profilePicture;
Recommended
const injuly: User | null = db.getUserByName("injuly");
const pfp = injuly?.profilePicture; // pfp: Image | undefined
// OR:
const pfp_ = injuly ? injuly.pfp : defaultPfp; // pfp: Image
Alternatively:
function isUserValid(userObj: User | null | undefined ): userObj is User {
return Boolean(userObj) && validate(userObj);
}
const injuly = db.getUserByName("injuly")
if (isUserValid(injuly)) {
const pfp = injuly.profilePicture;
// ...
}