TS 3.1 fixed (#798)

* Initial work to fix `this` errors

* Fix ImageCallback to use `this` instead of `@jimp/core`

* Add complex tests for custom and `jimp` for prior commits

* Update TS dep on CLI so custom typings worked properly

* Handle `this` issue on the core Jimp type method returns

packages/cli/package.json

@@ -31,7 +31,7 @@
     "@types/mocha": "^5.2.5",
     "@types/yargs": "^11.1.1",
     "ts-node": "^7.0.1",
-    "typescript": "^3.0.3"
+    "typescript": "^3.1.3"
   },
   "nyc": {
     "extension": [

packages/core/types/etc.d.ts

@@ -15,15 +15,19 @@ export type GenericCallback<T, U = any, TThis = any> = (
   value: T
 ) => U;
 
-export type ImageCallback<U = any> = (
-  this: Jimp,
+/**
+ * `jimp` must be defined otherwise `this` will not apply properly
+ * for custom configurations where plugins and types are needed
+ */
+export type ImageCallback<jimp = Jimp> = (
+  this: jimp,
   err: Error | null,
-  value: Jimp,
+  value: jimp,
   coords: {
     x: number;
     y: number;
   }
-) => U;
+) => any;
 
 type BlendMode = {
   mode: string;

packages/core/types/jimp.d.ts

@@ -10,18 +10,30 @@ import {
   RGB
 } from './etc';
 
+interface DiffReturn<This> {
+  percent: number;
+  image: This;
+}
+
+interface ScanIteratorReturn<This> {
+  x: number;
+  y: number;
+  idx: number;
+  image: This;
+}
+
 export interface JimpConstructors {
-  new(path: string, cb?: ImageCallback): this;
-  new(urlOptions: URLOptions, cb?: ImageCallback): this;
-  new(image: Jimp, cb?: ImageCallback): this;
-  new(data: Buffer, cb?: ImageCallback): this;
-  new(data: Bitmap, cb?: ImageCallback): this;
-  new(w: number, h: number, cb?: ImageCallback): this;
+  new(path: string, cb?: ImageCallback<this>): this;
+  new(urlOptions: URLOptions, cb?: ImageCallback<this>): this;
+  new(image: Jimp, cb?: ImageCallback<this>): this;
+  new(data: Buffer, cb?: ImageCallback<this>): this;
+  new(data: Bitmap, cb?: ImageCallback<this>): this;
+  new(w: number, h: number, cb?: ImageCallback<this>): this;
   new(
     w: number,
     h: number,
     background?: number | string,
-    cb?: ImageCallback
+    cb?: ImageCallback<this>
   ): this;
   // For custom constructors when using Jimp.appendConstructorOption
   new(...args: any[]): this;
@@ -66,7 +78,7 @@ export interface Jimp extends JimpConstructors {
   parseBitmap(
     data: Buffer,
     path: string | null | undefined,
-    cb?: ImageCallback
+    cb?: ImageCallback<this>
   ): void;
   hasAlpha(): boolean;
   getHeight(): number;
@@ -76,9 +88,9 @@ export interface Jimp extends JimpConstructors {
   getMIME(): string;
   getExtension(): string;
   distanceFromHash(hash: string): number;
-  write(path: string, cb?: ImageCallback): this;
+  write(path: string, cb?: ImageCallback<this>): this;
   writeAsync(path: string): Promise<this>;
-  rgba(bool: boolean, cb?: ImageCallback): this;
+  rgba(bool: boolean, cb?: ImageCallback<this>): this;
   getBase64(mime: string, cb: GenericCallback<string, any, this>): this;
   getBase64Async(mime: string): Promise<string>;
   hash(cb?: GenericCallback<string, any, this>): string;
@@ -109,42 +121,42 @@ export interface Jimp extends JimpConstructors {
     y: number,
     cb?: GenericCallback<number, any, this>
   ): number;
-  setPixelColor(hex: number, x: number, y: number, cb?: ImageCallback): this;
-  setPixelColour(hex: number, x: number, y: number, cb?: ImageCallback): this;
-  clone(cb?: ImageCallback): this;
-  cloneQuiet(cb?: ImageCallback): this;
-  background(hex: number, cb?: ImageCallback): this;
-  backgroundQuiet(hex: number, cb?: ImageCallback): this;
+  setPixelColor(hex: number, x: number, y: number, cb?: ImageCallback<this>): this;
+  setPixelColour(hex: number, x: number, y: number, cb?: ImageCallback<this>): this;
+  clone(cb?: ImageCallback<this>): this;
+  cloneQuiet(cb?: ImageCallback<this>): this;
+  background(hex: number, cb?: ImageCallback<this>): this;
+  backgroundQuiet(hex: number, cb?: ImageCallback<this>): this;
   scan(
     x: number,
     y: number,
     w: number,
     h: number,
     f: (this: this, x: number, y: number, idx: number) => any,
-    cb?: ImageCallback
+    cb?: ImageCallback<this>
   ): this;
   scanQuiet(
     x: number,
     y: number,
     w: number,
     h: number,
     f: (this: this, x: number, y: number, idx: number) => any,
-    cb?: ImageCallback
+    cb?: ImageCallback<this>
   ): this;
   scanIterator(
     x: number,
     y: number,
     w: number,
     h: number
-  ): IterableIterator<{ x: number; y: number; idx: number; image: Jimp }>;
+  ): IterableIterator<ScanIteratorReturn<this>>;
 
   // Effect methods
   composite(
     src: Jimp,
     x: number,
     y: number,
     options?: BlendMode,
-    cb?: ImageCallback
+    cb?: ImageCallback<this>
   ): this;
 
   // Functions
@@ -180,10 +192,7 @@ export interface Jimp extends JimpConstructors {
     img1: Jimp,
     img2: Jimp,
     threshold?: number
-  ): {
-    percent: number;
-    image: Jimp;
-  };
+  ): DiffReturn<this>;
   distance(img1: Jimp, img2: Jimp): number;
   compareHashes(hash1: string, hash2: string): number;
   colorDiff(rgba1: RGB, rgba2: RGB): number;

packages/core/types/utils.d.ts

@@ -1,5 +1,4 @@
 import {
-  WellFormedPlugin,
   JimpType,
   JimpPlugin,
 } from './plugins';

packages/custom/types/test.ts

@@ -13,6 +13,82 @@ const CustomJimp = configure({
   plugins: [displace, resize]
 });
 
+test('should function the same as the `jimp` types', () => {
+  const FullCustomJimp = configure({
+    types: [types],
+    plugins: [plugins]
+  });
+
+  const jimpInst = new FullCustomJimp('test');
+
+  // Main Jimp export should already have all of these already applied
+  jimpInst.read('Test');
+  jimpInst.displace(jimpInst, 2);
+  jimpInst.resize(40, 40);
+  // $ExpectType 0
+  jimpInst.PNG_FILTER_NONE;
+
+  // $ExpectError
+  jimpInst.test;
+
+  // $ExpectError
+  jimpInst.func();
+
+  // Main Jimp export should already have all of these already applied
+  FullCustomJimp.read('Test');
+  FullCustomJimp.displace(FullCustomJimp, 2);
+  FullCustomJimp.resize(40, 40);
+  // $ExpectType 0
+  FullCustomJimp.PNG_FILTER_NONE;
+
+  // $ExpectError
+  FullCustomJimp.test;
+
+  // $ExpectError
+  FullCustomJimp.func();
+
+  test('can clone properly', async () => {
+    const baseImage = await FullCustomJimp.read('filename');
+    const cloneBaseImage = baseImage.clone();
+
+    // $ExpectType -1
+    cloneBaseImage.PNG_FILTER_AUTO;
+
+    test('can handle `this` returns on the core type properly', () => {
+      // $ExpectType -1
+      cloneBaseImage.diff(jimpInst, jimpInst).image.PNG_FILTER_AUTO
+    });
+
+    test('can handle `this` returns properly', () => {
+      cloneBaseImage
+        .resize(1, 1)
+        .crop(0, 0, 0, 0)
+        .mask(cloneBaseImage, 2, 2)
+        .print('a' as any, 2, 2, 'a' as any)
+        .resize(1, 1)
+        .quality(1)
+        .deflateLevel(2)
+        .PNG_FILTER_AUTO;
+    });
+
+    test('can handle imageCallbacks `this` properly', () => {
+      cloneBaseImage.rgba(false, (_, jimpCBIn) => {
+        jimpCBIn.read('Test');
+        jimpCBIn.displace(jimpInst, 2);
+        jimpCBIn.resize(40, 40);
+        // $ExpectType 0
+        jimpCBIn.PNG_FILTER_NONE;
+
+        // $ExpectError
+        jimpCBIn.test;
+
+        // $ExpectError
+        jimpCBIn.func();
+      })
+    })
+  });
+});
+
 test('can handle custom jimp', () => {
   // Methods from types should be applied
   CustomJimp.deflateLevel(4);

packages/jimp/package.json

@@ -6,6 +6,13 @@
   "module": "es/index.js",
   "browser": "browser/lib/jimp.js",
   "types": "types/index.d.ts",
+  "typesVersions": {
+    ">=3.1.0-0": {
+      "*": [
+        "types/ts3.1/index.d.ts"
+      ]
+    }
+  },
   "tonicExampleFilename": "example.js",
   "files": [
     "browser",