Skip to content

Commit 92f2f44

Browse files
committed
Update README.md with best practice usage for type resolution
Also bump version to push new readme to npm
1 parent 7ad717b commit 92f2f44

File tree

3 files changed

+28
-11
lines changed

3 files changed

+28
-11
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,3 +181,4 @@ $RECYCLE.BIN/
181181
*.lnk
182182

183183
# End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux,visualstudiocode,jetbrains+all
184+
.fleet/

README.md

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,37 @@ Type definition for [`Navigation API`](https://github.com/WICG/navigation-api)
99
```shell
1010
$ npm i -D navigation-api-types
1111
```
12+
### Usage
1213

13-
### tsconfig.json
14+
#### Make types visible in specific files
1415

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

17-
```json
18-
{
19-
"compilerOptions": {
20-
"types": [
21-
"./node_modules/navigation-api-types"
22-
]
23-
}
24-
}
19+
```typescript
20+
// 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.
21+
/// <reference types="navigation-api-types" />
22+
23+
console.log(window.navigation) // no type error!
24+
```
25+
26+
#### Make types visible globally in all source files within a project
27+
28+
Create a `.d.ts` file anywhere in your project so that it is visible to TypeScript according to your `tsconfig.json` settings. For
29+
example, it could be at `src/global.d.ts` or `src/navigation-api-types.d.ts`.
30+
31+
Add a [TypesScript triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) as follows:
32+
33+
```typescript
34+
// 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.
35+
/// <reference types="navigation-api-types" />
2536
```
2637

38+
This exposes the types *ambiently* so they are available without any `import` or `require` statements. TypeScript will simply know about them everywhere.
39+
40+
**Important**: do not add any `import` or `export` statements to this file, or it will stop working ambiently. Doing that
41+
changes it in TypeScript's view from a "script" to a "module", and the rules about ambient types change in that case.
42+
2743
## License
2844

2945
This project is licensed under the [MIT License](https://github.com/lukewarlow/navigation-api-types/blob/master/LICENSE).

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "navigation-api-types",
3-
"version": "0.3.0",
3+
"version": "0.3.1",
44
"description": "Type definition for the Navigation API",
55
"keywords": [
66
"navigation-api",

0 commit comments

Comments
 (0)