Found non-null assertions JS-0339
Anti-pattern
Major
11 days ago
—
11 days old
Forbidden non-null assertion
185
186 const handleFileSelect = (ext: string, content: string) => {
187 setNewTemplate(prevState => ({
188 ...prevState!,189 ext,
190 file: content,
191 }));Forbidden non-null assertion
178
179 const handleInputChange = (name: string, value: string) => {
180 setNewTemplate(prevState => ({
181 ...prevState!,182 [name]: value,
183 }));
184 };Forbidden non-null assertion
146
147 const handleSubmitEditTemplate = async () => {
148 try {
149 await updateTemplate(newTemplate!);150 toast.success(t('msg.templateUpdatedOk'));
151 } catch (error) {
152 setError('Error updating template');Forbidden non-null assertion
128
129 const handleSubmitAddTemplate = async () => {
130 try {
131 await createTemplate(newTemplate!);132 toast.success(t('msg.templateCreatedOk'));
133 } catch (error) {
134 setError('Error creating company');Forbidden non-null assertion
78
79 const handleEditTemplateButton = (template: TableData) => {
80 setNewTemplate(prevState => ({
81 ...prevState!, 82 _id: template._id,
83 name: template.name,
84 }));
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;
// ...
}