interface Product {
productName: string;
productPrice: number;
}
// Custom Type X
type Properties<T> = keyof T & string;
// Custom Type Y without "& string"
type Properties<T> = keyof T;
type PropertyNamesOfProduct = Properties<Product>;
Considering the scenario presented above, what distinctions can be observed when utilizing Custom Type X versus Custom Type Y excluding "& string"
The & string is utilized to filter out any keys of the object that are not strings, eliminating numbers and symbols. While your Product type doesn't include these, other objects might.
For instance:
const foo = Symbol();
type Product = {
name: string;
price: number;
[3]: boolean;
[foo]: string;
}
type KeysWithoutString<T> = keyof T;
type KeysWithString<T> = keyof T & string
const example1: KeysWithoutString<Product> = 'name';
const example2: KeysWithoutString<Product> = 'price';
const example3: KeysWithoutString<Product> = 'error'; // Error (not a key)
const example4: KeysWithoutString<Product> = 3; // Allow
const example5: KeysWithoutString<Product> = foo; // Allowed
const example6: KeysWithString<Product> = 'name';
const example7: KeysWithString<Product> = 'price';
const example8: KeysWithString<Product> = 'error'; // Error (not a key)
const example9: KeysWithString<Product> = 3; // Error (a key, but not a string)
const example10: KeysWithString<Product> = foo; // Error (a key, but not a string)
There is no impact. Utilizing the & string in this scenario functions as a non-operational action. Considering that the keys of Product are defined as string literals (name, price), merging the general string type with them merely continues to represent the string literals name and price.
If you wish to include both loose strings and strongly typed ones, you should use keyof T | string instead.
Consider the following example: class Car { constructor(name) { this.kind = 'Car'; this.name = name; } printName() { console.log('this.name'); } } My goal is to define printName using a differe ...
Currently, I am utilizing Angular and have incorporated the ng-pick-datetime npm. However, when attempting to adjust the format after selecting a date (dd/MM/yyyy), it consistently displays as (MM/dd/yyyy) instead. I am uncertain about how to rectify this ...
Utilizing Vue3 and naive ui for front-end development has been a challenge for me as I primarily focus on back-end development and lack expertise in front-end technologies. To enhance user interaction, I incorporated naive ui’s BasicTable along with an ...
Check out this sample code: const execPromise = util.promisify(exec); try { const { stdout } = await execPromise(cliCommand); } catch (error) { if (error instanceof S3ServiceException) { // error message is not handled correctly console ...
I am attempting to design a function that will have a return type based on whether an optional parameter (factory) is provided or not If the factory parameter is passed, then the return type should match the return type of the factory Otherwise, it shoul ...
I have a JavaScript library with types installed from npm/@types. There are two specific fixes I need to make to the @types package that only apply to my application, so merging them into DefinitelyTyped is not an option. Here's what I need to do: ...
Having an issue with the JS code that TypeScript compiler is generating. Here's an example class: // Class export class UserDTO { Id: number; FirstName: string; LastName: string; DateOfBirth: Date; getFullName(): string { ...
I am currently working on a codebase that uses Material Ui with theme overrides. As I set up my SettingContext and SettingsProvider, I find myself facing some syntax that is still unclear to me. Let's take a look at the following code snippet: const ...
I am currently working on an Angular 2 application using TypeScript. In one of the tables within the application, there is a select control in one of the columns. The contents of this select control are bound to another string array. <table ngContr ...
I have created the files through JHipster and currently facing an issue when trying to execute a query involving a Date variable. The conversion is failing. Below is my typescript file method that sets the criteria for the search: loadSearchPage(page?: ...
When using the flat config for eslint.config.js, how can I lint *.js files recursively from the command line? 1 In the past with eslintrc.js or eslintrc.json, I have used npx eslint . --ext .js, as mentioned here. Up until now, it has always worked withou ...
I am attempting to display points on a map using geojson points in my react application with react-leaflet. However, for some unknown reason, the points are not rendering on the map. When I try importing a JSON file, I encounter an error: TS2322: Ty ...
I'm in need of creating a private npm package specifically for custom type definitions (typedefs) that are hand-written d.ts files not generated by TypeScript. Since these are proprietary, they cannot be added to DefinitelyTyped. The folder structure ...
I am currently working on incorporating a title service into my Angular 10 application. My goal is to subscribe to router events, access the activated route's component, check if it has a title() getter, and then use that information to set the page&a ...
Currently, I'm utilizing Immutable.js alongside TypeScript for the development of a Redux application. In essence, the structure of my State object is as follows: const defaultState = { booleanValue: true, numberValue: 0, } const StateRecord = ...
Can someone please help me decipher this code snippet I found in a file? I'm completely lost as to what it is trying to accomplish. const user = rowData as NonNullable<ApiResult["getUsers"]["data"][number]["users"]> ...
I recently utilized the vue-property-decorator to add a required prop to my component class. However, when I attempted to use the component without passing the prop, no console errors were displayed indicating that the required prop is missing. Why did thi ...
Current Project: I'm currently working on developing an innovative AudioBook player using react-native and typescript. This is a significant project for me as I am relatively new to both technologies, and I am facing some challenges in properly struc ...
I am trying to update the base URL for my application. Currently, when I load the application, the URL shows up as http://localhost:4200/#/, but I want it to be http://localhost:4200/carrom/ instead. To accomplish this, I modified the base URL and now th ...
I've encountered a problem with a component in my app: @Component({ selector: 'app-payment-intent', templateUrl: './payment-intent.component.html', styleUrls: ['./payment-intent.component.css'] }) export class Payme ...