Find a matching element in a list and move to first: A journey from a novice JavaScript to an elegant TypeScript solution

const users = [
{ firstName: 'Jane', lastName: 'Foo' },
{ firstName: 'John', lastName: 'Bar' },
{ firstName: 'Jill', lastName: 'Err' }
]
const users = [
{ firstName: 'John', lastName: 'Bar' },
{ firstName: 'Jane', lastName: 'Foo' },
{ firstName: 'Jill', lastName: 'Err' }
]

Step 1

$ node step1

Step 2

Step 3

Step 4

Step 5

Step 6

$ npm init -y
$ npm i typescript
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"rootDir": ".",
"moduleResolution": "node",
"outDir": "build",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
$ npm run build
$ node build/step6

Step 7

interface User {
firstName: string
lastName: string
}
interface Product{
name: string
description: string
price: number
}

Conclusion

--

--

--

Driven by passion and patience. Read my shorter posts https://dev.to/codeprototype (possibly duplicated from here but not always)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Two way data binding in LitElement

Browser Engines… Chromium, V8, Blink? Gecko? WebKit?

How to embed a web server inside desktop applications

MEAN Stack Development

Javascript Scope

Introduction to Node.js

Flickr Search a Coding Challenge — Using VueJs and TailwindCSS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Le

Kevin Le

Driven by passion and patience. Read my shorter posts https://dev.to/codeprototype (possibly duplicated from here but not always)

More from Medium

Dependency Injection in functional TypeScript and why you do not need it

An introduction to type programming in TypeScript — zhenghao

Everything about OOP in TypeScript 4.5

A practical guide to functional programming in javascript