10 2022 档案
摘要:Given an array of unique elements, return all possible subsequences. A subsequence is a sequence that can be derived from an array by deleting some or
阅读全文
摘要:Given an array of strings, do Permutation & Combination. It's also useful for the prop types like video controlsList // expected to be `"foo" | "bar"
阅读全文
摘要:https://github.com/kentcdodds/react-testing-library-course/commit/1148e920b8d055d9ca9ef1c372e233d2e950ff1f User-event: https://testing-library.com/doc
阅读全文
摘要:Zod Example: number: import { expect, it } from "vitest"; import { z } from "zod"; const numberParser = z.number(); export const toString = (num: unkn
阅读全文
摘要:Sometimes we want to limit the range of numbers... For examples. type result = NumberRange<2 , 9> // | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 /* _____________
阅读全文
摘要:Construct a tuple with a given length. For example type result = ConstructTuple<2> // expect to be [unknown, unkonwn] /* _____________ Your Code Here
阅读全文
摘要:Implement MapTypes<T, R> which will transform types in object T to different types defined by type R which has the following structure type StringToNu
阅读全文
摘要:Implement the type version of Lodash.uniq, Unique takes an Array T, returns the Array T without repeated values. type Res = Unique<[1, 1, 2, 2, 3, 3]>
阅读全文
摘要:Implement the built-in Parameters generic without using it. For example: const foo = (arg1: string, arg2: number): void => {} type FunctionParamsType
阅读全文
摘要:Implement the type version of Array.unshift For example: type Result = Unshift<[1, 2], 0> // [0, 1, 2,] /* _____________ Your Code Here _____________
阅读全文
摘要:Implement the generic version of Array.push For example: type Result = Push<[1, 2], '3'> // [1, 2, '3'] /* _____________ Your Code Here _____________
阅读全文
摘要:Implement the type version of Array.lastIndexOf, LastIndexOf<T, U> takes an Array T, any U and returns the index of the last U in Array T For example:
阅读全文
摘要:Implement the type version of Array.join, Join<T, U> takes an Array T, string or number U and returns the Array T with U stitching up. type Res = Join
阅读全文
摘要:Implement the type version of Array.indexOf, indexOf<T, U> takes an Array T, any U and returns the index of the first U in Array T. type Res = IndexOf
阅读全文
摘要:Implement the type version of Math.trunc, which takes string or number and returns the integer part of a number by removing any fractional digits. For
阅读全文
摘要:Let's say we have a simple app look like this: import { useEffect, useState } from "react"; function useFetch(config) { console.log("useFetch call");
阅读全文
摘要:Implement the type version of Lodash.without, Without<T, U> takes an Array T, number or array U and returns an Array without the elements of U. type R
阅读全文
摘要:Implement TrimRight<T> which takes an exact string type and returns a new string with the whitespace ending removed. For example: type Trimed = TrimRi
阅读全文
摘要:Let say we have a simple counter app: import { useEffect, useState } from "react"; function useStopwatch() { const [count, setCount] = useState(0); us
阅读全文
摘要:import { interval, fromEvent, of, merge, empty } from 'rxjs'; import { scan, mapTo, takeWhile, takeUntil, tap, startWith, switchMap } from 'rxjs/opera
阅读全文
摘要:Fill, a common JavaScript function, now let us implement it with types. Fill<T, N, Start?, End?>, as you can see,Fill accepts four types of parameters
阅读全文
摘要:https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules Example for declare node.js "url" & "path" module: node.d.ts declare module
阅读全文
摘要:https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require When you export using `export = ` let numberRegexp = /^[0-9]+$/;
阅读全文
摘要:Do you know lodash? Chunk is a very useful function in it, now let's implement it. Chunk<T, N> accepts two required type parameters, the T must be a t
阅读全文
摘要:You might have some changes locally for 3rd party library. For the local implementation, you need to modify the types in order to resolve IDE issue. W
阅读全文
摘要:<!-- normal list --> <ul> <li>Here's a thing</li> <li>Another thing</li> <li>More things</li> <li><a href="#">A link in a thing</a></li> </ul> <!-- or
阅读全文
摘要:Implement a type IsTuple, which takes an input type T and returns whether T is tuple type. For example: type case1 = IsTuple<[number]> // true type ca
阅读全文
摘要:In This Challenge, You should implement a type Zip<T, U>, T and U must be Tuple type exp = Zip<[1, 2], [true, false]> // expected to be [[1, true], [2
阅读全文
摘要:Implement type AllCombinations<S> that return all combinations of strings which use characters from S at most once. For example: type AllCombinations_
阅读全文
摘要:In This Challenge, You should implement a type GreaterThan<T, U> like T > U Negative numbers do not need to be considered. For example GreaterThan<2,
阅读全文
摘要:// begin lesson code import { interval, fromEvent, of } from 'rxjs'; import { scan, mapTo, takeWhile, takeUntil, tap, startWith, endWith } from 'rxjs/
阅读全文
摘要:// begin lesson code import { fromEvent, partition } from 'rxjs'; import { filter, pluck } from 'rxjs/operators'; const MOVE_SPEED = 20; let leftPosit
阅读全文
摘要:const onDestroy$ = new Subject(); fromEvent(document, 'click').pipe( map((event: any) => ({ x: event.clientX, y: event.clientY })), takeUntil(onDestro
阅读全文
摘要:/* * From */ click$.pipe( mergeMapTo(throwError({ status: 400, message: 'Server error' }).pipe( retryWhen(attempts => { return attempts.pipe( mergeMap
阅读全文
摘要:You can do some really, really neat stuff with assertion functions inside classes. Here, we assert that the user is logged in and get proper inference
阅读全文
摘要:Implement a generic Fibonacci<T> that takes a number T and returns its corresponding Fibonacci number. The sequence starts: 1, 1, 2, 3, 5, 8, 13, 21,
阅读全文
摘要:Implement the type of just-flip-object. Examples: Flip<{ a: "x", b: "y", c: "z" }>; // {x: 'a', y: 'b', z: 'c'} Flip<{ a: 1, b: 2, c: 3 }>; // {1: 'a'
阅读全文
摘要:From T, pick a set of properties whose type are not assignable to U. For Example type OmitBoolean = OmitByType<{ name: string count: number isReadonly
阅读全文
摘要:Implement the type version of binary tree inorder traversal. For example: const tree1 = { val: 1, left: null, right: { val: 2, left: { val: 3, left: n
阅读全文
摘要:The Block, Element, Modifier methodology (BEM) is a popular naming convention for classes in CSS. For example, the block component would be represente
阅读全文
摘要:catchError will complete the observable, so be careful where you put the catchError: import { fromEvent, empty } from 'rxjs'; import { ajax } from 'rx
阅读全文
摘要:If you're thinking about putting a TypeScript package up to NPM, you should be considering preconstruct. It makes setup EXTREMELY easy and takes many
阅读全文
摘要:You can DRY up your generics code MASSIVELY (and improve perf) by assigning local variables to default generic slots. Here, we move some complex 'Extr
阅读全文
摘要:You can use generics to dynamically specify the number, and type, of arguments to functions. Here, we create a sendEvent function which only asks for
阅读全文
摘要:Maps values to a new observable on emission from source, subscribing to and emitting results of inner observables By default mergeMap does not limit t
阅读全文
摘要:Recursively flatten array up to depth times. For example: type a = FlattenDepth<[1, 2, [3, 4], [[[5]]]], 2> // [1, 2, 3, 4, [5]]. flattern 2 times typ
阅读全文
摘要:const input$ = fromEvent(textInput, 'keyup'); input$.pipe( map(event => { const term = event.target.value; return ajax.getJSON(`https://api.github.com
阅读全文
摘要:Calling .unsubscribe()will NOT trigger completecallback! const sub = interval(1000).subscribe({ next: (val: any) => { counter.innerHTML = val; }, comp
阅读全文
摘要:Accessing object values and array members is MUCH more powerful in the type world than it is in the runtime world. Passing a union... RETURNS a union!
阅读全文
摘要:Implement the type version of lodash's _.flip. Type FlipArguments<T> requires function type T and returns a new function type which has the same retur
阅读全文
摘要:Implement the type version of Array.reverse For example: type a = Reverse<['a', 'b']> // ['b', 'a'] type b = Reverse<['a', 'b', 'c']> // ['c', 'b', 'a
阅读全文
摘要:Must have Configure Jest to Run Setup for All Tests with Jest setupFilesAfterEnv We want to include '@testing-library/jest-dom'so that we can have suc
阅读全文
摘要:This one little tip has saved me hours of refactoring time. Passing string | undefined instead of ?: string ensures that ALL call sites must be given
阅读全文
摘要:The "noUncheckedIndexedAccess" is the most awesome config option you've never heard of. It makes accessing objects a lot safer, and also powers up Typ
阅读全文
摘要:Mapping over a union type can feel tricky to conceptualise. But actually, TypeScript does it all for you - using Distributive Conditional Types. Here,
阅读全文
摘要:Globals in TypeScript?! 🤯 declare global is a super useful tool for when you want to allow types to cross module boundaries. Here, we create a Global
阅读全文
摘要:Given a tuple type T that only contains string type, and a type U, build an object recursively. type a = TupleToNestedObject<['a'], string> // {a: str
阅读全文
摘要:Implement the type version of Array.shift For example type Result = Shift<[3, 2, 1]> // [2, 1] /* _____________ Your Code Here _____________ */ type S
阅读全文
摘要:const { of } = require("rxjs"); const { mergeMap, map, delay, catchError } = require("rxjs/operators"); describe("subscribe & assert testing in RxJS",
阅读全文
摘要:Implement the type version of Object.entries For example interface Model { name: string; age: number; locations: string[] | null; } type modelEntries
阅读全文
摘要:Implement the generic Mutable<T> which makes all properties in T mutable (not readonly). For example interface Todo { readonly title: string readonly
阅读全文
摘要:Want to turn a module into a type? You can use typeof import('./') to grab the type of any module, even third-party ones. Here, we create a type from
阅读全文
摘要:For example we have a search input: const input$ = fromEvent(document.getElementById("#input"), "input"); input$ .pipe( debounceTime(200), pluck("targ
阅读全文
摘要:const { TestScheduler } = require("rxjs/testing"); const { map, take, delay, mapTo, catchError } = require("rxjs/operators"); const { concat, from, of
阅读全文
摘要:describe("Marble testing in Rxjs", () => { let testScheduler; beforeEach(() => { testScheduler = new TestScheduler((actual, expected) => { expect(actu
阅读全文
摘要:const { TestScheduler } = require("rxjs/testing"); const { map, take, delay, mapTo, catchError } = require("rxjs/operators"); const { concat, from, of
阅读全文
摘要:Implement a generic RequiredByKeys<T, K> which takes two type argument T and K. K specify the set of properties of T that should set to be required. W
阅读全文
摘要:Implement a generic PartialByKeys<T, K> which takes two type argument T and K. K specify the set of properties of T that should set to be optional. Wh
阅读全文
摘要:https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API const app = document.getElementById('app'); app.innerHTML = ` <h1>JavaScript HTML5 APIs
阅读全文
摘要:Implement EndsWith<T, U> which takes two exact string types and returns whether T ends with U For example: type a = EndsWith<'abc', 'bc'> // expected
阅读全文
摘要:Implement StartsWith<T, U> which takes two exact string types and returns whether T starts with U For example type a = StartsWith<'abc', 'ac'> // expe
阅读全文
摘要:From T, pick a set of properties whose type are assignable to U. For Example type OnlyBoolean = PickByType<{ name: string count: number isReadonly: bo
阅读全文
摘要:You cannot create a instance of abstract class. An abstract class mean to be extended. abstract class Size { constructor(public sizes: string[]) {} se
阅读全文
摘要:auditTime: import { fromEvent } from 'rxjs'; import { auditTime, map } from 'rxjs/operators'; const click$ = fromEvent(document, 'click'); click$ .pip
阅读全文
摘要:SampleTime If there is no value emiited between sample time and previous emited value, ouput won't have anything. import { fromEvent, interval } from
阅读全文
摘要:const { TestScheduler } = require("rxjs/testing"); const { map, take, delay } = require("rxjs/operators"); const { concat, from } = require("rxjs"); d
阅读全文
摘要:const { TestScheduler } = require("rxjs/testing"); const { map, take } = require("rxjs/operators"); const { concat, from } = require("rxjs"); describe
阅读全文
摘要:const { TestScheduler } = require("rxjs/testing"); const { map, take } = require("rxjs/operators"); const { concat } = require("rxjs"); describe("Marb
阅读全文
摘要:const { TestScheduler } = require("rxjs/testing"); const { map } = require("rxjs/operators"); const { concat } = require("rxjs"); describe("Marble tes
阅读全文
摘要:For example there is a clas: export class ModifierState { /** * Returns the modifier state applicable to the keyboard event given. * @param event The
阅读全文
摘要:export type PickValue<T extends object, K = keyof T> = K extends keyof T ? T[K] : never; interface Person { name: string; address: { postcode: string;
阅读全文
摘要:AtomFamily For example, you have list of elements. We want to avoid that single elemenet got changed, whole list got re-render. Also want to share the
阅读全文
摘要:Using cache class to reduce API calls import {Button} from '@chakra-ui/button' import {Input} from '@chakra-ui/input' import {Box, Divider, Heading, V
阅读全文
摘要:interface: export type ElementStyle = { position: {top: number; left: number} size: {width: number; height: number} } export type Element = {style: El
阅读全文
摘要:import {ErrorBoundary, FallbackProps} from 'react-error-boundary' const userState = selectorFamily({ key: 'user', get: (userId: number) => async () =>
阅读全文
摘要:Ever wanted just a bit of autocomplete? Here, we create a TypeScript helper called LooseAutocomplete which gives us autocomplete while also allowing a
阅读全文
摘要:Deep partials are SUPER useful and not natively supported by TypeScript. Here, I use one to help with mocking an entity in a (imaginary) test file. ty
阅读全文
摘要:You can throw detailed error messages for type checks. Here, I move a runtime check in a function to the type level, meaning you get a detailed error
阅读全文
摘要:By default, throttleTime(x), after first event emit, then wait for x amount of time, then emit another latest value. All the values between the waitin
阅读全文
摘要:You're given a non-empty array of positive integers where each integer represents the maximum number of steps you can take forward in the array. For e
阅读全文
摘要:Just for fun... Given a number (always positive) as a type. Your type should return the number decreased by one. For example: type Zero = MinusOne<1>
阅读全文
摘要:You can use generics in React to make incredibly dynamic, flexible components. Here, I make a Table component with a generic 'items' type. interface T
阅读全文
摘要:Drop a specified char from a string. For example: type Butterfly = DropChar<' b u t t e r f l y ! ', ' '> // 'butterfly!' /* _____________ Your Code H
阅读全文
摘要:Implement PercentageParser. According to the /^(\+|\-)?(\d*)?(\%)?$/ regularity to match T and get three matches. The structure should be: [plus or mi
阅读全文
摘要:asapScheduleris similar to queueMicroTask()and Promise. AsapScheduler lets you schedule work on the microtask queue, executing task as soon as possibl
阅读全文
摘要:Implement RemoveIndexSignature<T> , exclude the index signature from object types. For example: type Foo = { [key: string]: any; foo(): void; } type A
阅读全文
摘要:The looseness of Object.keys can be a real pain point when using TypeScript. Luckily, it's pretty simple to create a tighter version using generics an
阅读全文
摘要:Type helpers change the game when it comes to types in your codebase. They help TypeScript infer more from your code - and make your types a lot more
阅读全文
摘要:export const getDeepValue = <Obj, FirstKey extends keyof Obj, SecondKey extends keyof Obj[FirstKey]>( obj: Obj, firstKey: FirstKey, secondKey: SecondK
阅读全文
摘要:// begin lesson code import { fromEvent } from 'rxjs'; import { map } from 'rxjs/operators'; /* * Calculate progress based on scroll position */ funct
阅读全文
摘要:The asyncScheduler lets you schedule tasks asynchronously, similar to a setTimeout. All schedulers have a signature of work, delay, state, but provdin
阅读全文
摘要:Provide application level module in bootstrapApplication bootstrapApplication(AppComp, { providers: [ importProvidersFrom(HttpClinetModule) ] }) //BAD
阅读全文
摘要:Write a function that takes in a non-empty array of integers and returns the maximum sum that can be obtained by summing up all of the integers in a n
阅读全文