Why is TypeScript not throwing an error for the following code, even though I would expect it to?
export interface Type1 {
command: number;
}
export interface Type2 {
children: string;
}
export type UnionType = Type1 | Type2;
export const unionType: UnionType = {
command: 34234,
children: [{ foo: 'qwerty' }, { asdf: 'zxcv' }],
};
Curious? Find out more here.
In the current state of Typescript, there is no concept of exact types apart from object literals (with a special exception explained later). This means that every object conforming to an interface can have additional properties that are not defined in the interface itself.
For example, consider this object:
{
command: 34234,
children: [{ foo: 'qwerty' }, { asdf: 'zxcv' }],
}
This object satisfies both the Type1 and Type2 interfaces because it contains all properties specified by each interface (command and children).
It's important to note that while exact typing is not supported for most cases, Typescript does enforce exact types for object literals only:
export const unionType: Type1 = {
command: 34234,
children: [{ foo: 'qwerty' }, { asdf: 'zxcv' }], // Will raise an error here
};
export const unionType: Type2 = {
command: 34234, // Will raise an error here
children: [{ foo: 'qwerty' }, { asdf: 'zxcv' }],
};
The code snippet above demonstrates how object literals are treated differently. In contrast, when dealing with variables instead of object literals, exact typing rules do not apply:
const someVar = {
command: 34234,
children: [{ foo: 'qwerty' }, { asdf: 'zxcv' }]
};
const: Type1 = someVar // This assignment is permitted since it involves a variable, not an object literal
When using the syntax
export type UnionType = Type1 | Type2;UnionType can be objects of either Type1 or Type2. However, it is important to note that this does not imply they cannot belong to both types simultaneously.
I'm encountering a challenge with button naming in my Angular SPA component that I'm currently developing. Background - On a page where a data table is displayed, there's a 'Select' control that allows users to choose which column ...
As a newcomer to Angular and RxJS, I am facing a challenge with handling social posts. For each post, I need to make a server call to retrieve the users who reacted to that post. The diagram linked below illustrates the process (the grey arrows represent r ...
I am trying to use PrismJS to highlight HTML code, but the inner text function doesn't recognize line breaks (\n). <pre class="language-markup background-code"><code [innerText]="getHtmlCode()""></code> I have been working wi ...
How can I perform a value-based search on a complex tree structure in TypeScript without encountering the maximum stack call exceeded error? I am attempting to navigate through an expandable tree using TypeScript, and I will provide the code snippet below ...
In the process of developing an Angular application, I am currently working on testing a component using this guide. My goal is to ensure that when my ngOnInit() method is called, it correctly initializes my foos property with an array of Foo objects based ...
Lately, I've delved into the realm of JavaScript / TypeScript and decided to create a basic React App using TypeScript. Within one of my components, I aim to switch between different components using a "state" (where each component will follow the pre ...
Being a beginner in TypeScript, I've noticed numerous examples demonstrating the use of Angular with TypeScript, all of which involve controller classes. As I delve deeper into it, I realize that I need to mention the injected services multiple times ...
I'm diving into the world of composition API in Vue and I'm uncertain if my approach is breaking any established patterns. I have a desire to initialize a variable directly within the composition file: GameLogic.ts export default function () { ...
Looking for assistance; Imagine I have an array of objects structured like so { 'Name:'ABC', 'Code': 'BP' } What is the most effective method to add an incremental attribute to this array in typescript. [{&apo ...
I have a function that returns an array of JSX Elements. When I pass this to ReactDOM.render, I encounter the error mentioned above. wrappers.tsx const FooterWithStore:React.FC = () => ( <Provider store={store}> <FooterLangWrapper ...
I am currently developing a car rental application as a personal project. Within the /vehicles route, there are lists of available vehicles. I have included 5 select inputs on the left sidebar for filtering purposes. My goal is to apply a filter when a v ...
I am in the process of creating a typed function that will utilize an object based on its key: const commandOrQuery = { CREATE_USER_WITH_PASSWORD: CreateUserCommandHandler, GET_USERS: GetUsersQueryHandler, }; The structure of commandOrQuery is as foll ...
My goal was to develop a versatile REST service that could be utilized across all my services. For instance, for handling POST requests, the following code snippet demonstrates how I implemented it: post<T>(relativeUrl: string, body?: any, params?: ...
Seeking assistance for the issue described below, as I have been struggling with it for three days. Any help would be greatly appreciated. Despite multiple attempts, the situation only seems to worsen with each try. The problem arises when attempting to ...
As a newcomer to Angular, I am facing an issue with saving data in a class and reading it into a component. It seems that the component is rushing to display results before the class has finished processing them, resulting in an error message being printed ...
When working inside a React component, I've created a function that gets triggered once the component is rendered: function getGlassesNames () { let outputArray:string[] = getGlassesOriginal(); console.log(outputArray); console.log(typeof ...
Consider a scenario where I have a function in my TypeScript API that interacts with a database. export const getClientByEmailOrId = async (data: { email: any, id: any }) => { return knex(tableName) .first() .modify((x: any) => { if ( ...
click here for image description check out this image info An issue arises as the module '@components/Sidebar' or its type declarations cannot be located.ts(2307) Various attempts were made, including: import Sidebar from '@components/Sid ...
I stumbled upon this unique code snippet that effectively maintains both forward and reverse references within an array: var arr = []; arr[arr['A'] = 0] = 'A'; arr[arr['B'] = 1] = 'B'; // When running on a node int ...
I am currently facing an issue with typing the value needed to be inserted into an object's property. Please refer below. interface SliceStateType { TrptLimit: number; TrptOffset: number; someString: string; someBool:boolean; } inter ...