Skip to content

Commit

Permalink
Update README.md with best practice usage for type resolution
Browse files Browse the repository at this point in the history
Also bump version to push new readme to npm
  • Loading branch information
lukewarlow committed Mar 3, 2023
1 parent 7ad717b commit 92f2f44
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 11 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -181,3 +181,4 @@ $RECYCLE.BIN/
*.lnk

# End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux,visualstudiocode,jetbrains+all
.fleet/
36 changes: 26 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,37 @@ Type definition for [`Navigation API`](https://github.com/WICG/navigation-api)
```shell
$ npm i -D navigation-api-types
```
### Usage

### tsconfig.json
#### Make types visible in specific files

`navigation-api-types` needs to be added to `types` because it uses _ambient_ types that modify the global types.
Add a [TypesScript triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-)
as follows in any code-containing '.ts' file you want these types to be available in:

```json
{
"compilerOptions": {
"types": [
"./node_modules/navigation-api-types"
]
}
}
```typescript
// Add types for window.navigation for use in this file. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types- for more info.
/// <reference types="navigation-api-types" />

console.log(window.navigation) // 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/navigation-api-types.d.ts`.

Add a [TypesScript triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) as follows:

```typescript
// Add types for window.navigation 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="navigation-api-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](https://github.com/lukewarlow/navigation-api-types/blob/master/LICENSE).
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "navigation-api-types",
"version": "0.3.0",
"version": "0.3.1",
"description": "Type definition for the Navigation API",
"keywords": [
"navigation-api",
Expand Down

0 comments on commit 92f2f44

Please sign in to comment.