https://github.com/lukewarlow/view-transitions-api-types
TypeScript definitions for the View Transitions API
https://github.com/lukewarlow/view-transitions-api-types
hacktoberfest page-transitions shared-element-transition sharedelementtransitions types typescript typescript-definitions view-transitions-api viewtransitions
Last synced: 12 months ago
JSON representation
TypeScript definitions for the View Transitions API
- Host: GitHub
- URL: https://github.com/lukewarlow/view-transitions-api-types
- Owner: lukewarlow
- License: mit
- Created: 2023-06-13T16:56:34.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-13T17:00:50.000Z (about 3 years ago)
- Last Synced: 2024-03-15T08:06:30.946Z (over 2 years ago)
- Topics: hacktoberfest, page-transitions, shared-element-transition, sharedelementtransitions, types, typescript, typescript-definitions, view-transitions-api, viewtransitions
- Homepage: https://www.npmjs.com/package/view-transitions-api-types
- Size: 3.91 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# View Transitions API Types
[](https://www.npmjs.com/package/view-transitions-api-types)
Type definition for [`View Transitions API`](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
### Install
```shell
$ npm i -D view-transitions-api-types
```
### Usage
#### Make types visible in specific files
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:
```typescript
// Add types for document.startViewTransition for use in this file. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types- for more info.
///
console.log(document.startViewTransition) // 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/view-transitions-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 document.startViewTransition ambiently for implicit use in the entire project. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types- for more info.
///
```
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/view-transitions-api-types/blob/master/LICENSE).