Tìm kiếm trang web

reactjs - Lỗi TypeScript: Thuộc tính 'X' không tồn tại trên kiểu 'Window'

Tôi đã thêm TS vào ứng dụng React/Redux của mình.

Tôi sử dụng đối tượng window trong ứng dụng của mình như sau:

componentDidMount() {
  let FB = window.FB;
}

TS ném ra một lỗi:

Lỗi TypeScript: Thuộc tính 'FB' không tồn tại trên kiểu 'Window'. TS2339

Tôi muốn sửa lỗi.

1 (không hoạt động)

// Why doesn't this work? I have defined a type locally

type Window = {
  FB: any
}

componentDidMount() {
  let FB = window.FB;
}

// TypeScript error: Property 'FB' does not exist on type 'Window'. TS2339

2 (sửa lỗi)

Tôi đã tìm thấy câu trả lời ở đây https://stackoverflow.com/a/56402425/1114926

declare const window: any;

componentDidMount() {
  let FB = window.FB;
}
// No errors, works well

Tại sao phiên bản đầu tiên không hoạt động, nhưng phiên bản thứ hai thì có, mặc dù tôi không chỉ định thuộc tính FB chút nào?

Câu trả lời #1

Tại sao declare const window: any; lại hoạt động?

Bởi vì bạn khai báo một biến cục bộ với kiểu any. Việc có một thứ có kiểu any về cơ bản sẽ tắt kiểm tra kiểu cho window nên bạn có thể làm bất cứ điều gì với nó. Tôi thực sự không khuyến nghị giải pháp này, đây thực sự là một giải pháp tồi.

Tại sao type Window={ FB: any } không hoạt động? Bạn định nghĩa một kiểu Window. Kiểu này nếu được định nghĩa trong một module thì không liên quan gì đến kiểu của đối tượng window toàn cục, nó chỉ là một kiểu được đặt tên là Window bên trong module của bạn.

Giải pháp tốt Để mở rộng window bạn phải mở rộng giao diện toàn cục Window. Bạn có thể làm điều này như sau:

declare global {
    interface Window {
        FB:any;
    }
}

let FB = window.FB; // ok now

Lưu ý rằng tiện ích mở rộng này sẽ có sẵn trong toàn bộ dự án của bạn, không chỉ trong tệp mà bạn định nghĩa nó. Ngoài ra, nếu FB có các định nghĩa, bạn có thể cân nhắc gõ nó tốt hơn một chút (FB: typeof import('FBOrWhateverModuleNameThisHas'))

Câu trả lời #2

Có một vài cách để giải quyết vấn đề này.

Một vài ví dụ:

1-) Bó bột

(window as any).X

2-) Đặt mã sau vào một tệp có tên react-app-env.d.ts

interface Window {
  X?: {
    Y?: {
      .......
    }
  }
}

Câu trả lời #3

bạn có thể giải quyết vấn đề một cách dễ dàng mà không cần bất kỳ tuyên bố nào

window["FB"]

CẬP NHẬT
vì đây là một giải pháp tạm thời mà không có bất kỳ cấu hình biên dịch nào để đảm bảo chương trình của bạn tương thích với typescript, có thể bạn chỉ cần một xác thực kiểu.

if(window["FB"]) {
  // do some FB logic
}

Câu trả lời #4

Giải pháp cho vấn đề "Thuộc tính không tồn tại trên kiểu Window trong TypeScript":

BƯỚC 1: Trong thư mục src của bạn, tạo một thư mục types chứa tệp index.d.ts sau: src/types/index.d.ts

export {};

declare global {
  interface Window {
    example: string; // whatever type you want to give. (any,number,float etc)
  }
}

BƯỚC: 2 thêm đường dẫn đến thư mục types của bạn vào tệp tsconfig.json.

tsconfig.json

{
  "compilerOptions": {
    // ... rest
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

BƯỚC: 3 Bây giờ sử dụng nó, bất cứ nơi nào bạn muốn làm.

window.example = 'hello';

console.log(window.example);

Câu trả lời số 5

Tôi sử dụng cái này mà không khai báo toàn cục

declare const window: Window &
   typeof globalThis & {
     FB: any
   }

Câu trả lời số 6

Tôi đã gặp vấn đề này trong mã Angular của mình. Giải pháp dưới đây đã giúp tôi giải quyết vấn đề.

Tôi đã giải quyết lỗi này bằng cách tạo một thư mục tên là types bên trong src và bên trong thư mục đó tạo một tệp index.d.ts.

tệp index.d.ts sẽ có mã dưới đây.

export {};
declare global {
  interface Window {
    chrome: any;  // this will be your variable name
  }
}

Nếu lỗi vẫn tiếp diễn, hãy thử thêm đường dẫn tới thư mục types của bạn vào tệp tsconfig.json.

{
  "compilerOptions": {
    // ... rest
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

Câu trả lời số 7

nó nên được bỏ qua bằng cách tạo tệp global.d.ts trong thư mục gốc của dự án với nội dung này:

export { }
declare global {
    interface Window {
        [key: string]: any 
    }
}

nó bỏ qua tất cả các biến của đối tượng window

Bài viết liên quan