typescript guide

typescript-guide.md

A typescript guide,

1. learn the primitive types ... number, string, etc. https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
2. Unions and Intersections https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html
3. Pick, Omit, Partial https://dev.to/glebirovich/5-typescript-utility-types-that-will-make-your-life-easier-i44
4. Typescript how to extract nested type:
   https://stackoverflow.com/questions/56779149/typescript-how-to-extract-nested-type
5. Learn ? - also ? is not the same as | undefined - but don't focus on this too much.
6. The "Top Level Type" is the most important type.
   Try to use the type the library gives you for free and get everything inferred from that point onward.
   If you get the Top Level Type wrong you will find that you are typing everything at a micro level and overtyping.

everything else will probably be too much early on.

Also generic types can be useful for functions and libraries that others consume; This is the simplest example of a generic I can think of:

export const func = <T>(value: T): T => {
  return value;
}

7. Infer the parameter types of MyFunction

// untested.
type MyFunction = (name: string, age: number) => void;
type MyFunctionParams = Parameters<MyFunction>; 
function processParams(params: MyFunctionParams) {}

(link how+to+infer+the+function+param+type)[https://www.google.com/search?q=typescript+how+to+infer+the+function+params+type&oq=typescript+how+to+infer+the+function+params+type+&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIKCAEQABiABBiiBDIKCAIQABiiBBiJBTIKCAMQABiABBiiBNIBCTE3NjkwajBqN6gCALACAA&sourceid=chrome&ie=UTF-8]

8. Infer props from a react component! (tested and this works)

import { Button } from "@mui/material"
const ButtonProps = React.ComponentProps<typeof Button>

// this is so useful because it saves you from importing exported types such as: import { ButtonProps } from "@mui/material"
// and saves you when they did not expose that type.

// generic type example
export const func = <T>(value: T): T & {foo: string, bar: string}  => {
  const foo = 'foo'
  const bar = 'bar'
  return {...value, foo, bar};
}

// usage:
interface Example {
  blah: string
}
const example: Example = { blah: 'test'}
const result = func<Example>(example)

/* Explanation: 
  Because you have told the func what type you will pass it
  the return type of the function is now `Example & {foo: string, bar: string}`
  so that would be the type of the result variable if we hovered over it in typescript.
*/