lukewarlow / user-agent-data-types

TypeScript definitions for navigator.userAgentData

User Agent Data Types

Type definition for navigator.userAgentData

Install

$ npm i -D user-agent-data-types

Usage

Make types visible in specific files

Add a TypesScript triple-slash directive as follows in any code-containing '.ts' file you want these types to be available in:

// Add data types to window.navigator for use in this file. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types- for more info.
/// <reference types="user-agent-data-types" />

console.log(window.navigator.userAgentData) // no type error!

Make types visible globally in all source files within a project

Create a .d.ts file anywhere in your project so that it is visible to TypeScript according to your tsconfig.json settings. For example, it could be at src/global.d.ts or src/user-agent-data-types.d.ts.

Add a TypesScript triple-slash directive as follows:

// Add data types to window.navigator ambiently for implicit use in the entire project. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types- for more info.
/// <reference types="user-agent-data-types" />

This exposes the types ambiently so they are available without any import or require statements. TypeScript will simply know about them everywhere.

Important: do not add any import or export statements to this file, or it will stop working ambiently. Doing that changes it in TypeScript's view from a "script" to a "module", and the rules about ambient types change in that case.

License

This project is licensed under the MIT License.

user-agent-data-types's Issues

Recommended change to the usage docs

Your npm package docs say to do this in tsconfig.json:

{
  "compilerOptions": {
    "types": [
        "./node_modules/user-agent-data-types"
    ]
  }
}

That is against best practice and a bit unfriendly, because as soon the types or typeRoots keys are present in tsconfig.json, that excludes all other type usage in the entire project.

The friendly way to expose ambient types from another project involves:

1. Wrap your index.d.ts content in a declare global { } block. // this isn't necessary, actually
2. Have your consumers create a file with a .d.ts extension in their own project, inside of their source code covered by their tsconfig.json, for example src/user-agent-data-types.d.ts:

   /// <reference types="user-agent-data-types" />

Boom. Ambient types available in consumer projects, no excluding all other types from their entire type resolution pool.