TypeScript - Creating a custom function that extracts a segment of the given input

Question

TypeScript - Creating a custom function that extracts a segment of the given input

As a newcomer to Typescript, I am looking to create a function that can modify an object by filtering out certain information.

Consider the following Type definition:

type movie = {id: number, title:string, url:string, rating:number}

I need a function that takes an array of movies as input and outputs the same array but only with id and title included.

For example, if the input is:

[{id:1, title:Wonder Woman, url: www, rating:5},{id:2, title: Super Man, url:www2, rating:7}]

The desired output should be:

[{id:1, title:Wonder Woman},{id:2, title: Super Man}]

Are there any straightforward methods to achieve this?

arrays typescript types

Answer 1

Answer №1

To let TS know that you are dealing with only a portion of a type (referred to as a Partial), you can make use of the Partial<...> syntax.

type Movie = { id: string | number, name: string, url: string }

const movies: Movie[] = [
  { id: 1, name: "Movie A", url: "http://www.google.com" },
  { id: 2, name: "Movie B", url: "http://www.google.com" }
]

function stripUrl ({ id, name }: Movie): Partial<Movie> {
  return { id, name }
}

const mMovies = movies.map(stripUrl)

https://i.sstatic.net/81TZ7.png

Answer 2

To let TS know that you are dealing with only a portion of a type (referred to as a Partial), you can make use of the Partial<...> syntax.

type Movie = { id: string | number, name: string, url: string }

const movies: Movie[] = [
  { id: 1, name: "Movie A", url: "http://www.google.com" },
  { id: 2, name: "Movie B", url: "http://www.google.com" }
]

function stripUrl ({ id, name }: Movie): Partial<Movie> {
  return { id, name }
}

const mMovies = movies.map(stripUrl)

https://i.sstatic.net/81TZ7.png

TypeScript - Creating a custom function that extracts a segment of the given input

Answer №1

Similar questions

Using Angular and TypeScript to create an implementation of TodoMVC

Allow Visual Studio Code to create a constructor for Typescript class

Vue3 does not support parameter assignment

Error: Unable to iterate over the albumlist property as it is not a function

One way to display buttons only for the first row in a mat-table

How can you populate an observable with another observable and then return the resulting observable?

Discover the best practices for implementing services within the import decorator of an angular module configuration

How to display the content of a file using C programming

The 'isMounted' property is not found in the 'ErrorBoundary' type

The use of defaultProps is no longer supported, yet it is still featured in official documentation

The presence of this container with Mongoose Schema Typescript eclipses an external 'this' value

What causes the disappearance of my matrix values in C programming?

Definition of TypeScript array properties

Display the output from the print_r function in PHP

Verifying the Redux saga test plan's functionality by testing a reducer with a specific state branch

What is the best way to continuously add new elements to a dictionary within a loop?

Error occurs in Typescript when attempting to store data in a record using a pointer

How can I utilize npm with the original source code instead of minified or bundled code?

Running a loop to utilize data from an array of objects within a Protractor it() spec

Is `TypeDefinition for React v15.0` compatible with React v0.14.7?