Currently, I am in the process of familiarizing myself with Angular 2 and typescript. Although things have been going smoothly so far, I have hit a roadblock while attempting to implement a Facebook login message. In my search for a solution, I stumbled upon a project that showcases how this can be achieved on github here. The key component in their demonstration is:
fbconnector.ts
export class FBConnector {
constructor(appID: string) {
if (!window.fbAsyncInit) {
console.log('define');
window.fbAsyncInit = function() {
FB.init({
appId: appID,
xfbml: true,
version: 'v2.5'
});
};
}
}
initFB() {
var js: any,
id = 'facebook-jssdk',
ref = document.getElementsByTagName('script')[0];
if (document.getElementById(id)) {
return;
}
js = document.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/sdk.js";
ref.parentNode.insertBefore(js, ref);
}
}
During the compilation of my typescript, I encountered two errors:
error TS2339: Property fbAsyncInit does not exist on type 'Window'.
error TS2304: Cannot find name 'FB'.
Upon reflection, it became apparent that these mistakes were due to missing variable definitions required by typescript. As someone new to typescript, I am uncertain about the correct approach to remedy this situation. Should I create a custom typings file or resort to workarounds like adding "any" in front of window? Any guidance would be greatly appreciated!
Thank you in advance!