Utilizing Typescript DOM library for server-side operations

I've been working on coding a Google Cloud Function that involves using the URL standard along with URLSearchParams. After discovering that they are included in the TypeScript DOM library, I made sure to add it to my tsconfig file under the lib setting.

However, upon compiling and deploying the cloud function, I encountered a runtime error stating that URLSearchParams is not defined. What could I possibly be overlooking? My current setup uses TS 2.6.

Here is an excerpt from my configuration:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",
    "module": "commonjs",
    "lib": ["es6", "es7", "esnext", "dom"],

    "sourceMap": true,
    "outDir": "build",
    "removeComments": true,

    /* Strict Type-Checking Options */
    "strict": true,

    /* Additional Checks */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,

    "plugins": [{ "name": "tslint-language-service" }],
    "skipLibCheck": false
  },
  "include": ["src/**/*"],
  "exclude": ["build"]
}

And here are the dependencies listed in my package.json file:

  "dependencies": {
    "circular-json": "^0.4.0",
    "es6-promisify": "^5.0.0",
    "firebase-admin": "^5.5.0",
    "firebase-functions": "^0.7.3",
    "invariant": "^2.2.2",
    "joi": "12",
    "lodash": "^4.17.4",
    "node-fetch": "^2.0.0-alpha.9"
  },
  "devDependencies": {
    "@types/circular-json": "^0.4.0",
    "@types/invariant": "^2.2.29",
    "@types/joi": "^13.0.0",
    "@types/lodash": "^4.14.85",
    "@types/node": "^8.0.52",
    "@types/node-fetch": "^1.6.7",
    "cpy-cli": "^1.0.1",
    "del-cli": "^1.1.0",
    "firebase-tools": "^3.15.1",
    "tslint": "^5.8.0",
    "tslint-config-prettier": "^1.6.0",
    "tslint-language-service": "^0.9.6",
    "typescript": "2.6"
  }
typescriptgoogle-cloud-functionstypescript-lib-dom

Answer №1

To enable the dom option in your compiler settings, follow these steps:

Before:

"lib": ["es6", "es7", "esnext"],

After:

"lib": ["es6", "es7", "esnext", "dom"],

The URLSearchParams interface is included in this library.

By making this simple modification, you can add the following code to src/sub/temp.ts:

let x: URLSearchParams;

Upon hovering over the code, you will receive detailed type information and autocomplete suggestions.

interface URLSearchParams
var URLSearchParams: {
    new (init?: string | URLSearchParams | undefined): URLSearchParams;
    prototype: URLSearchParams;
}

No compilation warnings will be generated with these changes.

Please note that these instructions are specific to TypeScript version 2.6.1, so be sure you are not using an outdated version (pre v2.2).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Solving Circular Dependencies in React with TypeScript by using smart importing techniques

I've set up a union type in the parent component export type Students = "fresher" | "secondYear" | 'finalYear' | 'postGrad'; A circular dependency is causing issues, and the most obvious solution is to define ...

reactjstypescriptprop

retrieve the initial subarray from the array using rxjs

Looking to extract the first array from a subarray, my current setup is as follows: Map: map; Map() { Service }); } This is the interface structure: export interface map { } Encountering an error message: ERROR TypeError: ...

angulartypescriptrxjs

Link the Angular Material Table to a basic array

Currently facing a challenge with the Angular Material table implementation. Struggling to comprehend everything... I am looking to link my AngularApp with a robot that sends me information in a "datas" array. To display my array, I utilized the following ...

arraysangulartypescriptangular-material

What could be the reason behind my firebase cloud functions consistently timing out?

