Typescript Questions.md

Instructions

Create a fork of this codesandbox and make all tests pass.

https://codesandbox.io/s/ts-code-test-gb912

• You should edit src/index.tsx
• Codesandbox has an automatic test runner which should tell you when your solution is working.
• Firefox or Chrome are suggested, other browsers have been known to cause problems with the test runner in Codesandbox

If you have any questions, please send an email to adam.zmenak@d1g1t.com, and send the URL of your submission to this email when you are done.

Test One: Find an ID in a simple tree

Given a tree of items with the interface

interface TreeNode {
  id: number
  values: number[]
  children?: TreeNode[]
}

// Example
const items = [
  {id: 1, values: [100, 101]},
  {id: 2, values: [200, 201]},
  {id: 3, values: [300, 301], children: [
    {id: 10, values: [1000, 1001]},
    {id: 9, values: [900, 901]},
    {id: 8, values: [800, 801], children: [
      {id: 7, values: [700, 701]},
      {id: 6, values: [600, 601]}
    ]}
  ]}
]

Implement a method with following signature:

function findIdInTreeByValue(items: TreeNode[], value: number): number | undefined

// Example
findIdInTreeByValue(items, 601) // => 6

Test Two: Consecutive numbers in an array

Given an array of unsorted numbers, find the longest sequence of consective numbers in the array by implementing a method with the following signature:

function consecutiveNumbersLength(numbers: number[]): number

// example
consecutiveNumbersLength([8, 4, 2, 1, 6, 5]) // => 3 (4,5,6)
consecutiveNumbersLength([5, 5, 3, 1]) // => 1

Test Three: Highlight a text match

Implement a method which highlights the portion of text which matches a given substring (case-insensitive) by returning a ReactNode that wraps the matches in <strong> tags

function highlightMatch(text: string, subString: string): ReactNode

// Example
highlightMatch('Micheal Rosen', 'ros') // =>

// As JSX
<>
  Micheal <strong>Ros</strong>en
</>

// As an array of JSX
[
  <React.Fragment key={0}>Micheal </React.Fragment>,
  <strong key={1}>Ros</strong>,
  <React.Fragment key={2}>en</React.Fragment>
]