我已经添加了TS到我的React/Redux应用程序。
我在我的应用程序中像这样使用窗口对象:
componentDidMount() {
let FB = window.FB;
}
TS抛出一个错误:
TypeScript错误:属性'FB'不存在类型'Window'。TS2339
我想修正这个错误。
1(不工作)
// 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(修复错误)
我在这里找到了答案https://stackoverflow.com/a/56402425/1114926
declare const window: any;
componentDidMount() {
let FB = window.FB;
}
// No errors, works well
为什么第一个版本不工作，但第二个，即使我没有指定FB属性在所有?
解决问题“属性不存在类型窗口在TypeScript”
步骤:1 .在src目录下，创建一个包含index.d.ts文件的types目录
export {};
declare global {
interface Window {
example: string; // whatever type you want to give. (any,number,float etc)
}
}
步骤:2添加路径到你的类型目录到你的tsconfig。json文件。
tsconfig.json
{
"compilerOptions": {
// ... rest
"typeRoots": ["./node_modules/@types", "./src/types"]
}
}
3 .现在，无论你想在哪里使用它。
window.example = 'hello';
console.log(window.example);
为什么要声明const window: any;工作吗?
因为您声明了一个类型为any的局部变量。任何类型的东西本质上关闭了窗口的类型检查所以你可以对它做任何事情。我真的不推荐这个解决方案，这是一个非常糟糕的解决方案。
为什么不键入窗口= {FB: any}工作?
定义一个Window类型。如果在模块中定义该类型，则与全局窗口对象的类型无关，它只是在模块中称为window的类型。
好的解决方案
要扩展window，必须扩展全局window接口。你可以这样做:
declare global {
interface Window {
FB:any;
}
}
let FB = window.FB; // ok now
请注意，此扩展名将在整个项目中可用，而不仅仅是在您定义它的文件中。另外，如果FB有定义，你可能会考虑输入它更好一点(FB: typeof import('FBOrWhateverModuleNameThisHas'))
