如何在 Angular 中使用“jquery-param”npm package？

Question

The jquery-param npm package has the functionality I need in my Angular9 project. I noticed it doesn't have typings for typescript so I also added @types/jquery-param as dependency. I've tried importing in different ways to no avail. I've also read various answers about DefinitelyTyped and typings but can't manage to find the solution. Made a StackBlitz with intended usage if someone is willing to take a look.

Update:
TL;DR: I managed to import and use it. Now the project compiles and works great , but the VSCode's checker marks an error in the import statement . After closing and reopening VSCode it no longer shows error in the import. It seems it only load changes to tsconfig.json on app start.

In StackBlitz works great with just the typings and importing with import param from 'jquery-param'; .

Went ahead and installed both packages in my real project. Then had trouble importing as the compiler complained:

ERROR in src/app/shared/services/http.service.ts:4:24 - error TS2497: This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export.

This is because of how the typings are exported, as @wtho mentioned and as stated by:

index.d.ts(8, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Tried importing with import * as params from 'jquery-params' and other ways using curly braces, didn't work.

So I added

    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,

to tsconfig.json as some answers mentioned.

Now the project compiles and works great.

Note about jquery-param :
This package exports a sigle function equivalent to jQuery.param() . This allows to encode a nested object to pass it as a query string in a GET request. I will be using it in requests to an API like this:

const params = {
  pageIndex: 1,
  pageSize: 10,
  filter: [
    { key: 'active', value: true }
  ],
  sort: [
    { key: 'username', value: 'ascend' }
  ]
}

url += '?' + param(params);

this.httpClient.get(url).subscribe(
  ...
);

I went for this package because couldn't do it using Angular API, and most answers said spin your own function to encode nested objects.

Answer 1

Before ES modules were introduced, packages often exported a single function as default export. You can import these using the ES modules syntax import param from 'jquery-param' and just setting "esModuleInterop": true in your base tsconfig.json .

If VSCode still complains, make sure you do not have some outdated TypeScript extensions active.

Here is a working stackblitz demo .

It also worked for me locally with Angular v10.0.2 and TypeScript v3.9.5 .

---

Note that url query parameters are not designed to transport complex object. If possible, switching to a HTTP POST request might be the better solution.