typescript ambient declarations, global.d.ts, lib and typeRoot.md

typescript ambient declarations, global.d.ts, lib and typeRoot.md

When using typescript, you may have global ambient declarations you need to add.

For example, my HTML defines several variables prior to my main .js file being loaded and executed. The .js file, packed using webscript and written in typescript, needs access to those variables.

Accesing the HTML variables is much like accessing “window” inside of a .ts file. The typescript compiler declares a window object for us and makes it available without import in our .ts files.

We clearly need something like that.

google searching did not yield alot of insight, but the key thoughts you need to know are:

  • typescript reads all your files in your compiler path e.g. src then compiles the file you want to compile and output.
  • typescript has a search path algorithm that is used when importing modules. This search path is not relevant to solving the global ambient problem.

Global ambient can be declared in a global.d.ts file:

declare const myvar: boolean

The real question is whether you should put them in your compile path, such as src/global.d.ts or in a place such as your “typeRoot” setting in tsconfig.json.

The short answer is that you can put global.d.ts into your src/ directory (or whatever you have set as your compiler path to find source files). The compiler will automatically pickup global.d.ts when it sweeps through and “loads” all of your source files. If you were to create a “global.ts” file, it would be picked up and superscede the global.d.ts so use a filename that is not being used already. You could includes global.d.ts anywhere in your paths so you could add this to a variety of places in your source tree it does not have to be at the root. Note that any files, even index.d.ts, inside a sub-directory, will be picked up so you could add “globals” within a sub-directory. If you define a module “src/foo/foo.ts” and then add “src/foo/index.d.ts” the compiler picks up foo.ts and index.d.ts. However, if you add a “foo/index.ts” and keep “foo/index.d.ts” obviousuly, “foo/index.ts” will take precedence. Generally, just stick to global.d.ts or interfaces.d.ts or something unique and put it in smart spot to be picked up.

Why not put them under your typeRoot folder? For example, typeRoot may be set to “node_modules/@typings” and “./typings”. These files are only searched when importing modules. They are not in the compiler path by default. If you added “./typings” to your “source” path then they would be found because they are in the compile path. You use “./typings” to add types to npm modules, for example to add types to a purely javascript npm module.

You could use the tsconfig “lib” setting to include your global.d.ts file in the compilation. That’s a valid use for it. However, once you set “lib” in tsconfig.json, you must include all libs you need e.g. esnext, dom. Once lib is present, it is the full specification of the “lib”—your entries do not add to the lib path. It would have been nice to have a “moreLib” setting :-). So its more work to use lib vs global.d.ts.

Comments

Post a Comment

Popular posts from this blog

quick note on scala.js, react hooks, monix, auth

quick note on scala.js, react hooks, monix, auth Reactjs hooks finally came out of preview in a recent version of React. scalajs-reaction has had support for hooks since they were in preview. React hooks seem like the hot new thing but for me the question is, do hooks help improve your code by improving maintainability, time to market, TCO, etc.? Let’s take a look using authentication as an example and employ monix , a reactive observable framework that also builds on cats . We will assume we are building a SPA. Does it improve your code and make your application & development experience better? Auth Auth processing can be complex. Many react auth examples you find in blogs like to show how to use “react-routing” and “auth” as a switch that determines which routes are protected or unprotected. Protected routes show application specific data. Unprotected routes show login content . Based on storing a “User” object in the browser session/local storage, th...
Read more

attributes with react and typescript.md

If you use typescript with react you may wonder what the right signature is for your “properties” interface. Obviously, your component will have few to many specific properties that reflect your domain. However, you may wish to also provide for the ability to add other attributes, such as those valid for a div property. In other words, you want to extend your props interface with that of the properties from a div element. How do you do that? There are really two issues: How do you extend your props interfaces How do you filter the props once you receive them to just those that apply. Extend Your Prop Interface or Use Sum Types It’s not uncommon to see interface Props { className ? : string yourProp ? : number } with the idea of using it in class MyComponent extends React.Component<Props, any> somewhere. If your component will have an outer div, you may also pass in a react element so that its configurable. But let’s say your outer element is a div and you wan...
Read more

zio environment and modules pattern: zio, scala.js, react, query management

zio environment and modules pattern: zio, scala.js, react, query management This blog covers a zio-based fetch design for scala.js, react web applications. It heavily uses the zio “environment” feature to help motivate a point of view on the modules pattern in effect systems. At the end, I summarize some thoughts on ergonomics and complexity. This blog assumes a basic knowledge of zio and react. scala.js is just like scala so you mostly already know scala.js. This blog is a follow-on to previous blogs: https://appddeevvmeanderings.blogspot.com/2019/10/scalajs-react-fetcher-hook_48.html and https://appddeevvmeanderings.blogspot.com/2019/11/scalajs-and-react-suspense.html . I have been keeping an eye on and culling ideas from typscript/javascript fetching libraries that address query management concerns. The formulation below incorporates some of those concerns but does not try to comprehensively duplicate well established javascript libraries. I only care about ...
Read more