Create an array interface to begin

According to the information provided in the Handbook, it is possible to define a custom array interface with either string or number index:

interface StringArray {
    [index: number]: string;
}

To demonstrate this concept, I created the following interface:

interface EventRegistrations {
    [index:string]:ListenerEntry[];
}

The issue at hand is fairly straightforward: how does one initialize such a structure?

Below are my attempts, along with the corresponding error messages (I am using PhpStorm 2016.1 with tsc 1.8.7):

foo:EventRegistrations = [];

Type 'undefined[]' is not compatible with type 'EventRegistrations'

foo:EventRegistrations = [[]];

Type 'undefined[][]' is not compatible with type 'EventRegistrations'

foo:EventRegistrations = [index:string]:ListenerEntry[];

Syntax error (expected , instead of the first :)

foo:EventRegistrations = [string]:ListenerEntry[];

Syntax error (expected ; instead of the second :)

foo:EventRegistrations = new EventRegistrations();

Syntax error (unable to locate name 'EventRegistrations')

typescript

Answer №1

When looking at this specific scenario, it's important to note that you are not establishing an array [], but rather a dictionary {}. This is because when string indexers are utilized for lookup, it resembles dictionary style functioning.

In the excerpt given below, you can observe that the entity is specified utilizing {} instead of []. This is due to the fact that in the realm of JavaScript, all entities are regarded as dictionaries (including arrays!). Arrays possess unique semantics and a length attribute which enables them to behave akin to arrays (numerically indexed)

interface ListenerInfo {
    name: string;
    age: number;
}

interface EventData {
    [index:string]:ListenerInfo[];
}

var eventX: EventData = {};

eventX["A"][0].name = "Sam";
eventX["B"][1].age = 30;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular doesn't properly update Highcharts

Currently, I am facing an issue with updating my Highcharts chart dynamically based on an observable configuration in an Angular component. I have implemented an observable with ngIf as shown below: <highcharts-chart *ngIf="conf | async as option ...

angulartypescriptchartshighcharts

The Node.js express seems to be unable to fetch the css and js files

Sharing my main.ts file in which I am facing issues with linking my css and js files. view image import express from 'express'; import {Request,Response} from 'express'; import expressSession from 'express-session'; import pat ...

javascripttypescriptexpress

Enhance your text in TextInput by incorporating newline characters with advanced editing features

I'm encountering an issue with my Textarea component that handles Markdown headers: type TextareaProps = { initValue: string; style?: StyleProp<TextStyle>; onChange?: (value: string) => void; }; type OnChangeFun = NativeSynthetic ...

javascripttypescriptreact-native

Convert information into an Observable

I have a scenario where I am fetching a list of items from an Observable in my Angular service. Each item contains an array of subjects, and for each subject, I need to make a separate API call to retrieve its details such as name, description, etc. Data ...

javascriptangulartypescriptrxjsobservable

Arranging Alphanumeric Characters in Typescript

Given input -> const s = ['2.1.1.a', '2.1.a', '2.1.1.d', 'A2.2', 'A2.1', 2.1.1.c', '2.1.b', '2.1.1.b'] Expected output after sorting -> const s = ['2.1.a', '2. ...

javascriptangulartypescript

The specified property 'length' is not found on type OkPacket within the mysql2 module

In my code example below, I am simply showcasing a specific scenario: this.getCode = (code: string): Promise<codeObject | false> => { return new Promise((resolve, reject) => { pool.query('SELECT * FROM ?? WHERE code = ...

javascriptnode.jstypescriptnode-mysql2

Update the names of the output fields within the returned object from the API

Recently I delved into nodejs and typescript to create an API using express. I attempted to return a custom object in my API structured as follows: export class Auction { private _currentPrice:number = 0; private _auctionName:string; public ...

node.jstypescriptexpress

Error: Unable to convert null or undefined to an object | NextAuth

Recently, I've been attempting to implement a SignIn feature with Nextauth using the following code: import { getProviders, signIn as SignIntoProvider} from "next-auth/react"; function signIn({ providers }) { return ( <> ...

reactjstypescriptnext.jsnext-auth

Can a monorepo be organized into multiple levels? (Question regarding tooling and structure)

Currently in the process of researching how to transition my repositories into a monorepo and further segment the codebase by early 2023. I am utilizing TypeScript I have multiple servers that I plan to break down into microservices for easier development ...

typescriptbuildmicroservicesvitemonorepo

How can one correctly cast or convert an array of objects to the interface that extends the objects' parent interface in Typescript?

Question: How can I optimize the usage of method sendItemIdsOverBroadcastChannel to reduce message size? interface IItemId { id: number; classId: number; } interface IItem extends IItemId { longString: string; anotherLongString: string } inte ...

typescript

Bars of varying heights (Google Chart)

I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars i ...

htmlcssangulartypescriptgoogle-visualization

Uncovering the Full Scope of a LinkedIn Profile with Typescript

Hello, I am currently in the process of developing an Ionic2 framework app that includes social login functionality. Up to this point, I have successfully integrated Google Plus and Facebook buttons. Now, I would like to add LinkedIn login as well. The c ...

restangulartypescriptionic2linkedin-api

Generating automatic generic types in Typescript without needing to explicitly declare the type

In the scenario where I have an interface containing two functions - one that returns a value, and another that uses the type of that value in the same interface - generics were initially used. However, every time a new object was created, the type had to ...

typescripttypescript-generics

Using Typescript: Passing the name of a subclass as a parameter to a function

Below is the simplified code snippet that I am working with: class Component { } class CameraComponent extends Component { foo: number; constructor(bar: number) { super() } } function doSomething(klass: typeof Component) { } doSo ...

typescriptclassinheritanceconstructor

The consequences of exporting raw .ts files instead of .d.ts files for module type declarations

In a typical TypeScript module, you will find a 'src' directory containing TypeScript source code files. The module compiles these sources using 'tsc -d --outDir dist' to create the 'dist' directory and sets specific package m ...

typescript

What is the best way to invoke a function only once in typescript?

Struggling to implement TypeScript in React Native for fetching an API on screen load? I've been facing a tough time with it, especially when trying to call the function only once without using timeouts. Here's my current approach, but it's ...

javascriptreactjstypescriptreact-nativeexpo

What is the best way to retrieve props for computed properties using Vue with Typescript?

Seeking help on accessing props data for my computed property. Here is the code snippet: <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { color: String, shape: String, ...

typescriptvue.js

Angular - developing a custom web element to enhance the project

Is there a way to convert a single module into a web component and integrate it within the same project? Specifically, I have 3 modules in my project and I am looking to transform only module1 into a web component and incorporate it seamlessly. Thank you! ...

javascripthtmlangulartypescriptweb-component

Is there a way to tally up the overall count of digits in a number using TypeScript?

Creating a number variable named temp in TypeScript: temp: number = 0.123; Is there a way to determine the total count of digits in a number (in this case, it's 3)? ...

javascriptangulartypescript

the nodejs app cannot be launched as the port is already being utilized

I've encountered an issue while trying to run my nodejs app. It's displaying an error indicating that the port is already in use. I've made several attempts to resolve this problem by restarting the application. Error: listen EADDRINUSE: a ...

javascriptnode.jstypescriptport