Dealing with compilation errors in TypeScript

I'm working on a simple TypeScript program that looks like this - 

const users = [{ name: "Ahmed" }, { name: "Gemma" }, { name: "Jon" }];

// We're trying to find a user named "jon".
const jon = users.find(u => u.name === "jon");

However, when I try to compile the program, I encounter the following error - 

p2@6190:~/projects/typescript$ tsc functions.ts
functions.ts:4:19 - error TS2339: Property 'find' does not exist on type '{ name: string; }[]'.

4 const jon = users.find(u => u.name === "jon");
                    ~~~~


Found 1 error.

Despite the error, I can still see the output file being generated as functions.js.

var users = [{ name: "Ahmed" }, { name: "Gemma" }, { name: "Jon" }];
// We're going to look to see if we can find a user named "jon".
var jon = users.find(function (u) { return u.name === "jon"; });

From a JavaScript perspective, this seems like correct code.

Shouldn't TypeScript wait to generate the output until all errors are fixed?

typescript

Answer №1

Array.prototype.find was first introduced in the ES2015 version of JavaScript.

To properly utilize this method in TypeScript, you must specify that you are using ES2015. This can be done by setting the --lib compiler option. More information can be found in the TypeScript documentation.

In addition, you can configure the "lib" property in your tsconfig.json file like so:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "skipLibCheck": true,
    "lib": ["es2015"]
  }
}

Make sure to review each configuration in the documentation to have a clear understanding of what instructions are being given to the Compiler.

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

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

javascriptjquerycsstypescript

Updating an array within a dynamic form using patchValue in Angular 4

My dynamic form, inspired by the Angular documentation, includes a feature that allows users to load their saved forms. I have encountered an issue where I am able to patch the values of text fields and radio buttons successfully, but I am facing difficu ...

formsangulartypescriptionic-framework

Angular: Exploring the Dynamic Loading of a Component from a String Declaration

Is there a way to compile a component defined by a string and have it render in a template while still being able to bind the click event handler? I attempted to use DomSanitizer: this.sanitizer.bypassSecurityTrustHtml(parsedLinksString); However, this a ...

angulartypescriptangular-dynamic-components

Is it possible to use @ViewChild to target an element based on its class name?

The author of this article on Creating Advanced Components demonstrates selecting an element by creating a directive first: @Directive({ selector: '.tooltip-container' }) export class TooltipContainerDirective {} Then, the author uses this d ...

javascriptangulartypescript

Tips on how to effectively unit test error scenarios when creating a DOM element using Angular

I designed a feature to insert a canonical tag. Here is the code for the feature: createLinkForCanonicalURL(tagData) { try { if (!tagData) { return; } const link: HTMLLinkElement = this.dom.createElement('link'); ...

angulartypescriptjasmine

TypeScript class that utilizes internal functions to implement another class

In my journey of exploration, I decided to try implementing a class within another class in TypeScript. Here is the code snippet I came up with and tested on the Playground link: class A { private f() { console.log("f"); } public g() { console.lo ...

typescriptimplements

Setting the root directory and output directory can be a bit tricky when dealing with source code scattered across multiple folders. Here's

Utilizing TypeScript in my Node.js project, I previously had a directory structure that looked like this: node_modules src -Models -Routes -Middlewares -Controllers -index.ts package.json tsconfig.json In ...

node.jstypescript

Is it possible to showcase a variety of values in mat-select?

Is it possible to pass different values to the .ts file in each function? For example, can I emit a String with (selectionChange)="onChangeLogr($event)" and an object with (onSelectionChange)="onChangeLogr_($event)"? How would I go about doing this? ...

angulartypescript

Error: Jest + Typescript does not recognize the "describe" function

When setting up Jest with ts-jest, I encountered the error "ReferenceError: describe is not defined" during runtime. Check out this minimal example for more information: https://github.com/PFight/jest-ts-describe-not-defined-problem I'm not sure what ...

typescriptjestjs

Guide to making a Typescript interface by combining elements from two separate interfaces without utilizing inheritance

Programming Language: Typescript I am looking to combine the properties of two interfaces as the value of an indexable-type within a third interface. Interface 1: export interface Employee { id: string name: string } Interface 2: export interfa ...

javascripttypescriptinheritanceinterface

Error message: TypeScript encountered an unexpected token '`div`' when it was expecting a jsx identifier

While working on a website using nextjs-typescript and tailwindcss, I encountered an unusual error message Expression expected. The terminal also displayed the following: Unexpected token `div`. Expected jsx identifier const UseCases = () => { 7 ...

typescriptnext.jsreact-typescript

Exploring matching routes with Next.js + Jest

Issue with Unit Testing MenuItem Component Despite my efforts to achieve 100% coverage in my component unit tests, I have encountered an uncovered branch specifically within the MenuItem component. To offer more insight, here is the parent component that ...

reactjstypescriptunit-testingnext.jsts-jest

Unusual conduct exhibited by a 16th version Angular module?

I've created a unique component using Angular 16. It's responsible for displaying a red div with a message inside. import { ChangeDetectionStrategy, Component, Input, OnInit, } from "@angular/core"; import { MaintenanceMessage } ...

angulartypescript

Moving the marker does not update the address

When the dragend event is triggered, the Getaddress function will be called in the following code: Getaddress(LastLat, LastLng , marker,source){ this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+LastLat+ &apos ...

angulartypescriptionic2

What is the best way to create a memoized function in React?

I am currently developing an application using react and typescript, and I am facing a challenge in memoizing a function. const formatData = ( data: number[], gradientFill?: CanvasGradient ): Chart.ChartData => ({ labels: ["a", ...

reactjstypescript

Can you explain the use of parentheses in a typescript type when defining a key?

Could someone provide an instance of an object that matches the TypeScript type below? I'm a bit confused because I've only worked with interfaces before and have only seen square brackets. type Hash = { (data: Uint8Array): Uint8Array blockLe ...

typescript

What is the process for importing a map from an external JSON file?

I have a JSON file with the following configuration data: { "config1": { //this is like a map "a": [ "string1", "string2"], "b": [ "string1", "string2"] } } Previously, before transitioning to TypeScript, the code below worked: import ...

jsonreactjstypescript

Ways to stop dialog from disappearing in Reactjs

This code snippet demonstrates the implementation of a popup with buttons, where clicking the cancel button triggers a confirmation dialog. To make the popup disappear when clicked outside of it, the following event handling is employed: const popupRef = ...

reactjstypescriptreact-hookspopup

Issue: Module "mongodb" could not be found when using webpack and typescript

I am encountering an issue while trying to use mongoose with webpack. Even though I have installed it as a dependency, when attempting to utilize the mongoose object and execute commands, it gives me an error stating that it cannot find the "." Module. Thi ...

node.jstypescriptmongoosewebpack

Obtain the complete path in Vue router by utilizing nested routes

After creating nested routes for Vue Router, I encountered a problem while using the routes to generate a navigation menu. Currently, I am using route.path in 'router-link :to=' which only gives me a part of the path. I want to include the absolu ...

javascripttypescriptvue.jsvue-router