Làm cách nào để loại bỏ lỗi lỗi TS2533: Đối tượng có thể là 'null' hoặc 'không xác định'.

Tôi có một type:

type tSelectProtected = {
  handleSelector?: string,
  data?: tSelectDataItem[],

  wrapperEle?: HTMLElement,
  inputEle?: HTMLElement,
  listEle?: HTMLElement,
  resultEle?: HTMLElement,

  maxVisibleListItems?: number
}

Tôi khai báo một biến mô-đun toàn cầu:

var $protected : tSelectProtected = {};

Tôi đang gán giá trị phù hợp trong function1()phạm vi:

$protected.listEle = document.createElement('DIV');

Sau này trong function2()phạm vi, tôi đang gọi:

$protected.listEle.classList.add('visible');

Tôi đang gặp lỗi TypeScript:

error TS2533: Object is possibly 'null' or 'undefined'

Tôi biết rằng tôi có thể kiểm tra rõ ràng bằng cách sử dụng if ($protected.listEle) {$protected.listEle}để làm dịu trình biên dịch nhưng điều này dường như rất khó xử đối với hầu hết các trường hợp không tầm thường.

Làm thế nào tình huống này có thể hoặc nên được xử lý mà không vô hiệu hóa kiểm tra trình biên dịch TS?

Tính năng này được gọi là "kiểm tra null nghiêm ngặt", để tắt nó để đảm bảo rằng --strictNullCheckscờ trình biên dịch không được đặt.

Tuy nhiên, sự tồn tại của nullđã được mô tả là Sai lầm tỷ đô , vì vậy thật thú vị khi thấy các ngôn ngữ như TypeScript giới thiệu bản sửa lỗi. Tôi thực sự khuyên bạn nên giữ nó bật.

Một cách để khắc phục điều này là đảm bảo rằng các giá trị không bao giờ nullhoặc undefined, ví dụ bằng cách khởi tạo chúng trước:

interface SelectProtected {
    readonly wrapperElement: HTMLDivElement;
    readonly inputElement: HTMLInputElement;
}

const selectProtected: SelectProtected = {
    wrapperElement: document.createElement("div"),
    inputElement: document.createElement("input")
};

Tuy nhiên, hãy xem câu trả lời của Ryan Cavanaugh cho một lựa chọn thay thế!

Nếu bạn biết từ bên ngoài có nghĩa là một biểu thức không nullhoặc undefined, bạn có thể sử dụng toán tử xác nhận không null !để ép buộc các kiểu đó:

// Error, some.expr may be null or undefined
let x = some.expr.thing;
// OK
let y = some.expr!.thing;

Tôi đã sử dụng:

if (object !== undefined) {
    // continue - error suppressed when used in this way.
}

Ngoài ra, bạn có thể sử dụng kiểu ép buộc:

const objectX = object as string

Mặc dù, trước khi chọn một trong các cách giải quyết trên, vui lòng xem xét kiến ​​trúc bạn đang hướng tới và nó có tác động đến bức tranh lớn hơn.

Không phải là câu trả lời trực tiếp cho câu hỏi của OP, nhưng trong trường hợp của tôi, tôi đã có thiết lập sau -

Bản đánh máy - v3.6.2
tslint -v5.20.0

Và sử dụng mã sau đây

const refToElement = useRef(null);

if (refToElement && refToElement.current) {
     refToElement.current.focus(); // Object is possibly 'null' (for refToElement.current)
}

Tôi tiếp tục bằng cách triệt tiêu trình biên dịch cho dòng đó. Lưu ý rằng vì đó là lỗi trình biên dịch chứ không phải lỗi kẻ nói dối, // tslint:disable-next-lineđã không hoạt động. Ngoài ra, theo tài liệu, điều này hiếm khi được sử dụng, chỉ khi cần thiết -

const refToElement = useRef(null);

if (refToElement && refToElement.current) {
     // @ts-ignore: Object is possibly 'null'.
     refToElement.current.focus(); 
}

CẬP NHẬT :

Với Bản mô tả 3.7, bạn có thể sử dụng chuỗi tùy chọn , để giải quyết vấn đề trên như -

refToElement?.current?.focus();

Giải pháp này hiệu quả với tôi:

• đi tới tsconfig.json và thêm "rictNullChecks": false

Nếu bạn biết loại sẽ không bao giờ nullhoặc undefined, bạn nên khai báo nó như foo: Barkhông có ?. Khai báo một loại với ? Barcú pháp có nghĩa là nó có khả năng có thể không được xác định, đó là điều bạn cần kiểm tra.

Nói cách khác, trình biên dịch đang thực hiện chính xác những gì bạn yêu cầu. Nếu bạn muốn nó là tùy chọn, bạn sẽ cần kiểm tra sau.