Currently, my goal is to set up a proxy to an external JSON API using Firebase cloud functions. I have written a function for this purpose: exports.helloWorld = functions.https.onRequest((request, response) => { request.get('http://www.google.co ...

expressfirebasegoogle-cloud-functions

What is the best way to switch the CSS class of a single element with a click in Angular 2

When I receive data from an API, I am showcasing specific items for female and male age groups on a webpage using the code snippet below: <ng-container *ngFor="let event of day.availableEvents"> {{ event.name }} <br> <n ...

javascriptangulartypescript

The enum cannot be assigned a type of 'string | null'

Within my ProductGender enum, I have: enum ProductGender { Men, Women, } In my getProducts service: public getProducts( gender: ProductGender, category: ProductCategory ): Observable<IProductInterface[]> { return this.httpPro ...

angulartypescriptangular-resolver

Tips for resolving the error message "TypeError: Converting circular structure to JSON"

I had a straightforward query where I needed to select all from the aliases table. Everything was working fine until I ran npm update. TypeError: Converting circular structure to JSON public async fetchAliases(req: Request, res: Response): Promise< ...

javascriptmysqlnode.jstypescriptexpress

A guide to retrieving the types of optional properties within a class or interface using Typescript

class Data { ID: number; Activity?: string; public getDataType(name: string) { return typeof this[name]; } constructor() { } } let _data = new Data() _data.ID = 5 console.log(_data.getDataType("ID")) // Retu ...

angulartypescriptclass

Creating a nested type using template literal syntax

Given a two-level nested type with specific properties: export type SomeNested = { someProp: { someChild: string someOtherChild: string } someOtherProp: { someMoreChildren: string whatever: string else: string } } I am looking ...

typescripttypescript-typings

Incorporating a particular JavaScript library into Angular 4 (in case the library doesn't have a variable export)

I am attempting to display the difference between two JSON objects in an Angular 4 view. I have been using a library called angular-object-diff, which was originally created for AngularJS. You can view a demo of this library here: Link I have trie ...

jsonangulartypescripttypescript-typings

Is there a way to extract a specific item from a ListView by tapping on it in Nativescript?

Attempting to retrieve data from a tap event using angular2 + typescript: This is the html code for the component: <RadListView row="1" [items]="groceryList" [class.visible]="listLoaded" (tap)="seeItem($event)" swipeActions="true" (itemSwipeProgr ...

angulartypescriptnativescript

Bringing in a feature within the Vue 3 setup

At the moment, I am attempting to utilize a throttle/debounce function within my Vue component. However, each time it is invoked, an error of Uncaught TypeError: functionTD is not a function is thrown. Below is the code snippet: useThrottleDebounce.ts imp ...

javascripttypescriptvue.jsvue-componentvuejs3

React TypeScript - creating a component with a defined interface and extra properties

I'm completely new to Typescript and I am having trouble with rendering a component and passing in an onClick function. How can I properly pass in an onClick function to the CarItem? It seems like it's treating onMenuClick as a property of ICar, ...

javascriptreactjstypescript

What causes TypeScript to automatically infer a default property when dynamically importing a JavaScript file that lacks a default export?

While dynamically importing a javascript file that exports multiple functions (without a default export), I encountered this issue: const sayHi = import('./sayHi.js') I was expecting the type of sayHi to be Promise<{name1: function, name2: fu ...

javascriptreactjstypescriptes6-promisees6-modules

What is the correct way to implement "next-redux-wrapper" with "Next.js", "Redux-ToolKit" and Typescript?

Currently, I am integrating RTK (redux-toolkit) into my Next.js App. I am facing an issue while trying to dispatch an AsyncThunk Action within "getInitialProps". During my research, I came across a package named "next-redux-wrapper" that allows access to t ...

typescriptreduxnext.jsredux-thunkredux-toolkit

what kind of bespoke entity in TypeScript

Exploring typescript for the first time, I have constructed this object: const startingState = { name: { value: "", error: false }, quantity: { value: 0, error: false }, category: "Grocery& ...

reactjstypescript

How can you verify the value of a disabled HTML input element in TestCafe using Typescript?

TestCafe Typescript - how to verify the value of a disabled HTML input element? Despite being disabled for user interaction, I want to ensure that this element still holds the anticipated value. example public async checksomething(text: string) { co ...

javascripttypescriptui-automatione2e-testingtestcafe

Encountering a NgForm provider error in Angular 4.4.6 development mode

UPDATE: Identifying the root of the issue has led me to search for a suitable solution. NOTE: This complication is specific to development mode (not production, and not utilizing AOT). The "Update" resolution I am implementing can be found here. In an a ...

angulartypescriptangular-forms

Tips for ensuring the correct typing of a "handler" search for a "dispatcher" style function

Imagine having a structure like this: type TInfoGeneric<TType extends string, TValue> = { valueType: TType, value: TValue, // Correspond to valueType } To prevent redundancy, a type map is created to list the potential valueType and associate i ...

typescript

Getting the Most Out of .find() in Angular 4

Despite reading various similar questions, I'm still struggling to make the .find() function work in my application. I have a service with the following API: export class VehicleService { private defUrl = 'API'; constructor(private ht ...

angulartypescript