Building basic objects in TypeScript

My current project involves utilizing an interface for vehicles.

export interface Vehicle {
    IdNumber: number;    
    isNew: boolean;
    contact: { 
        firstName: string;
        lastName: string;
        cellPhoneNumber: number;            
    };
    color: string;
}

Within my component, I am importing this interface to use in the code.

 let car: Vehicle = {
      IdNumber: 1,
      isNew: true,
      contact: {
        firstName: 'John',
        lastName: 'Doe',
        cellPhoneNumber: 123,            
      },
      color: 'red',          
    };

However, when trying to compile this code, webpack is showing an error message:

Types of property 'contact' are incompatible.

Answer №1

There appear to be some mistakes:

Inconsistent property names:

isExisting vs isNew // please choose one...

Error in typing:

color: red // 'red' should be enclosed in quotation marks to denote it as a string

I hope this clarification helps...

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

Creating an Ajax Post request for API invocation

I'm currently setting up an Ajax Post request to interact with an API. Here is a mock curl command for reference: curl -X POST \ --header 'Content-Type: application/json' \ --header 'Accept: application/json' \ --h ...

Unable to access information through ajax when connecting to mysql database

Having a code that can add, edit, delete and view is good. When all the codes are put together in one file, it works fine. However, wanting to have it separately poses a problem with the "View" part. Despite trying to search for a solution, the functionali ...

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

Encountering a 405 Error While Trying to Detect Location in Angular 7

I encountered an error 405 (Method Not Allowed) when trying to detect the location. Service public fetchWeatherDataByCoordinates(coordinates: ICoordinates): void { console.log("problem here") this.selectedLocationId.next(this.currentCoordinates ...

Having trouble retrieving input field values with Angular.js

I am struggling to access the input field values in my Angular.js application. Below is the code snippet I am using: <div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon ndrftextwidth text-right" style="width:180px"& ...

Are there any @types available for browser extension objects that are interoperable?

I am in the process of developing a browser extension that would work seamlessly on Edge, Chrome, and Firefox by utilizing Typescript. After coming across an article discussing interoperable browser extensions, I stumbled upon a code snippet: window.brow ...

Send a variable from a next.js middleware to an API request

I've been attempting to pass a middleware variable to my API pages via "req" but have encountered some issues Even after trying to send the user token to pages using "req", it consistently returns null The middleware file in question is: pages/api/u ...

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

Only need one dot for the calculator to function properly. The current situation with multiple dots is causing confusion. I intend to address other aspects of the code later, but I'm currently struggling with this issue. function dec(d) { let ...

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

Asynchronous waiting waits not for async await

I'm currently working on a function that loops through an array and updates the model for each ID, then adds the result to another array. This is the code snippet I have: async function getSortedAnimals() { var i = 0; var sortedAnimals = []; id ...

Having trouble loading my app.js in Angular - Seeking help on Coursera!

I've followed the instructions provided thus far and inserted the HTML code accordingly. However, upon attempting to load the page, all I see is: The tabs: The Menu Appetizers Mains Desserts The description: image: dish.name , dish.name , dish.labe ...

Utilizing Vue.js to track and navigate through browsing history using the browser's

I'm currently working on an application using Vue and Laravel. Instead of relying on vue-router, Laravel is managing my routes. Within my parent component, I am dynamically loading components based on the state of an object in the data. One of the m ...

Refresh all color pickers with Bootstrap 4 Colorpicker - enforce the update of every color selector

Currently, I am utilizing the Bootstrap 4 color picker library which can be found at this link: In my code, I have defined color pickers that look like this: <div class="input-group cpicker"> <input type="text" class="form-control input-lg" ...

Combine the elements within the HEAD tag into a group

I am currently developing a dynamic page system using AJAX. Whenever a link is clicked, an AJAX call is made to retrieve data from the requested page. However, I have encountered an issue where certain data in the page file needs to be placed within the h ...

Having trouble with Next.js environment variables not being recognized in an axios patch request

Struggling with passing environment variables in Axios patch request const axios = require("axios"); export const handleSubmit = async (formValue, uniquePageName) => { await axios .patch(process.env.INTERNAL_RETAILER_CONFIG_UPDATE, formVal ...

The error message "Type 'null' cannot be assigned to type 'Element | DocumentFragment'" occurs when using Nextjs/React createPortal

I am completely new to typescript. Currently, I'm working on a project that has a lot of pre-configured react components in JavaScript files (.js). My task now is to convert everything to TypeScript (.tsx) without triggering any ESLint errors. Unfort ...

Struggling to integrate the Animejs library into my TypeScript and webpack project

Transitioning from ES5 to TypeScript and webpack, I decided to incorporate the Three.js library seamlessly. Alongside this, I wanted to utilize the Anime.js library for its impressive timeline animation features. However, my efforts yesterday were fraught ...

React Select Event Bug: Not firing on subsequent attempts

My select filter menu has 5 different options that work fine when the page loads or refreshes. However, when I try to continuously select an option, it does not filter the content as expected. Here is a snippet of the code: <div className="filter_ ...

The results from various <div> elements are displayed based on the selection made from the dropdown menu

<body> <label for="country">Country : </label> <select id="country"> <option>Please select</option> <option name="CountryRevenue">Revenue</option> <option name="CountryQuantity">Quantity ...

Exploring the Power of Nested *ngFor in Angular 2

I am struggling with passing indexes to a function where the first parameter (ii) is coming back as undefined. <div *ngFor="let tab of screen.data.tabs; let indexTab = i;"> <div *ngIf="tab.active"> <div *ngIf="tab.questions"&g ...