Is it possible to identify unauthorized utilization of web APIs within TypeScript?

Recently, I encountered an issue while using the URLSearchParams.size in my code. To my surprise, it didn't work on Safari as expected. Checking MDN's browser compatibility table revealed that Safari version 16.6 does not support this feature, unlike the newer Safari 17 with a green tick.

Adapting to this limitation was simple, but it got me thinking - how many other APIs am I unknowingly using that aren't supported across different browsers? As a TypeScript user, I wish there was a way to receive warnings from TS or tools like eslint and Copilot when using unsupported APIs instead of having to rely on extensive integration testing across various browsers.

Is there a method to prompt TS or eslint to flag any unsupported API calls based on specific browser versions to avoid such compatibility issues?

typescriptdomtypescross-browser

Answer №1

It seems that the ts-browser-compat package is capable of handling this task:

$ yarn add -D @journeyapps/ts-browser-compat
$ yarn exec ts-browser-compat -b safari:16
Checking .
URLSearchParams.size - safari 17

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

When Ionic Angular app's IonContent scroll element returns an incorrect scrollTop value after navigation completes, what might be the reason behind this unexpected behavior?

In my quest to scroll the ion-content component to the top upon navigating to the page from certain selected pages, I have implemented a solution using the router's NavigationEnd events. However, I have encountered an issue where the IonContent's ...

angulartypescriptionic-frameworkangular12ionic6

Unable to perform type casting in Typescript

I recently dived into the world of TypeScript by picking up a book titled Typescript Revealed (Published in February 2013). Chapter 2 caught my attention with a section on "Casts" featuring an intriguing example: var a : int = <int>SomeNumberAsAStri ...

castingtypescript

Using GraphQL to set default values in data within a useEffect hook can lead to never

Here's the code snippet that I'm working with: const [localState, setLocalState] = useState<StateType[]>([]); const { data = { attribute: [] }, loading } = useQuery<DataType>(QUERY, { variables: { id: client && client.id ...

javascriptreactjstypescriptgraphqlreact-hooks

Implementing TypeScript module resolution with Cucumber-js can be a bit tricky

Currently, I am in the process of creating a Proof of Concept for Cucumber-js using TypeScript. Everything is going smoothly except for one issue - I am facing difficulties when it comes to configuring the module resolution while utilizing tsconfig-paths. ...

typescriptcucumbercucumberjs

What steps should I take to enable TypeScript IntelliSense to recommend correct suggestions within discriminated unions?

I am working on creating a checkbox UI component based on a design in Figma. The outline variant is specified to only be compatible with the large size, while the solid variant can be used with all sizes. As a result, I am trying to build an interface whe ...

typescriptconditional-statementsreact-props

Error message: "The function app.functions is not a valid function in Angular Fire Functions

Currently, I am utilizing Angular v16 alongside Angular Fire v16 and Firebase v9. Following the instructions, I completed all the necessary setup steps including executing firebase login, firebase init, and converting the functions to typescript. Next, wi ...

angulartypescriptfirebasegoogle-cloud-functionsangularfire

TypeScript encounters difficulty locating the div element

Recently attempted an Angular demo and encountered an error related to [ts] not being able to locate a div element. import { Component } from "@angular/core"; import { FormControl } from "@angular/forms"; @Component({ selector: "main", template: ' ...

angulartypescriptasp.net-core-2.0

Error: A stream was expected, but instead you provided an object that is invalid. Acceptable options include an Observable, Promise, Array, or Iterable

I attempted to use map with a service call and encountered an error. After checking this post about 'subscribe is not defined in angular 2', I learned that for subscribing, we need to return from within the operators. Despite adding return statem ...

angulartypescriptrxjsobservable

Declaration of Typescript index.d.ts for a heavily nested function within an npm module

Regrettably, it appears that @types/rickshaw is lacking content, prompting me to create my own declaration file. The current one I have looks like this: declare module 'rickshaw' { export class Graph { constructor(obj: any); ...

typescriptnpmdeclaration

Tips for accessing files following the transmission of a post request within the req.body

Encountering a problem where image uploads to an s3 bucket are not successful. The error message received is: API resolved without sending a response for /api/upload/uploadPhoto, this may result in stalled requests. The front end includes an input that ca ...

javascripttypescriptfileamazon-s3next.js

Setting up popover functionality in TypeScript with Bootstrap 4

Seeking assistance with initializing popovers using TypeScript. I am attempting to initialize each element with the data-toggle="popover" attribute found on the page using querySelectorAll(). Here is an example of what I have tried so far: export class P ...

javascriptjquerytypescriptpopover

Is there a way to reset the selected value of a specific option in Mat-Select?

Using mat-select, I need to reset the selection for a specific value of mat-select's mat-option. For instance, take a look at this example on StackBlitz In the example, the mat-select has three options; when selecting Canada, it should revert back t ...

angulartypescriptangular-materialdropdown

What is the correct approach to managing Sequelize validation errors effectively?

I am working on a basic REST API using Typescript, Koa, and Sequelize. If the client sends an invalid PUT request with empty fields for "title" or "author", it currently returns a 500 error. I would prefer to respond with a '400 Bad Request' ins ...

node.jstypescriptsequelize.jskoasequelize-typescript

Issue with Ant Design form validation

After reading through the documentation, I attempted to implement the code provided: Here is a basic example: import { Button, Form, Input } from "antd"; export default function App() { const [form] = Form.useForm(); return ( <Form f ...

javascriptreactjstypescriptvalidationantd

Replace a portion of text with a RxJS countdown timer

I am currently working on integrating a countdown timer using rxjs in my angular 12 project. Here is what I have in my typescript file: let timeLeft$ = interval(1000).pipe( map(x => this.calcTimeDiff(orderCutOffTime)), shareReplay(1) ); The calcTim ...

javascriptangulartypescriptrxjs

An unexpected error occurred while running ng lint in an Angular project

I've encountered an issue while trying to run ng lint on my Angular project. After migrating from TSLint to ESLint, I'm getting the following error message when running ng lint: An unhandled exception occurred: Invalid lint configuration. Nothing ...

angulartypescripteslint

Exploring the functionality of the Angular snackbar feature

I have created a simple snackbar with the following code: app.component.ts: ngOnInit(){ this.dataService.valueChanges.pipe( filter((data) => data === true), switchMap(() => { const snackBarRef = this.matSnackBar.open ...

angulartypescriptunit-testingjasminekarma-jasmine

What could be causing the module to break when my Angular service, which includes the httpClient, is added in the constructor?

After creating a backend RESTful API, I encountered difficulties while trying to access it. To address this issue, I developed a database-connection.service specifically for making POST requests. However, I am facing challenges in implementing this solut ...

angulartypescriptangular-cliangular2-routing

Generate a new container with Flow type relay

I've hit a roadblock trying to properly use flow type with relay's modern createFragmentContainer. Here is what I have: import { type RelayContext } from 'react-relay' type Props = { relay: RelayContext } relay is a prop added by ...

reactjstypesflowtyperelaymodern

cycle through options of radio buttons

How can I display items of radio buttons, with the values of these items coming from a backend api? <div class="input-group col-md-9 input-group-sm"> <label>gender</label> </div> <!-- TO CORRECT ...

angulartypescript