strictNullChecks

strictNullChecks là compiler option làm nghiêm ngặt check null và undefined.

• Mặc định: true nếu strict được bật, ngược lại là false
• Phiên bản thêm vào: 2.0
• TypeScript khuyến nghị nên bật

Nguy cơ của việc có thể gán null và undefined

Trong TypeScript khi strictNullChecks là false, việc gán null và undefined không được check. Có thể gán null và undefined vào biến non-null type hoặc non-undefined type.

Khi strictNullChecks là false
ts
const date: Date = null; // OK
const error: Error = undefined; // OK

Khi strictNullChecks là false
ts
const date: Date = null; // OK
const error: Error = undefined; // OK

null và undefined không có property. Do đó khi chạy JavaScript sẽ báo lỗi:

ts
date.getDay();
Cannot read properties of null (reading 'getDay')

ts
date.getDay();
Cannot read properties of null (reading 'getDay')

Khi strictNullChecks là true, việc gán null vào non-null type, gán undefined vào non-undefined type sẽ báo compile error:

Khi strictNullChecks là true
ts
const date: Date = null;
Type 'null' is not assignable to type 'Date'.2322Type 'null' is not assignable to type 'Date'.
const error: Error = undefined;
Type 'undefined' is not assignable to type 'Error'.2322Type 'undefined' is not assignable to type 'Error'.

Khi strictNullChecks là true
ts
const date: Date = null;
Type 'null' is not assignable to type 'Date'.2322Type 'null' is not assignable to type 'Date'.
const error: Error = undefined;
Type 'undefined' is not assignable to type 'Error'.2322Type 'undefined' is not assignable to type 'Error'.

Ảnh hưởng đến return value type của function

Cấu hình strictNullChecks có thể thay đổi return value type của function. Return value type của method find của array là type của phần tử hoặc undefined. Tuy nhiên, khi strictNullChecks là false, compiler sẽ không xem xét khả năng return value là undefined. Tương tự với function có thể trả về null như getElementById.

Khi strictNullChecks là false
ts
const result = [1, 2, 3].find((x) => x == 1);
        
const result: 1
const element = document.getElementById("main");
        
const element: HTMLElement

Khi strictNullChecks là false
ts
const result = [1, 2, 3].find((x) => x == 1);
        
const result: 1
const element = document.getElementById("main");
        
const element: HTMLElement

Khi strictNullChecks là true, compiler sẽ xem xét khả năng return value là undefined hoặc null. Do đó find sẽ là union type của type phần tử và undefined, getElementById sẽ là HTMLElement | null:

Khi strictNullChecks là true
ts
const result = [1, 2, 3].find((x) => x == 1);
        
const result: 1 | undefined
const element = document.getElementById("main");
        
const element: HTMLElement | null

Khi strictNullChecks là true
ts
const result = [1, 2, 3].find((x) => x == 1);
        
const result: 1 | undefined
const element = document.getElementById("main");
        
const element: HTMLElement | null

Hiệu ứng của cấu hình này cũng ảnh hưởng đến user-defined type guard function. Ví dụ, ngay cả khi type annotate return value của function là string | undefined, nếu strictNullChecks là false thì sẽ trở thành string type:

Khi strictNullChecks là false
ts
// User-defined type guard function
function getStringOrUndefined(): string | undefined {
  return undefined;
}
const value = getStringOrUndefined();
       
const value: string

Khi strictNullChecks là false
ts
// User-defined type guard function
function getStringOrUndefined(): string | undefined {
  return undefined;
}
const value = getStringOrUndefined();
       
const value: string

Nên bật strictNullChecks

Việc có thể gán null hoặc undefined vào biến không mong đợi chúng là nguy hiểm. Ngoài ra, việc không thấy được khả năng return value của function là null hoặc undefined cũng là nguyên nhân gây bug không mong muốn. Khuyến nghị nên set strictNullChecks thành true.

Chia sẻ kiến thức

😱TypeScript mặc định không check việc gán null và undefined (có thể gán vào bất kỳ type nào)
✅Đặt compiler option strictNullChecks thành true để check việc gán null và undefined
👍Nên bật strictNullChecks

Từ 『Survival TypeScript』

Đăng nội dung này lên X

Thông tin liên quan

📄️ strict

Bật hàng loạt các option thuộc nhóm strict

📄️ Kiểu null

null trong JavaScript là giá trị biểu thị không có giá trị.

📄️ Kiểu undefined

undefined trong JavaScript là giá trị primitive biểu thị chưa được định nghĩa. Xuất hiện khi biến chưa được gán giá trị, hàm không có return value, truy cập property không tồn tại trong object, truy cập index không tồn tại trong array, v.v.