Typescript

Author: xg-wang

CHANGELOG.md

@@ -1,4 +1,3 @@
-
 6.1.0 / 2018-11-02
 ==================
 

README.md

@@ -35,6 +35,9 @@ Available imports:
 import fetch, { Headers, Request, Response, AbortController } from 'fetch';
 ```
 
+### Use with TypeScript
+To use `ember-fetch` with TypeScript or enable editor's type support, add `"fetch": "ember-cli/ember-fetch"` to your app's `devDependencies`.
+
 ### Use with Ember Data
 To have Ember Data utilize `fetch` instead of jQuery.ajax to make calls to your backend, extend your project's `application` adapter with the `adapter-fetch` mixin.
 
@@ -65,7 +68,7 @@ export default {
 }
 ```
 
-For addon authors, if the addon supports Fastboot mode, `ember-fetch` should also be listed as a [peer dependency](https://docs.npmjs.com/files/package.json#peerdependencies). 
+For addon authors, if the addon supports Fastboot mode, `ember-fetch` should also be listed as a [peer dependency](https://docs.npmjs.com/files/package.json#peerdependencies).
 This is because Fastboot only invokes top-level addon's `updateFastBootManifest` ([detail](https://github.com/ember-fastboot/ember-cli-fastboot/issues/597)), thus `ember-fetch` has to be a top-level addon installed by the host app.
 
 ### Allow native fetch

addon/ajax.js

@@ -0,0 +1,14 @@
+import fetch from 'fetch';
+
+export default function ajax(
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<Response> {
+  return fetch(input, init).then(response => {
+    if (response.ok) {
+      return response.json();
+    }
+
+    throw response;
+  });
+}

addon/ajax.ts

@@ -1,5 +1,5 @@
 import Mixin from '@ember/object/mixin';
-import { assign } from '@ember/polyfills'
+import { assign } from '@ember/polyfills';
 import RSVP from 'rsvp';
 import fetch from 'fetch';
 import mungOptionsForFetch from '../utils/mung-options-for-fetch';
@@ -14,22 +14,22 @@ export function headersToObject(headers) {
   let headersObject = {};
 
   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}
- * @override
- */
+  /**
+   * @param {String} url
+   * @param {String} type
+   * @param {Object} _options
+   * @returns {Object}
+   * @override
+   */
 
-  ajaxOptions(url, type, options = {}) {
+  ajaxOptions(url, type, options: any = {}) {
     options.url = url;
     options.type = type;
 
@@ -50,7 +50,7 @@ export default Mixin.create({
   ajax(url, type, options) {
     const requestData = {
       url,
-      method: type,
+      method: type
     };
 
     const hash = this.ajaxOptions(url, type, options);
@@ -59,7 +59,7 @@ export default Mixin.create({
       .catch((error, response, requestData) => {
         throw this.ajaxError(this, response, null, requestData, error);
       })
-      .then((response) => {
+      .then(response => {
         return RSVP.hash({
           response,
           payload: determineBodyPromise(response, requestData)
@@ -115,7 +115,6 @@ export default Mixin.create({
     }
   },
 
-
   /**
    * Allows for the error to be selected from either the
    * response object, or the response data.
@@ -138,7 +137,10 @@ export default Mixin.create({
     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/mixins/adapter-fetch.js renamed to addon/mixins/adapter-fetch.ts

@@ -18,7 +18,10 @@ export function serializeQueryParams(queryParamsObject) {
           if (RBRACKET.test(prefix)) {
             add(s, prefix, obj[i]);
           } else {
-            buildParams(prefix + '[' + (typeof obj[i] === 'object' ? i : '') + ']', obj[i]);
+            buildParams(
+              prefix + '[' + (typeof obj[i] === 'object' ? i : '') + ']',
+              obj[i]
+            );
           }
         }
       } else if (obj && String(obj) === '[object Object]') {
@@ -40,7 +43,9 @@ export function serializeQueryParams(queryParamsObject) {
     return s;
   }
 
-  return buildParams('', queryParamsObject).join('&').replace(/%20/g, '+');
+  return buildParams('', queryParamsObject)
+    .join('&')
+    .replace(/%20/g, '+');
 }
 
 /**

addon/utils/serialize-query-params.js renamed to addon/utils/serialize-query-params.ts

@@ -1,9 +1,29 @@
-// Type definitions for Ember Fetch
+// Type definitions for ember-fetch
 // Project: https://github.com/ember-cli/ember-fetch
-// Definitions by: Toran Billups <https://github.com/toranb>
-// TypeScript Version: 2.3
+// Definitions by: Toran Billups <https://github.com/toranb>, Thomas Wang<https://github.com/xg-wang>
+/// <reference lib="es2015" />
+/// <reference lib="dom" />
 
-declare module 'fetch' {
-  import RSVP from 'rsvp';
-  export default function fetch(input: RequestInfo, init?: RequestInit): RSVP.Promise<Response>;
-}
+import RSVP from 'rsvp';
+export default function fetch(
+  input: RequestInfo,
+  init?: RequestInit
+): RSVP.Promise<Response>;
+export const Headers: {
+  prototype: Headers;
+  new (init?: HeadersInit): Headers;
+};
+export const Request: {
+  prototype: Request;
+  new (input: RequestInfo, init?: RequestInit): Request;
+};
+export const Response: {
+  prototype: Response;
+  new (body?: BodyInit | null, init?: ResponseInit): Response;
+  error(): Response;
+  redirect(url: string, status?: number): Response;
+};
+export const AbortController: {
+  prototype: AbortController;
+  new (): AbortController;
+};

index.d.ts

@@ -17,7 +17,9 @@
     "lint:js": "eslint ./*.js addon addon-test-support app config lib server test-support tests",
     "start": "ember server",
     "test": "npm run test:node && ember try:each",
-    "test:node": "mocha"
+    "test:node": "mocha",
+    "prepublishOnly": "ember ts:precompile",
+    "postpublish": "ember ts:clean"
   },
   "dependencies": {
     "abortcontroller-polyfill": "^1.1.9",
@@ -28,12 +30,21 @@
     "broccoli-rollup": "^2.1.1",
     "broccoli-stew": "^2.0.0",
     "broccoli-templater": "^2.0.1",
-    "ember-cli-babel": "^6.8.2",
+    "ember-cli-babel": "^7.1.3",
+    "ember-cli-typescript": "2.0.0-beta.2",
     "node-fetch": "^2.0.0-alpha.9",
     "rollup-plugin-babel": "^3.0.7",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
+    "@types/ember": "^3.0.25",
+    "@types/ember-data": "^3.1.3",
+    "@types/ember-qunit": "^3.4.3",
+    "@types/ember-test-helpers": "^1.0.4",
+    "@types/ember-testing-helpers": "^0.0.3",
+    "@types/ember__test-helpers": "^0.7.6",
+    "@types/qunit": "^2.5.3",
+    "@types/rsvp": "^4.0.2",
     "broccoli-asset-rev": "^2.4.5",
     "broccoli-test-helper": "^1.2.0",
     "chai": "^4.1.2",
@@ -45,6 +56,7 @@
     "ember-cli-pretender": "^3.0.0",
     "ember-cli-qunit": "^4.3.2",
     "ember-cli-release": "^0.2.9",
+    "ember-cli-typescript-blueprints": "^2.0.0-beta.1",
     "ember-cli-uglify": "^2.0.0",
     "ember-data": "^2.16.0",
     "ember-disable-prototype-extensions": "^1.1.2",
@@ -57,7 +69,8 @@
     "eslint-plugin-ember": "^5.0.0",
     "eslint-plugin-node": "^5.2.1",
     "loader.js": "^4.2.3",
-    "mocha": "^5.2.0"
+    "mocha": "^5.2.0",
+    "typescript": "^3.1.6"
   },
   "engines": {
     "node": "6.* || 8.* || >= 10"

package.json

@@ -0,0 +1,16 @@
+export default config;
+
+/**
+ * Type declarations for
+ *    import config from './config/environment'
+ *
+ * For now these need to be managed by the developer
+ * since different ember addons can materialize new entries.
+ */
+declare const config: {
+  environment: any;
+  modulePrefix: string;
+  podModulePrefix: string;
+  locationType: string;
+  rootURL: string;
+};

tests/dummy/app/config/environment.d.ts

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noEmitOnError": false,
+    "noEmit": true,
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "baseUrl": ".",
+    "module": "es6",
+    "paths": {
+      "dummy/tests/*": ["tests/*"],
+      "dummy/*": ["tests/dummy/app/*", "app/*"],
+      "fetch": ["index.d.ts"],
+      "ember-fetch": ["addon"],
+      "ember-fetch/*": ["addon/*"],
+      "ember-fetch/test-support": ["addon-test-support"],
+      "ember-fetch/test-support/*": ["addon-test-support/*"],
+      "*": ["types/*"]
+    }
+  },
+  "include": [
+    "app/**/*",
+    "addon/**/*",
+    "tests/**/*",
+    "types/**/*",
+    "test-support/**/*",
+    "addon-test-support/**/*"
+  ]
+}