more on useless generics 🌹

Author: Basarat Ali Syed

code/types/generics.ts

@@ -17,8 +17,8 @@ module aaa {
 module bbb {
  class QueueNumber {
  private data = [];
- push = (item:number) => this.data.push(item);
- pop = ():number => this.data.shift();
+ push = (item: number) => this.data.push(item);
+ pop = (): number => this.data.shift();
  }
 
  const queue = new QueueNumber();
@@ -32,8 +32,8 @@ module ccc {
  /** A class definition with a generic parameter */
  class Queue<T> {
  private data = [];
- push = (item:T) => this.data.push(item);
- pop = ():T => this.data.shift();
+ push = (item: T) => this.data.push(item);
+ pop = (): T => this.data.shift();
  }
 
  /** Again sample usage */
@@ -43,3 +43,29 @@ module ccc {
 
  // ^ if that error is fixed the rest would be fine too
 }
+
+namespace ddd {
+ const getJSON = <T>(config: {
+ url: string,
+ headers?: { [key: string]: string },
+ }): Promise<T> => {
+ const fetchConfig = ({
+ method: 'GET',
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ ...(config.headers || {})
+ });
+ return fetch(config.url, fetchConfig)
+ .then<T>(response => response.json());
+ }
+
+ type LoadUsersResponse = {
+ users: {
+ name: string;
+ email: string;
+ }[];
+ };
+ function loadUsers() {
+ return getJSON<LoadUsersResponse>({ url: 'https://example.com/users' });
+ }
+}

docs/types/generics.md

@@ -176,3 +176,39 @@ This is just an example, if you are considering on using this `require` typings
 
 1. It's already there in `node.d.ts` you can install using `npm install @types/node --save-dev`.
 1. You should consider using the type definitions for your library e.g. for jquery `npm install @types/jquery --save-dev` instead of using raw `require`.
+
+### Caveat: Use generics to make it easier to annotate
+
+The previous example of `require<T>` was intentionally meant to make clear the fact that generics used *only once* are no better than an assertion in terms of type safety. That said they do provide *convenience* to your API.
+
+An example is a function that loads a json response. It returns a promise of *whatever type you pass in*:
+```ts
+const getJSON = <T>(config: {
+ url: string,
+ headers?: { [key: string]: string },
+ }): Promise<T> => {
+ const fetchConfig = ({
+ method: 'GET',
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ ...(config.headers || {})
+ });
+ return fetch(config.url, fetchConfig)
+ .then<T>(response => response.json());
+ }
+```
+Note that you still have to explicitly annotate what you want, but the `getJSON<T>` signature `(config) => Promise<T>` saves you a few key strokes:
+
+```ts
+type LoadUsersResponse = {
+ users: {
+ name: string;
+ email: string;
+ }[];
+}
+function loadUsers() {
+ return getJSON<LoadUsersResponse>({ url: 'https://example.com/users' });
+}
+```
+
+Also `Promise<T>` as a return value is definitely better than alternatives like `Promise<any>`.