muerwre.github.io/docs/api/_content/query/FLiVxDo2qK.json

{"_path":"/typescript/add-global-variable-to-window","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Add Global Variable To Window","description":"Sometimes you want to add global variable to your window. That thing's called global module augmentation.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n  interface Window {\n    doFancyThings: () => void;\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"declare global {\n  interface Window {\n    doFancyThings: () => void;\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n  // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Sample.ts\n\nexport class Sample {\n  // nothing :-)\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n  interface Sample {\n    doFancyThings: () => void;\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n  interface Sample {\n    doFancyThings: () => void;\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n  interface Window {\n    doFancyThings: () => void;\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a5fe3f"},"children":[{"type":"text","value":"global"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2cbe6"},"children":[{"type":"text","value":"Window"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-90a4a9"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ddbf70"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n  // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bfa8aa"},"children":[{"type":"text","value":"// Sample.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2cbe6"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa8aa"},"children":[{"type":"text","value":"// nothing :-)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n  interface Sample {\n    doFancyThings: () => void;\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bfa8aa"},"children":[{"type":"text","value":"// fancyThings.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-a5fe3f"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c26505"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c26505"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2cbe6"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-90a4a9"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ddbf70"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-a5fe3f"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c26505"},"children":[{"type":"text","value":"\"./sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c26505"},"children":[{"type":"text","value":"\"./fancyThings\""}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6b0246"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a78cc7"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5906b8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-90a4a9"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a5fe3f"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-90a4a9"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-220f0f"},"children":[{"type":"text","value":"(); "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa8aa"},"children":[{"type":"text","value":"// ok"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a78cc7{color:#79C0FF}.ct-c26505{color:#A5D6FF}.ct-bfa8aa{color:#8B949E}.ct-ddbf70{color:#79C0FF}.ct-5906b8{color:#FF7B72}.ct-90a4a9{color:#D2A8FF}.ct-a2cbe6{color:#FFA657}.ct-a5fe3f{color:#C9D1D9}.ct-220f0f{color:#C9D1D9}.ct-6b0246{color:#FF7B72}.light .ct-6b0246{color:#073642}.light .ct-220f0f{color:#657B83}.light .ct-a5fe3f{color:#268BD2}.light .ct-a2cbe6{color:#268BD2}.light .ct-90a4a9{color:#268BD2}.light .ct-5906b8{color:#859900}.light .ct-ddbf70{color:#859900}.light .ct-bfa8aa{color:#93A1A1}.light .ct-c26505{color:#2AA198}.light .ct-a78cc7{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"augmenting-existing-interface","depth":2,"text":"Augmenting existing interface"}]}},"_type":"markdown","_id":"content:Typescript:Add global variable to window.md","_source":"content","_file":"Typescript/Add global variable to window.md","_extension":"md"}