Here is the code snippet in question:
interface Config1 { A: string; N: number; }
interface Config2 { B: string; N: number; }
interface Config extends Config1, Config2 { }
const config: Partial<Config> = {};
const keys: Array<keyof Config> = ["A", "B", "N"];
const key = keys[0];
config['A'] = 'abc';
config[key] = 'abc';
I am puzzled as to why TypeScript is rejecting the last line of code:
Type '"abc"' is not assignable to type 'undefined'.
TypeScript's error message in this scenario leaves much to be desired:
Trying to assign a string to undefined: Type '"abc"' is not assignable to type 'undefined'.Trying to assign a number to undefined: Type '3' is not assignable to type 'undefined'.The error detection, however, seems accurate. Let me break it down with some annotated source code to clarify the situation:
// Adding these for debugging purposes
const key = keys[0];
const a = config['A'];
const b = config[key];
// Checking types for better understanding
type K = typeof key; // "A"
type A = typeof a; // string | undefined
type B = typeof b; // string | number | undefined
// 1. It's fine to assign a string to the key 'A'
config['A'] = 'abc';
// 2. When accessing an object using index signature, you could get undefined
config['A'] = undefined;
// 3. ERROR: Number assignment is not allowed because when the key is 'A', the expected value is a string
config['A'] = 3;
// 4. ERROR: TypeScript recognizes that key could be 'A' and others, hence it's uncertain whether a number or string is the correct value
config[key] = 'abc';
// 5. Same issue as point 2
config[key] = undefined;
// 6. Similar problem as point 4
config[key] = 3;
You can experiment with this on the playground.
If you modify your keys array to:
const keys = ["A", "B", "N"] as const;
The type of K will now be narrowed down to just "A" instead of
"A" | "N" | "B" type K = typeof key; // "A"
Consequently, you'll encounter errors that align with your expectations:
Attempting to assign a number to a string: Type 'number' is not assignable to type 'string'.The nature of the keys determines that keys[0] in Typescript can be any key from the Config object (typeof keys[0] remains as keyof Config == 'A' | 'B' | 'N').
Therefore, it is expected that the value assigned to your object
config: Partial<Config> satisfies all possible values simultaneously.
In this scenario, using Partial<Config>, the expected values are the intersection between string | undefined and number | undefined. Consequently, the only common type is undefined.
It should be noted that without Partial<Config>, the expected values would represent the intersection between string and
number</code), which do not intersect and result in the type <code>neverIf your array of keys remains constant and unchanging,
One solution may involve defining keys as follows:
const keys = ["A", "B", "N"] as const;keys[0], allowing for accurate typing of the expected value.
I'm struggling with a for-loop and promises in my angular2 project. I have multiple methods that return promises, and after these promises are resolved, I want to populate an array in the class using Promise.all(variable).then(function(result){....... ...
I'm currently in the process of enhancing some code within my library, but I've encountered a perplexing issue with bracket notation not functioning as expected when attempting to call an imported class. The parameter type expects a camelCased s ...
Having trouble passing a payload using Typescript service in an http.post request Here is my TypeScript code: saveEdits(body: Object): Observable<Animal[]> { let bodyString = JSON.stringify(body); let headers = new Headers({ 'Content- ...
My array sorting function works perfectly until it encounters special characters like Á or Ű. Is there a specific TypeScript or Angular 2 method that can help me solve this issue? Here is an example of the sorting method I am currently using: private s ...
getStage may sometimes return undefined without reporting any errors, which could potentially lead to a code crash. const a = Math.random() > 0.4 function getStage(): string { if(a) { return '' } } c ...
Looking for a way to highlight specific words in a sentence using TypeScript? We've got you covered! For example: sentence : "song nam person" words : ["song", "nam", "p"] We can achieve this by creating a custom pipe in typescript: song name p ...
I have integrated vue-cookies into my app in the main.ts file: import VueCookies from 'vue-cookies'; ... const app = createApp(App) .use(IonicVue) .use(router) .use(VueCookies,{ expires: '30d', }); Despite adding the cookie v ...
Within my React application, I am retrieving data from an API using the following code snippet: function PlayerPage() { interface PlayerDataType { id: number; handle: string; role: string; avatar: string; specialAbilities: null; s ...
I've been searching for a solution for quite some time now, but I'm still a bit confused. The issue is simple: I have a model with a boolean property that I'm mapping to a select element in Angular. The select allows the user to choose betwe ...
After successfully running this code: const f = <T extends string>(x: T) => x; f(""); interface Dictionary<T> { [key: string]: T; } const dict: Dictionary<number> = { a: 1 }; I anticipated the following code to work as well: interf ...
myComponent.component.ts ngOnInit() { this.getData.getAllData().subscribe( response => { console.log(response); this.dataArray = response; }, () => console.log('there was an error') ); } myservi ...
As I delve into TypeScript in an effort to enhance my programming skills, I have encountered the use of exclamation marks when defining variables. An example of this can be seen in the following code snippet: protected _db!: CheckpointDB ...
Having trouble retrieving a list of users using my endpoint, as it keeps returning a 404 error. I have set up a model, controller, router, and index file for the user in my application. Below is the User.ts model: import { Schema } from 'mongoose&apo ...
I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...
My current situation involves using the AWS SDK, and I've noticed that many of its objects have members that can be undefined. Take for example S3.Object: export interface Object { /** * */ Key?: ObjectKey; /** * * ...
Currently working with Angular 2.0, I am trying to declare a variable in a Typescript file that is a list of string arrays. I attempted using yAxis_val: list, but it is not functioning correctly. If anyone knows the proper way to achieve this, please prov ...
While working on a tutorial using Ionic 2, I've encountered an issue where I cannot access an object property in the view. Here's an example: // TypeScript file export class MyClass { myObject: any; constructor() { } ionViewDidL ...
Can I utilize array.map in TypeScript to apply a function with the parameter being the key of an object within an array? I have an array containing objects which have keys 'min' and 'max'. I am looking to use something like someArrayFun ...
I am looking to organize my application by splitting it into separate node modules, with a main module responsible for building all other modules. Additionally, I plan to use TypeScript with ES6 modules. Below is the project structure I have in mind: ma ...
Essentially, I am looking to create a customized "Pair" data type For example: type Pair<T extends Record<string, string | number>, K extends keyof T> = { field: K, value: T[K] } So, if we have: type Rabbit = { name: string, a ...