muerwre/muerwre.github.io
1
0
Fork 0
mirror of https://github.com/muerwre/muerwre.github.io.git synced 2025-04-25 02:46:39 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions
muerwre.github.io/api/_content/query/FLiVxDo2qK.json
muerwre 7c41f536b6 commit 2e92e2e809 
Author: Fedor Katurov <gotham48@gmail.com>
Date:   Fri Nov 11 13:59:06 2022 +0600

    fixed writings on headers
2022-11-11 08:00:57 +00:00

1 line
No EOL
21 KiB
JSON
Raw Blame History

{"_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-624582"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03ccf8"},"children":[{"type":"text","value":"global"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-624582"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-511826"},"children":[{"type":"text","value":"Window"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af55e1"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-dae8cc"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-624582"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5fd8ba"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"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-de8d5e"},"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-dae8cc"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-624582"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-511826"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de8d5e"},"children":[{"type":"text","value":"// nothing :-)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"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-de8d5e"},"children":[{"type":"text","value":"// fancyThings.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dae8cc"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-03ccf8"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-dae8cc"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-188c17"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"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-624582"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-624582"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-188c17"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-624582"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-511826"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af55e1"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-dae8cc"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-624582"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5fd8ba"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-705095"},"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-dae8cc"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-03ccf8"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-dae8cc"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-188c17"},"children":[{"type":"text","value":"\"./sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dae8cc"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-188c17"},"children":[{"type":"text","value":"\"./fancyThings\""}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"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-624582"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc951"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae8cc"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dae8cc"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af55e1"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-03ccf8"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af55e1"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-705095"},"children":[{"type":"text","value":"(); "}]},{"type":"element","tag":"span","props":{"class":"ct-de8d5e"},"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-0fc951{color:#79C0FF}.ct-188c17{color:#A5D6FF}.ct-de8d5e{color:#8B949E}.ct-5fd8ba{color:#79C0FF}.ct-dae8cc{color:#FF7B72}.ct-af55e1{color:#D2A8FF}.ct-511826{color:#FFA657}.ct-03ccf8{color:#C9D1D9}.ct-705095{color:#C9D1D9}.ct-624582{color:#FF7B72}.light .ct-624582{color:#073642}.light .ct-705095{color:#657B83}.light .ct-03ccf8{color:#268BD2}.light .ct-511826{color:#268BD2}.light .ct-af55e1{color:#268BD2}.light .ct-dae8cc{color:#859900}.light .ct-5fd8ba{color:#859900}.light .ct-de8d5e{color:#93A1A1}.light .ct-188c17{color:#2AA198}.light .ct-0fc951{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"}
Reference in a new issue View git blame Copy permalink