Is there a way to implement this code in Typescript?
window.open(externalUrl, '_blank').focus();Encountering the following TypeScript error:
Object is possibly 'null'.ts(2531)I attempted the following solution without success:
if (typeof window !== 'undefined' && window && externalUrl !== '' && window.open(externalUrl, '_blank')) {
window.open(externalUrl, '_blank').focus();
}
If you are using an integrated development environment (IDE), you may notice a red squiggly line highlighting the problematic part of your expression:
window.open(externalUrl, '_blank').focus(); // issue
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Object is possibly 'null'
The error message indicates that
window.open(externalUrl, '_blank')null, not necessarily the entire window object. Therefore, in addressing this particular error, you do not need to check if window itself is null, assuming there is one available in your JavaScript runtime environment.
This error aligns with the information provided in the MDN documentation for Window.open(), stating that a return value of null signifies an inability to open the window. To tackle this issue, you should examine the return value and only invoke focus() if it is not null. Attempting to do so differently like below will still trigger an error:
if (window.open(externalUrl, '_blank')) {
window.open(externalUrl, '_blank').focus(); // still error
}
The compiler does not assume that a successful first call to window.open() guarantees success for subsequent calls. While it might seem improbable that the second call would fail when the first one doesn't, there is no certainty. Additionally, opening two windows simultaneously may not align with your intentions.
So, how can we handle this situation correctly? The solution that works well with most TypeScript versions involves storing the result in a variable and then verifying it:
const w = window.open(externalUrl, '_blank');
if (w) {
w.focus(); // now okay
}
For TypeScript 3.7 and later, you have access to the optional chaining operator, ?.. This allows you to express the above logic more succinctly as follows:
window.open(externalUrl, '_blank')?.focus(); // also works
In due time, the optional chaining operator is expected to become a part of JavaScript itself. Until then, the code is transpiled into JavaScript similar to:
// Transpiled JavaScript
(_a = window.open(externalUrl, '_blank')) === null || _a === void 0 ? void 0 : _a.focus();
This approach stores the result of window.open() in a variable, akin to what we did with
w</code earlier, ensuring that <code>focus()I hope this explanation proves helpful; best of luck!
After reading the informative response from @jcalz, I discovered another neat one-liner that utilizes the exclamation mark !:
window.open(externalUrl, '_blank')!.focus();I have a TypeScript utility class called myUtils.ts in the following format: export class MyUtils { static doSomething(input: string) { // perform some action } } To utilize this method in my component's HTML, I have imported the class into m ...
I am currently facing an issue where I need to set a specific type for a prop value. However, the challenge lies in the fact that the types are string unions which can vary depending on the usage of the React Component. Let me provide you with the TypeScr ...
Check Out This live Example: I am in the process of creating a list of checkboxes with various data objects: data = [ { Key: "class_id", displayName: "Section ID", enabled: true }, { Key: "room_l4", displayName: "Location", enabled: false }, { Key: "se ...
Currently, I am configuring a node js backend to operate on TS for the first time within a mono-repo that has a specific folder structure. You can view the structure here. The package.json file is located in the main directory as shown below: "scr ...
Encountering an issue during the build process, specifically with the error in audioRef.current.play(). The error message indicates that there is no play function available. I attempted to use an interface but it seems to not accept boolean values. Could ...
How can I prevent repetition of values when creating a dynamic select based on an object fetched from a database? Below is the HTML code: <router-outlet></router-outlet> <hr> <div class="row"> <div class="col-xs-12"> & ...
I have a query regarding the choice of service layer to use. // 1 export class SomeService{ async create(dto:CreateSomeDto) {} } or // 2 export class SomeService{ async create(title: string, content: string) {} } It appears that most individuals opt ...
I need assistance with specifying office-ui-fabric-react as an external dependency in my TypeScript project using Webpack. Currently, I am importing only the modules I require in my project: import { Dialog, DialogType, DialogFooter } from 'office-u ...
My apolloClient is configured as follows: /** * Initializes an ApolloClient instance. For configuration values refer to the following page * https://www.apollographql.com/docs/react/api/core/ApolloClient/#the-apolloclient-constructor * * @returns Apoll ...
Recently I made the switch from regular JavaScript to TypeScript for my project. Everything seems to be functioning properly, except for session handling. This is the current setup of my project: Server.ts App.ts /db/mongo/MongoHandler.ts and some other ...
Currently, I am working on testing a function called getSingleShip in Angular 12 using Karma-Jasmine 4. The aim is to verify if this function is being called by another function named retrieveShip. However, the test results indicate that getSingleShip has ...
I have a scenario where I have multiple components running inside *ngFor on the same page. My goal is to create button links at the top of the page that, when clicked, will scroll to the corresponding component on the page. Below are the code snippets tha ...
Suppose a user enters the time as 12:34 and we need to split it into two different parts to save it in an array like [12, 34]. How can this be achieved using Angular? I attempted to split them but my solutions were unsuccessful! I am currently utilizing & ...
Utilizing angular reactive form to create distance input fields with two boxes labeled as From and To. HTML: <form [formGroup]="form"> <button (click)="addRow()">Add</button> <div formArrayName="distance"> <div *n ...
Imagine a scenario where there is a predefined type: interface Test { foo: number; bar?: { name: string; }; } const obj: Test; // The property 'bar' in the object 'obj' is currently optional Now consider a situatio ...
In my codebase, I have an entity named Epic which contains a method called pendingTasks() within a class. import { Solution } from '../solutions.model'; import { PortfolioKanban } from '../kanban/portfolio-kanban.model'; import { Kanban ...
I'm currently utilizing MUI's autocomplete component to showcase some of my objects as recommendations. Everything is functioning correctly, however, I am attempting to include an avatar as a start adornment within the textfield (inside renderInp ...
I have been trying to utilize the renderToPipeableStream function from React18, and although it is functional, I am struggling with handling the pipe properly. The key section of my code involves an array of strings representing HTML. I am splitting the s ...
We've integrated harp.gl into our ng Angular application, but we're encountering issues when trying to connect to data sources that previously worked in our yarn demo. The datasource is created as follows: const dataSource = new OmvDataSour ...
As per the typescript definition, the use of the non-null assertion operator is not supposed to impact execution. However, I have encountered a scenario where it does. I have been struggling to replicate this issue in a simpler project. In my current proj ...