Add types and tslint

Author: xg-wang

.eslintrc.js

@@ -13,6 +13,16 @@ module.exports = {
     'no-console': ["error", { allow: ['warn'] }]
   },
   overrides: [
+    // TypeScript files
+    {
+      files: ['addon/**/*.ts'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint'],
+      rules: {
+        'no-undef': 'off',
+        'no-unused-var': 'off'
+      }
+    },
     // node files
     {
       files: [

addon/mixins/adapter-fetch.ts

@@ -1,45 +1,65 @@
 import Mixin from '@ember/object/mixin';
-import { assign } from '@ember/polyfills'
-import RSVP from 'rsvp';
+import { assign } from '@ember/polyfills';
+import RSVP, { reject } from 'rsvp';
 import fetch from 'fetch';
 import mungOptionsForFetch from '../utils/mung-options-for-fetch';
 import determineBodyPromise from '../utils/determine-body-promise';
+import DS from 'ember-data';
+import Mix from '@ember/polyfills/types';
+import { get } from '@ember/object';
+import {
+  PlainObject,
+  PlainHeaders,
+  Method,
+  FetchOptions,
+  Nullable
+} from 'ember-fetch/types';
 
 /**
  * Helper function to create a plain object from the response's Headers.
  * Consumed by the adapter's `handleResponse`.
- * @param {Headers} headers
- * @returns {Object}
  */
-export function headersToObject(headers) {
-  let headersObject = {};
+export function headersToObject(headers: Headers): PlainObject {
+  let headersObject: PlainObject = {};
 
   if (headers) {
-    headers.forEach((value, key) => headersObject[key] = value);
+    headers.forEach((value, key) => (headersObject[key] = value));
   }
 
   return headersObject;
 }
 
 export default Mixin.create({
   /**
-   * @param {String} url
-   * @param {String} type
-   * @param {Object} _options
-   * @returns {Object}
+   * @property {PlainHeaders} headers
+   * @public
+   */
+  headers: undefined,
+
+  /**
    * @override
- */
-  ajaxOptions(url, type, options = {}) {
+   */
+  ajaxOptions(
+    url: string,
+    type: Method,
+    options: JQueryAjaxSettings = {}
+  ): FetchOptions {
     options.url = url;
     options.type = type;
 
     // Add headers set on the Adapter
-    let adapterHeaders = this.get('headers');
+    let adapterHeaders = get(this, 'headers');
     if (adapterHeaders) {
-      options.headers = assign(options.headers || {}, adapterHeaders);
+      options.headers = assign(
+        options.headers || {},
+        adapterHeaders as PlainHeaders
+      );
     }
 
-    const mungedOptions = mungOptionsForFetch(options);
+    const mungedOptions = mungOptionsForFetch(options as Mix<
+      JQueryAjaxSettings,
+      { url: string; type: Method }
+    >);
 
     // Mimics the default behavior in Ember Data's `ajaxOptions`, namely to set the
     // 'Content-Type' header to application/json if it is not a GET request and it has a body.
@@ -60,65 +80,73 @@ export default Mixin.create({
   },
 
   /**
-   * @param {String} url
-   * @param {String} type
-   * @param {Object} options
    * @override
    */
-  ajax(url, type, options) {
+  ajax(url: string, type: Method, options: object) {
     const requestData = {
       url,
-      method: type,
+      method: type
     };
 
     const hash = this.ajaxOptions(url, type, options);
 
-    return this._ajaxRequest(hash)
-      .catch((error, response, requestData) => {
-        throw this.ajaxError(this, response, null, requestData, error);
-      })
-      .then((response) => {
-        return RSVP.hash({
-          response,
-          payload: determineBodyPromise(response, requestData)
-        });
-      })
-      .then(({ response, payload }) => {
-        if (response.ok) {
-          return this.ajaxSuccess(this, response, payload, requestData);
-        } else {
-          throw this.ajaxError(this, response, payload, requestData);
-        }
-      });
+    return (
+      this._ajaxRequest(hash)
+        // @ts-ignore
+        .catch((error, response, requestData) => {
+          throw this.ajaxError(this, response, null, requestData, error);
+        })
+        .then((response: Response) => {
+          return RSVP.hash({
+            response,
+            payload: determineBodyPromise(response, requestData)
+          });
+        })
+        .then(
+          ({
+            response,
+            payload
+          }: {
+            response: Response;
+            payload: string | object | undefined;
+          }) => {
+            if (response.ok) {
+              return this.ajaxSuccess(this, response, payload, requestData);
+            } else {
+              throw this.ajaxError(this, response, payload, requestData);
+            }
+          }
+        )
+    );
   },
 
   /**
    * Overrides the `_ajaxRequest` method to use `fetch` instead of jQuery.ajax
-   * @param {Object} options
    * @override
    */
-  _ajaxRequest(options) {
+  _ajaxRequest(
+    options: Mix<RequestInit, { url: string }>
+  ): RSVP.Promise<Response> {
     return this._fetchRequest(options.url, options);
   },
 
   /**
    * A hook into where `fetch` is called.
    * Useful if you want to override this behavior, for example to multiplex requests.
-   * @param {String} url
-   * @param {Object} options
    */
-  _fetchRequest(url, options) {
+  _fetchRequest(url: string, options: RequestInit): RSVP.Promise<Response> {
     return fetch(url, options);
   },
 
   /**
-   * @param {Object} adapter
-   * @param {Object} response
-   * @param {Object} payload
-   * @param {Object} requestData
    * @override
    */
-  ajaxSuccess(adapter, response, payload, requestData) {
+  ajaxSuccess(
+    adapter: any,
+    response: Response,
+    payload: Nullable<string | object>,
+    requestData: { url: string; method: string }
+  ): object | DS.AdapterError | RSVP.Promise<never> {
     const returnResponse = adapter.handleResponse(
       response.status,
       headersToObject(response.headers),
@@ -127,36 +155,40 @@ export default Mixin.create({
     );
 
     if (returnResponse && returnResponse.isAdapterError) {
-      return RSVP.Promise.reject(returnResponse);
+      return reject(returnResponse);
     } else {
       return returnResponse;
     }
   },
 
-
   /**
    * Allows for the error to be selected from either the
    * response object, or the response data.
-   * @param {Object} response
-   * @param {Object} payload
    */
-  parseFetchResponseForError(response, payload) {
+  parseFetchResponseForError(
+    response: Response,
+    payload: object | string
+  ): object | string {
     return payload || response.statusText;
   },
 
   /**
-   * @param {Object} adapter
-   * @param {Object} response
-   * @param {String|Object} payload
-   * @param {Object} requestData
-   * @param {Error} error
    * @override
    */
-  ajaxError(adapter, response, payload, requestData, error) {
+  ajaxError(
+    adapter: any,
+    response: Response,
+    payload: Nullable<string | object>,
+    requestData: object,
+    error?: Error
+  ): Error | object | DS.AdapterError {
     if (error) {
       return error;
     } else {
-      const parsedResponse = adapter.parseFetchResponseForError(response, payload);
+      const parsedResponse = adapter.parseFetchResponseForError(
+        response,
+        payload
+      );
       return adapter.handleResponse(
         response.status,
         headersToObject(response.headers),

addon/types.ts

@@ -0,0 +1,25 @@
+import Mix from '@ember/polyfills/types';
+
+export type Nullable<T> = T | null | undefined;
+
+export interface PlainObject {
+  [key: string]: string | PlainObject | PlainObject[];
+}
+
+export interface PlainHeaders {
+  [key: string]: string | undefined | null;
+}
+
+export type Method =
+  | 'HEAD'
+  | 'GET'
+  | 'POST'
+  | 'PUT'
+  | 'PATCH'
+  | 'DELETE'
+  | 'OPTIONS';
+
+export type FetchOptions = Mix<
+  JQueryAjaxSettings,
+  { body?: BodyInit | null; url: string; method: Method }
+>;

addon/utils/determine-body-promise.ts

@@ -2,25 +2,29 @@
  * Function that always attempts to parse the response as json, and if an error is thrown,
  * returns `undefined` if the response is successful and has a status code of 204 (No Content),
  * or 205 (Reset Content) or if the request method was 'HEAD', and the plain payload otherwise.
- * @param {Response} response
- * @param {Object} requestData
- * @returns {Promise}
  */
-export default function determineBodyPromise(response, requestData) {
+export default function determineBodyPromise(
+  response: Response,
+  requestData: JQueryAjaxSettings
+): Promise<object | string | undefined> {
   return response.text().then(function(payload) {
+    let ret: string | object | undefined = payload;
     try {
-      payload = JSON.parse(payload);
-    } catch(error) {
+      ret = JSON.parse(payload);
+    } catch (error) {
       if (!(error instanceof SyntaxError)) {
         throw error;
       }
       const status = response.status;
-      if (response.ok && (status === 204 || status === 205 || requestData.method === 'HEAD')) {
-        payload = undefined;
+      if (
+        response.ok &&
+        (status === 204 || status === 205 || requestData.method === 'HEAD')
+      ) {
+        ret = undefined;
       } else {
         console.warn('This response was unable to be parsed as json.', payload);
       }
     }
-    return payload;
+    return ret;
   });
 }

addon/utils/mung-options-for-fetch.ts

@@ -1,37 +1,44 @@
-import { assign } from '@ember/polyfills'
+import { assign } from '@ember/polyfills';
 import { serializeQueryParams } from './serialize-query-params';
+import Mix from '@ember/polyfills/types';
+import { Method, FetchOptions } from 'ember-fetch/types';
 
 /**
  * Helper function that translates the options passed to `jQuery.ajax` into a format that `fetch` expects.
- * @param {Object} _options
- * @returns {Object}
  */
-export default function mungOptionsForFetch(_options) {
-  const options = assign({
-    credentials: 'same-origin',
-  }, _options);
+export default function mungOptionsForFetch(
+  _options: Mix<JQueryAjaxSettings, {url: string, type: Method}>
+): FetchOptions {
+  const options = assign(
+    {
+      credentials: 'same-origin'
+    },
+    _options
+  ) as FetchOptions;
 
   // Default to 'GET' in case `type` is not passed in (mimics jQuery.ajax).
-  options.method = (options.method || options.type || 'GET').toUpperCase();
+  options.method = (options.method || options.type || 'GET').toUpperCase() as Method;
 
   if (options.data) {
     // GET and HEAD requests can't have a `body`
-    if ((options.method === 'GET' || options.method === 'HEAD')) {
+    if (options.method === 'GET' || options.method === 'HEAD') {
       // If no options are passed, Ember Data sets `data` to an empty object, which we test for.
       if (Object.keys(options.data).length) {
         // Test if there are already query params in the url (mimics jQuey.ajax).
         const queryParamDelimiter = options.url.indexOf('?') > -1 ? '&' : '?';
-        options.url += `${queryParamDelimiter}${serializeQueryParams(options.data)}`;
+        options.url += `${queryParamDelimiter}${serializeQueryParams(
+          options.data
+        )}`;
       }
     } else {
       // NOTE: a request's body cannot be a POJO, so we stringify it if it is.
       // JSON.stringify removes keys with values of `undefined` (mimics jQuery.ajax).
       // If the data is not a POJO (it's a String, FormData, etc), we just set it.
       // If the data is a string, we assume it's a stringified object.
-      if (Object.prototype.toString.call(options.data) === "[object Object]") {
+      if (Object.prototype.toString.call(options.data) === '[object Object]') {
         options.body = JSON.stringify(options.data);
       } else {
-        options.body = options.data;
+        options.body = options.data as BodyInit;
       }
     }
   }