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 am currently enhancing a weather forecast website by incorporating a theme toggler feature. The functionality has been successfully implemented, but I am facing an issue where the selected theme does not persist after reloading the page. Can someone he ...
I have created a model-driven form in Angular 2, and I need one of the input fields to only show up if a specific checkbox is unchecked. I was able to achieve this using *ngIf directive. Now, my question is how can I make that input field required only whe ...
Initially, I believed that using path & basePath in tsconfig would allow aliases, but it appears not to be the case. "moduleResolution": "node", "baseUrl": "./src", "paths": { "@api/*": [&qu ...
For my petite project, I am utilizing Next.js with TypeScript. A thought has been lingering in my mind lately: is there a way to turn off the types validity checks while executing npm run build? Since the type checking occurs during npm run dev, it seems ...
At the moment, my code is set up to populate a table with data. In my component.ts file: import { HttpClient } from "@angular/common/http"; import { Component, OnInit } from "@angular/core"; import { FormBuilder, FormGroup, Validators } from "@angular/fo ...
Below is an example of a markdown file: # Test ## First List * Hello World * Lorem Ipsum * Foo ## Second List - Item 1 ## Third List + Item A Part of Item A + Item B ## Not a List Blah blah blah ## Empty ## Another List Blah blah blah * ITEM # ...
Situation : Utilizing an Angular PWA for communication with an iOS native app via WKWebview. Implementing messageHandlers to facilitate data sharing between TypeScript and Swift logic code. Issue : Employing addEventListener to monitor a specific event on ...
When I'm debugging, I've noticed that the silly mistakes I make are often the hardest to spot. For example: if (id = userId) {..} And in class methods: let result = myClass.doThis; Oddly enough, VSCode doesn't catch these errors during co ...
I am currently diving into the world of Angular 2 and attempting to create my very first application. I am following a tutorial from Barbarian Meets Coding to guide me through the process. Following the steps outlined in the tutorial, I have set up my appl ...
A situation has arisen where a library that was functioning perfectly in an app utilizing react-create-app is now needed for use in NextJS (using npx create-next-app --ts). However, upon attempting to integrate the library, an error was encountered: erro ...
Everything was running smoothly in Angular16. I had "@types/openui5" : "1.40.4" listed in my dev-dependencies. Here is how it's configured in the tsconfig.json: { "compilerOptions": { "downlevelIteration": ...
My Angular form is reactive and collects mobile numbers along with other details. Here is the code snippet: component.html <form [formGroup]="contactDetailsForm"> <ngx-intl-tel-input [cssClass]="'ngxIntlInputBorder'&quo ...
Can a form be submitted using ViewChild in Angular5? If so, how can it be achieved? I attempted to do this but was unsuccessful My Attempt: <form #form="ngForm" (submit)="submitForm(form)" novalidate> <input required type="text" #codeReques ...
When working with Firestore, I need to retrieve multiple documents, each with a unique sourceAddressValue. This means for a list of N strings, I may need to fetch N documents. I attempted the following approach: getLocationAddresses(addresses: string[]) { ...
Looking at this TypeScript code snippet: const arr: ReadonlyArray<string> = [ "123", "234" ]; arr.push("345"); An error is thrown by the TS compiler: Property 'push' does not exist on type 'ReadonlyArray<string>&apo ...
Within a modal, I have set up a threejs scene with three point lights. All functions are exported from a separate file called three.ts to the modal component. The issue I am facing is that when I try to initialize DAT.GUI controls, they end up rendering ...
I have developed a unique Factory type that allows me to create factory functions. export type Factory<T> = (state?: Partial<T>) => T; Within my <Avatar /> React component, I have implemented a prop with a union type to accommodate fo ...
Currently, I have implemented file uploading using <input>. However, when attempting to change the file after already selecting one, the website crashes and states that event.target is null. <Button label="Upload S3 File"> <input ...
I've come across this issue before, but I'm having difficulty navigating through a nested structure. I can't seem to find any guidance in the right direction. Here is the object I'm attempting to parse: const nestedArray = { id ...
I'm facing an issue detailed below. API: "Data": [ { "Id": 90110, "Name": "John", "Surname": "Doe", "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472d282f2923282207202a262e2b ...