What is the process of transforming a basic JavaScript function into a TypeScript function?

Question

What is the process of transforming a basic JavaScript function into a TypeScript function?

As a Java developer diving into TypeScript for frontend development, I've encountered a simple JavaScript code snippet that I'd like to convert to TypeScript.

The original JavaScript code is:

let numbers = [123, 234, 345, 456, 567];
let names = ['Alex', 'Bree', 'Cara', 'Cole', 'Devon', 'Riley'];

let bigA = numbers.filter(function(item)) {
    return item > 300;
}

Now, here's the modified TypeScript version:

let numbers: number[] = [123, 234, 345, 456, 567];
let names: string[] = ['Alex', 'Bree', 'Cara', 'Cole', 'Devon', 'Riley'];

let big: number[] = numbers.filter(function(item)) {
    return item > 300;
}

However, an error regarding 'item' pops up: "Binding element 'item' implicitly has an 'any' type.ts(7031)", and I'm struggling to resolve it by simply adding return item: number > 300;.

I prefer not using the alternative syntax of

let big: number[] = numbers.filter((item) => item > 300);

If you have any insights on how to tackle this issue, I would greatly appreciate it. Thank you!

javascript typescript function

Answer 1

Answer №1

You seem to have misplaced the closing brackets in your code. Make sure they are at the end of the last line:

https://i.stack.imgur.com/PoKSL.png

Consider using this corrected version (Corrected code):

let numbers: number[] = [123, 234, 345, 456, 567];
let names: string[] = ['Alice', 'Bob', 'Charlie', 'David', 'Emma'];

let bigNumbers: number[] = numbers.filter(function(item: number){
    return item > 300;
})

Answer 2

You seem to have misplaced the closing brackets in your code. Make sure they are at the end of the last line:

https://i.stack.imgur.com/PoKSL.png

Consider using this corrected version (Corrected code):

let numbers: number[] = [123, 234, 345, 456, 567];
let names: string[] = ['Alice', 'Bob', 'Charlie', 'David', 'Emma'];

let bigNumbers: number[] = numbers.filter(function(item: number){
    return item > 300;
})

What is the process of transforming a basic JavaScript function into a TypeScript function?

Answer №1

Similar questions

assigning a numerical value to a variable

Locate a specific item by its ID within a JSON file utilizing Angular version 2 or later

Getting the width of children components in Reactjs can be achieved by using the

initiate a POST request using fetch(), where the data sent becomes the key of

Angular Datepicker MinDate function prevents selection of dates "behind" by one

Only match the character if it is not at the beginning of the line and if another character is not on the

knockout.js' $root leads to a page displaying nothing

Using Npm to install a module results in an abundance of files being provided

The performance of Jquery Animate is acting strangely after the upgrade to version 1.11

The steps to display a partial view within another view in React Native

Rearrange the position of one div to be placed next to another div and assign the float property

Transform js into a more dynamic format to avoid redundancy when displaying items upon click

How can I resolve the issue of TypeScript AngularJS component modal where the function this.$modalInstance.dismiss is not working?

How to Show Concealed Text in Material UI Multiline TextField and Obtain Unveiled Text

Creating an event listener with a dynamic name

The CSS hamburger menu halves in size when being closed

What is the process of converting an Array that is nested within an Object?

Creating an illustration with HTML5 from an image

Auto Suggest: How can I display all the attributes from a JSON object in the options list using material-ui (@mui) and emphasize the corresponding text in the selected option?

The Data from Req.Body Doesn't Appear After Adding Form Fields