Skip to content

Instantly share code, notes, and snippets.

@davidkpiano
Last active January 22, 2021 04:55
Show Gist options
  • Save davidkpiano/393b452c10a4652eaccdf9cd4c684298 to your computer and use it in GitHub Desktop.
Save davidkpiano/393b452c10a4652eaccdf9cd4c684298 to your computer and use it in GitHub Desktop.
TypeScript from 0 to 60
// No TypeScript
function add(a, b) {
return a + b;
}
// Type function arguments
// vvvvvv vvvvvv
function add(a: number, b: number) {
return a + b;
}
// Type return statement
// vvvvvv
function add(a: number, b: number): number {
return a + b;
}
// Accept number or string
// vvvvvvvvvvvvvvv vvvvvvvvvvvvvvv vvvvvvvvvvvvvvv
function add(a: number | string, b: number | string): number | string {
return a + b;
}
// That's a bit silly...
// a and b should both be numbers or strings, don't mix!
// Introduce a generic type T that represents number or string
//
// This will effectively result in:
// (a: number, b: number): number
// OR
// (a: string, b: string): string
// vvvvvvvvvvvvvvvvvvvvvvvvv
function add<T extends number | string>(a: T, b: T): T {
return a + b;
}
// Think of generic types (<T, Foo, Whatever>) as type variables!
// Return an object with the result
// vvvvvvvvvvvvv
function add<T extends number | string>(a: T, b: T): { result: T } {
return {
result: a + b
};
}
// Make that type "reusable"
// Notice how we're passing that generic type into the interface
interface ResultObject<T> {
result: T;
}
// vvvvvvvvvvvvvvv
function add<T extends number | string>(a: T, b: T): ResultObject<T> {
// The interface ensures that what we return fits the
// ResultObject<T> interface
return {
result: a + b
};
}
// Now you know enough to be dangerous ☢️
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment