Can you explain the distinctions among these options?
type A = {a?: string}
type A = {a: string | undefined}
type A = {a?: string | undefined}
In what scenarios would one be preferred over the others?
For more information, visit: https://github.com/microsoft/TypeScript/issues/13195
When you use the symbol ?, it allows you to leave out a value, whereas using undefined requires that you provide either a string or specify undefined.
// Note: This code was tested using Typescript 4.2.1
type X = { x? : string }
type Y = { y: string | undefined }
const objX: X = {} // No issues here!
const objY: Y = {} // ERROR: property 'y' is missing in type Y
In my experience, utilizing ? is typically preferred since it defaults to undefined. It's rare for me to encounter situations where I specifically want users to input undefined as a value.
There is a subtle difference between having an object where a property is explicitly set to undefined, and having an object where that property is not present at all.
type A = {a: string | undefined} // Without the question mark, this requires key "a" to be included!
let varA: A = { a: undefined } // This is acceptable
let varB: A = {} // This is not acceptable as key "a" is missing
When utilizing the question mark symbol, it signifies that A may or may not be present, with A possibly being a string or undefined. Just because a type is undefined doesn't mean it's absent.
The concept of undefined in this context pertains to the contents of A, while the question mark refers to its existence. Both can be used simultaneously, but if you are confident that A will always be defined, just use undefined.
In TypeScript, using a question mark to indicate an optional property will result in an error when transpiled to JavaScript.
The use of | undefined in type definitions is redundant because all properties can inherently have undefined assigned as their value.
For example, defining a type like:
type A = {a?: string, b: string}
allows you to create a variable without specifying property a:
let x: A = { b: 'some value' };
Declaring type A = {a: string | undefined} serves no real purpose compared to type A = {a: string}, since the presence of property a is still required and strings can already be assigned undefined.
Attempting let x: A = {} will result in an error due to missing property a, while assigning a: undefined with let x: A = { a: undefined } is allowed with type A = {a: string}.
This renders the use of | undefined unnecessary, as any property can accept undefined values regardless.
Hey, I'm just stepping into the world of async functions and I could use some help. My goal is to return an object called name_dates, but unfortunately when I check the console it's empty. Can you take a look at my code? Here's what I have ...
constructor( private route: ActivatedRoute, private http: Http ){ // Retrieve parameter changes observable let paramObs = route.paramMap; // Fetch data once only let dataObs = http.get('...'); // Subscribe to both ob ...
Imagine having a list like the one shown below: <ion-list radio-group [(ngModel)]="autoManufacturers"> <ion-list-header> Auto Manufacturers </ion-list-header> <ion-item> <ion-label>Cord</ion-label> &l ...
Consider a scenario where there is a Guardian entity connected to a Student entity. The goal is to establish their many-to-many relationship in TypeORM by introducing a new entity called StudentGuardianRelationship. This intermediary entity serves the purp ...
After reviewing the HTML snippet provided below, it is evident that there is a table with looping through mat cell using *matCellDef="let model". Inside each cell, there are input fields which are reactive forms. Each row or cell needs to have it ...
After successfully creating my Ionic 2 application for Android using the command "ionic build android", everything seems to be working fine. I have been debugging the app by using Chrome inspect devices, but now I am facing an issue. I am trying to debug ...
Are there any Angular/Typescript projects that are completely built without relying on third-party libraries? I am encountering problems with Firefox and IE11. It works fine on Chrome where the value can be read, but the calendar does not display when us ...
My type declarations are as follows: types.ts: type ItemKind = 'A' | 'B'; type ValidItem<TItemKind extends ItemKind = ItemKind> = { readonly type: TItemKind; readonly id: number; }; type EmptyItem<TItemKind extends ...
In my scenario, I have two variables named power and mainPower. Both of these variables essentially represent the same concept, with mainPower storing an ID of type Long in the backend, while power contains all attributes of this data transfer object. The ...
I have created an HTML component that utilizes *ngFor to dynamically generate HTML elements. This results in a total of 3 tags being generated when the code is run. I have included data such as subject in the component file which updates dynamically, how ...
Is there a way to implement SCSS that is dependent on the user's browser language? When I checked, I found the browser language specified in <html lang = "de"> and in the CSS code as html[Attributes Style] {-webkit-locale: "en&quo ...
Experiencing an 'undefined' error for the 'loglogMePleasePlease' function in the code snippet below. Requesting assistance to resolve this issue. TypeError: Cannot read property 'logMePleasePlease' of undefined This error ...
As I venture into TS, I’ve been tasked with transitioning an existing JS code base to TS. One of the challenges I encountered involves a styled component in a file named style.js. import styled from "styled-components"; export const Container ...
I recently created a new API route named route.ts, where I included two different routes. One route retrieves all users from the database, while the other retrieves a specific user based on their ID passed as a query parameter. However, when testing these ...
The Scenario As I work on developing a Word add-in using the latest Javascript API's for Office, I have incorporated various functionalities along with templates. One of the client's requests is to have the templates accessible from the ribbon. ...
My goal is to achieve the following: type UserDataProps<FieldName extends keyof DataShape, DataShape extends Record<string, any>> = { id: string; value: DataShape[FieldName]; } const userDataBuilder = <FieldName extends keyof DataShape, ...
Recently, I created a component with a click handler that looks like this: onClick={(e) => { e.stopPropagation(); }} It seems clear to me, but then the Typescript compiler complains that it's not a valid signature for onClick, which actually a ...
I am intrigued by the idea of restricting files within a specific scope from importing files from another scope. Let's consider this example: Imagine we have the following project structure: project/ ├── node_modules/ ├── test/ ├── ...
I'm currently learning React Router by following a video tutorial, but I've run into an issue. In my Stackblitz project, there is no App.js file, so I've placed everything inside index.tsx. However, now I need to use the line ----> const ...
Is there a way to prevent NextJS from changing the 'jsx' property in my tsconfig.json file from 'react' to 'preserve' when running the development server? This is how my tsconfig.json file looks: "compilerOptions": { " ...