Đây không phải là vấn đề của OP, nhưng tôi đã nhận được Object is possibly 'null'thông báo tương tự khi tôi đã khai báo một tham số là loại null một cách tình cờ:

something: null;

thay vì gán cho nó giá trị null:

something: string = null;

Như một tùy chọn, bạn có thể sử dụng kiểu đúc. Nếu bạn có lỗi này từ bản in, điều đó có nghĩa là một số biến có loại hoặc không được xác định:

let a: string[] | undefined;

let b: number = a.length; // [ts] Object is possibly 'undefined'
let c: number = (a as string[]).length; // ok

Hãy chắc chắn rằng athực sự tồn tại trong mã của bạn.

Kể từ TypeScript 3.7 ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html ), giờ đây bạn có thể sử dụng ?.toán tử để không xác định khi truy cập một thuộc tính (hoặc gọi một phương thức ) trên một đối tượng null hoặc không xác định:

inputEl?.current?.focus(); // skips the call when inputEl or inputEl.current is null or undefined

Mẹo cho RxJS

Tôi sẽ thường có các biến thành viên loại Observable<string>và tôi sẽ không khởi tạo nó cho đến khi ngOnInit(sử dụng Angular). Trình biên dịch sau đó giả định rằng nó chưa được khởi tạo bởi vì nó không 'được gán chắc chắn trong hàm tạo' - và trình biên dịch sẽ không bao giờ hiểungOnInit .

Bạn có thể sử dụng !toán tử xác nhận trên định nghĩa để tránh lỗi:

favoriteColor!: Observable<string>;

Một quan sát chưa được khởi tạo có thể gây ra tất cả các loại đau thời gian chạy với các lỗi như 'bạn phải cung cấp một luồng nhưng bạn đã cung cấp null'. Các !là tốt nếu bạn chắc chắn biết nó sẽ được đặt trong một cái gì đó nhưngOnInit , nhưng có thể có trường hợp giá trị được đặt trong một số cách khác ít xác định.

Vì vậy, một sự thay thế đôi khi tôi sẽ sử dụng là:

public loaded$: Observable<boolean> = uninitialized('loaded');

Nơi uninitializedđược định nghĩa toàn cầu ở đâu đó như:

export const uninitialized = (name: string) => throwError(name + ' not initialized');

Sau đó, nếu bạn từng sử dụng luồng này mà không được xác định, nó sẽ ngay lập tức xuất hiện lỗi thời gian chạy.

Trong ReactJS, tôi kiểm tra hàm tạo nếu các biến là null, nếu chúng là tôi coi nó như một ngoại lệ và quản lý ngoại lệ một cách thích hợp. Nếu các biến không phải là null, mã sẽ tiếp tục và trình biên dịch sẽ không phàn nàn nữa sau thời điểm đó:

private variable1: any;
private variable2: any;

constructor(props: IProps) {
    super(props);

    // i.e. here I am trying to access an HTML element
    // which might be null if there is a typo in the name
    this.variable1 = document.querySelector('element1');
    this.variable2 = document.querySelector('element2');

    // check if objects are null
    if(!this.variable1 || !this.variable2) {
        // Manage the 'exception', show the user a message, etc.
    } else {
        // Interpreter should not complain from this point on
        // in any part of the file
        this.variable1.disabled = true; // i.e. this line should not show the error
    }

Tôi đã chạy đến đây với React khi cài đặt trạng thái và sử dụng map.

Trong trường hợp này, tôi đã thực hiện một cuộc gọi tìm nạp API và giá trị của phản hồi không được biết, nhưng nên có giá trị "Trả lời". Tôi đã sử dụng một loại tùy chỉnh cho điều này, nhưng vì giá trị có thể null, dù sao tôi cũng gặp lỗi TS. Cho phép loại nullkhông được sửa chữa nó; Ngoài ra, bạn có thể sử dụng một default parameter value, nhưng điều này là lộn xộn cho trường hợp của tôi.

Tôi đã khắc phục nó bằng cách cung cấp một giá trị mặc định trong trường hợp phản hồi trống bằng cách chỉ sử dụng toán tử ternary:

this.setState({ record: (response.Answer) ? response.Answer : [{ default: 'default' }] });

Trong bản thảo, bạn có thể làm như sau để loại bỏ error:

let subString?: string;

subString > !null; - Lưu ý dấu chấm than được thêm vào trước null.

Hãy thử gọi đối tượng như thế này:

(<any>Object).dosomething

Lỗi này đã xảy ra bởi vì bạn đã khai báo chúng là tùy chọn sử dụng ?. Bây giờ Typecript kiểm tra nghiêm ngặt và nó sẽ không cho phép làm bất cứ điều gì có thể undefined. Do đó, bạn có thể sử dụng (<any>yourObject)ở đây.