[next] Refine typescript support
- Dominant language
- TypeScript
- Stars
- 4.4k
- Forks
- 439
- Avg merge
- 14h 32m
- Merged PRs (30d)
- 19
Description
- [ ] 1. Please disable `allowSyntheticDefaultImports`
https://github.com/algolia/docsearch/blob/f30ca386cd52327b4b8bb374e796b293b7cd0133/tsconfig.json#L3
This options is poisonous. When users install `@docsearch/react` in their own project, they have to enbale `allowSyntheticDefaultImports` or enable `skipLib` to make things work. Thus, for library project, it's better not to enbale this kind of compilerOptions.
```sh
node_modules/@docsearch/react/dist/esm/useDocSearchKeyboardEvents.d.ts:1:8 - error TS1259: Module '"node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
1 import React from 'react';
~~~~~
node_modules/@types/react/index.d.ts:65:1
65 export = React;
~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
```
- [ ] 2. Put `@types/react` in dependencies of `@docsearch/react`.
As the error shows, when using `@docsearch/react` with typescript, the types definition of react is also required.
The generated `@docsearch/react/dist/esm/DocSearch.d.ts` (and many other files) has `import React from 'react';` in it.
- [x] 3. `node_modules/@docsearch/js/dist/esm/index.d.ts` is not a module
> Already fixed by #1396 in version 3.1.1. Thanks @IanVS
When trying to import `@docsearch/js` in ts:
```sh
File 'node_modules/@docsearch/js/dist/esm/index.d.ts' is not a module.
17 const docsearch = await import('@docsearch/js')
```
---
Hope we can optimize typescript support~
Contributor guide
Research direction
Start with tsconfig.json at the linked configuration entry and inspect the @docsearch/react package dependencies and generated declaration files such as dist/esm/DocSearch.d.ts. Reproduce the TypeScript consumer error without the suggested compiler flags, then verify that the package types compile and resolve their React type dependency correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- developer-experience
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100