class Superhero {
name: string = ''
}
const superheroesList: Superhero[] = [];
const superheroesList2 = [] as Superhero[];
As I was exploring TypeScript, I stumbled upon these two distinct methods of declaring an array. This got me thinking whether it is simply a matter of syntax or if there is some deeper rationale that I am overlooking.
When you provide an example, you are essentially informing the compiler about the type of a variable at the time of its creation. The methods you illustrated are both valid and can be used interchangeably. However, the as operator is typically utilized within a code block to convert a variable from one type to another, as opposed to specifying the type during the variable declaration using :type.
Consider this pseudo code based on your Hero example:
function Y() : any {
return <something> // here, <something> represents an object known to be of type Hero, but the return type cannot be explicitly defined in the function signature due to external constraints
}
function performActions() {
if ((Y() as Hero).name == 'Frodo') {
print('The hero from LOTR has been located')
}
}
y
If you want to spot the distinction, take a look at this code snippet:
class Hero {
name: string = ''
}
// `hero` is specified with type `Hero`, causing an error due to `extra` not being part of `Hero`.
const hero: Hero = {name: '', extra: ''};
// The next declaration does not result in an error.
// Here, we are converting the object into type Hero.
// The object meets the requirements of the `Hero` type as it contains the necessary properties.
const hero2 = {name: '', extra: ''} as Hero;
Run example on TypeScript Playground
For further information, visit
Expressing the same concept in two different ways. When utilizing the as keyword, a type assertion is performed, like demonstrated here:
const heroes2 = [] as Hero[];
This instructs the compiler to create the heroes2 array and interpret it as a Hero type array. Alternatively,
const heroes: Hero[] = [];
is an explicit declaration, considered the standard practice. Ultimately, both methods are essentially just syntactic sugar, so use whichever one you find more readable.
My question relates to an interface. interface Some { key1: string key2: number } I am working with a function. const fn = (key: keyof Some) => { return <Some>someObject[key] } Is it possible to determine the return type based on a string ...
I am working on a C# backend with an HttpGet method that is expecting a dictionary as request parameters. public async Task<IActionResult> Search([BindRequired, FromQuery] IDictionary<string, object> pairs) Currently, my frontend is built in A ...
I'm currently utilizing graphql-code-generator to automatically generate TypeScript definitions from my GraphQL queries. I have a specific union within an array that I am trying to extract in TypeScript. Is this feasible? Although I came across an exa ...
Is there an efficient method in TypeScript to type a function that can recursively access object properties? The provided example delves two levels deep: function fetchNestedProperty<T, K extends keyof T>(obj: T, prop1: K, prop2: keyof T[K]) { r ...
Assume there is an interface defined as follows: export interface CMSData { id: number; url: string; htmlTag: string; importJSComponent: string; componentData: ComponentAttribute[]; } There is a method that returns an array of this obj ...
Having some trouble creating a type for an array with properties. Can't seem to figure out how to add typings to it, wondering if it's even possible. // Scale of font weights const fontWeights: FontWeights = [300, 400, 500]; // Font weight alia ...
I've been struggling to send a POST request to the server with form data using Observables, promises, and xmlhttprequest in the latest Angular with Ionic. It's driving me crazy because either I call the function right at the start and the POST wo ...
As part of a practice project where I'm focusing on using webpack, ES6, npm and Typescript implementation, I have successfully set up loaders for 'awesome-typescript-loader' and 'babel-loader', which are bundling the code properly. ...
Is there a way to remove the automatic padding added to new components in angular2? I am facing this issue with the header of my project, as shown in the image below: I attempted to eliminate the padding by setting it to 0 in styles.css file located outsi ...
Welcome In our project, we have implemented attributes support where each attribute acts as a class. These attributes include information on type, optionality, and name. Instead of creating an interface for every entity, my goal is to automate this proces ...
I am working with a mat-table and have used GET to display my data. I now want to sort the data in ascending order based on the db-nr from my JSON. Here is an excerpt from my JSON: { "period": 12.0, " ...
I'm currently developing a React application and I have come across an issue with importing images. My usual method of importing images is as follows: import image1Src from 'assets/img1.png"; For testing purposes, I need to be able to make ...
Encountering a familiar issue with what appears to be a simple fix. The Express Request object includes a user property that is specified as Express.User (an empty object). Attempting the common approach to redefining it: // index.d.ts import { User as P ...
Embarking on my very first pure front-end project, I decided to deploy it using Java/Maven. To begin, I set up a standard WAR project: │ package.json │ pom.xml │ tsconfig.json │ typings.json │ │ ├───src │ └───main ...
I'm currently working on implementing a Google Sign-in feature in an Angular application, but I'm encountering the following error: Cannot read property 'load' of undefined This was actually working perfectly just an hour ago, but n ...
In my code, I am attempting to create a generic function that abstracts my repository infrastructure for creating a where clause. export type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]>; } : T; export int ...
Is it possible to create an observable that combines two subjects in a unique way, different from the zip function? The goal is to combine two subjects so that when both have emitted values, the latest of their values is emitted. Then, after both emit at ...
I feel like I must be overlooking something. It seems too straightforward to be causing issues for me. Database.ts export class Database { id: number; } search-input.ts import { Database } from './../resources/database'; import { Inje ...
In an effort to break down the components of each step in mat-horizontal-stepper, I have included the following HTML code. <mat-horizontal-stepper [linear]="true" #stepper> <mat-step [stepControl]="selectAdvType"> <ng-template matStep ...
Let's take a look at an example of how to use setTimeout in Angular and TypeScript: let timer: number = setTimeout(() => { }, 2000); However, upon compilation, you may encounter the following error message: Error TS2322: Type 'Timeout' ...