anthowave

Problem

How to extract the merged arguments of an array of functions? And also the merged results of those functions?

https://www.typescriptlang.org/play?#code/C4TwDgpgBAQghgZwgQQE4HMFQLxQN4C+AUKJLIhAEoRa6FFECWAdsBKgGZwDG0AYgEY0mKBAAebZgBMs8JMKx4iUKBwEA5OAFsIALigJgqFuiLEWbTj34DqWcZJnkkd-MtUD9h481PFSNjhQABRwGAj6ggoAlDgAfFCCdgwW7Fy8iQBMCqISENKyFDlKKhyZmjpeRiZmTKxp1lmuDvlOclQ0bqWZVT5+JOD8mUGh4ZHZ4bHYCXyZyQwBicy0UADaggA0WQC6DAD0ewYAFgD2AK4ANlJQAEZ6iULhUABkWQoDZACy7OgQUjm4AD8wKgRAOx3OV1u9ySnVes2Si2+GD+riBwKAA

(Source from https://twitter.com/flybayer/status/1316844216199372801)

Solution

anthowave

Create New App

JavaScript Template

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

anthowave

Package/library docs mostly come as static site.

Here are the list of useful SSGs(static site generator):

React

• Next.js
• Gatsby.js
• React-static

Vue

anthowave

const COUNTRY_CODES = {
  "US": "United of States",
  "CA": "Canada",
  "GB": "United Kingodm",
};

// type definition

type CountryCode = keyof typeof COUNTRY_CODES;    // equivalent to: type CountryCode = "US" | "CA" | "GB";
type CountryName = typeof COUNTRY_CODES[CountryCode]; // equivalent to: type CountryName = "United of States" | "Canada" | "United Kingdom";

anthowave

Codesandbox demo

anthowave

2019 update: this essay has been updated on my personal site, together with a followup on how to get started

2020 update: I'm now writing a book with updated versions of all these essays and 35 other chapters!!!!

1. Learn in public

If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.

You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos

anthowave

let [hasNextPage, setHasNextPage] = React.useState(true)

const { data } = useInfiniteQuery(key, (key, nextPage) => {
  const data = fetch('/api?page=' + nextPage)

  if (data.length) {
    return data
  } else {
    setHasNextPage(false)
    return []

anthowave

const debounce = <F extends (...args: any[]) => any>(
  func: F,
  waitFor: number,
) => {
  let timeout: NodeJS.Timeout;

  return (...args: Parameters<F>): Promise<ReturnType<F>> =>
    new Promise((resolve) => {
      if (timeout) {
        clearTimeout(timeout);

anthowave

{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",

anthowave

// Note: I write down only essential parts of the component, because the other part can make sense without itself.

import { useFilter } from 'hooks/useFilter.ts';
import debounce from 'lib/debounce';

function InputSearch({...} : InputSearchInterface) {

  // api - a search api wrapper that returns promise
  // useFilter - a custom react hook used for search (https://gist.github.com/anthowen/7309f9d54dcdeefcefab1e37a75d716c)
  const [{ results, isSearching }, doFilter] = useFilter<T>(api, null, []);