Looking for some advice on something.
I'm maintaining an old application that was written in Knockout JS with Typescript. The Typescript compilation is all done in gulp using ts:compile.
One new feature I'm working on is to add Recurly JS to the application. Recurly JS comes as a standard JS library primarily but recently they've also included Typscript types as a supported method for using their library. I have very limited experience with Typescript, but from what I understand these types are actually not just models, but also methods I can use to fully use Recurly JS in Typescript.
I decided to try to do this the "best" way by using these types in my .ts files by installing the Recurly JS types with npm (npm install --save @types/recurly__recurly-js). Things seem to work fine for development. I'm able to import Recurly in my ts files and all of the types and functions are recognized, but I'm having trouble when Gulp tries to compile it. Here is the compilation settings for Gulp and the error I get when attempting to compile.
gulp.task('ts:compile', function (callback) {
var project = typescript.createProject('tsconfig.json');
pump([
gulp.src(
[
jsPath + 'Models/*.ts',
jsPath + '*.ts'
]
),
typescript({
noImplicitAny: true,
target: 'es5',
removeComments: true
}),
gulp.dest(compiledJsPath)
], callback);
});
[12:54:19] Starting 'ts:compile'...
Areas\Ordering\Content\Scripts\customerPayment.ts(7,25): error TS2307: Cannot find module '@recurly/recurly-js'.
node_modules\@types\recurly__recurly-js\lib\3d-secure.d.ts(5,46): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\adyen.d.ts(27,40): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\apple-pay.d.ts(42,3): error TS1110: Type expected.
node_modules\@types\recurly__recurly-js\lib\apple-pay.d.ts(50,43): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\apple-pay.d.ts(54,16): error TS2304: Cannot find name 'VoidFunction'.
node_modules\@types\recurly__recurly-js\lib\apple-pay.d.ts(55,16): error TS2304: Cannot find name 'VoidFunction'.
node_modules\@types\recurly__recurly-js\lib\elements.d.ts(209,38): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\elements.d.ts(234,44): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\elements.d.ts(254,43): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\emitter.d.ts(3,25): error TS1005: ',' expected.
node_modules\@types\recurly__recurly-js\lib\emitter.d.ts(3,27): error TS2368: Type parameter name cannot be 'string'
node_modules\@types\recurly__recurly-js\lib\emitter.d.ts(4,41): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\emitter.d.ts(5,43): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\emitter.d.ts(6,44): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\emitter.d.ts(7,39): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\paypal.d.ts(25,41): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\paypal.d.ts(31,12): error TS2304: Cannot find name 'VoidFunction'.
node_modules\@types\recurly__recurly-js\lib\pricing\index.d.ts(15,3): error TS1110: Type expected.
node_modules\@types\recurly__recurly-js\lib\pricing\index.d.ts(29,58): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
node_modules\@types\recurly__recurly-js\lib\pricing\index.d.ts(30,19): error TS2304: Cannot find name 'VoidFunction'.
node_modules\@types\recurly__recurly-js\lib\pricing\index.d.ts(31,29): error TS2304: Cannot find name 'VoidFunction'.
node_modules\@types\recurly__recurly-js\lib\pricing\index.d.ts(32,10): error TS2304: Cannot find name 'VoidFunction'.
node_modules\@types\recurly__recurly-js\lib\pricing\promise.d.ts(8,60): error TS2304: Cannot find name 'Promise'.
node_modules\@types\recurly__recurly-js\lib\pricing\promise.d.ts(15,17): error TS1005: ',' expected.
node_modules\@types\recurly__recurly-js\lib\pricing\promise.d.ts(15,31): error TS1005: ',' expected.
node_modules\@types\recurly__recurly-js\lib\pricing\promise.d.ts(25,17): error TS1005: ',' expected.
node_modules\@types\recurly__recurly-js\lib\recurly.d.ts(16,34): error TS2314: Generic type 'Emitter<Event, string>' requires 2 type argument(s).
[12:54:21] TypeScript: 6 syntax errors
[12:54:21] TypeScript: 43 semantic errors
[12:54:21] 'ts:compile' errored after 1.71 s
[12:54:21] TypeScript error: Areas\Ordering\Content\Scripts\customerPayment.ts(7,25): error TS2307: Cannot find module '@recurly/recurly-js'.
at Object.getError (C:\Users\username\source\repos\application\ECommerce\node_modules\gulp-typescript\release\utils.js:55:15)
[12:54:21] TypeScript: emit succeeded (with errors)
at Output.getError (C:\Users\username\source\repos\application\ECommerce\node_modules\gulp-typescript\release\output.js:91:22)
at Output.diagnostic (C:\Users\username\source\repos\application\ECommerce\node_modules\gulp-typescript\release\output.js:94:25)
at ProjectCompiler.reportDiagnostics (C:\Users\username\source\repos\application\ECommerce\node_modules\gulp-typescript\release\compiler.js:125:33)
at ProjectCompiler.inputDone (C:\Users\username\source\repos\application\ECommerce\node_modules\gulp-typescript\release\compiler.js:47:14)
at CompileStream.end (C:\Users\username\source\repos\application\ECommerce\node_modules\gulp-typescript\release\project.js:125:31)
at DestroyableTransform.onend (C:\Users\username\source\repos\application\ECommerce\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:577:10)
at Object.onceWrapper (events.js:420:28)
at DestroyableTransform.emit (events.js:326:22)
at DestroyableTransform.EventEmitter.emit (domain.js:506:15)
Process terminated with code 1.
At the moment I'm zeroing in just on the one error error TS2307: Cannot find module '@recurly/recurly-js'. I think that's probably the issue I need to solve (or at least the one I need to solve first). But I'm not really a TS expert and I'm not sure if I am even doing something here that should be possible. For instance, does the version of ts:compile matter compared to the types created by the Recurly folks or compared to the version of node I'm using? I don't know if any of that matters.
I have tried a lot of things to get it to find my recurly types. I've tried not excluding node_modules from the compilation in the tsconfig.json, changing the module resolution for the ts compiler to node and classic and attempting to explicitly reference the .d.ts files from my node_modules folder in my gulp.src command but nothing I have tried is changing the outcome and at this point I'm not even sure I'm going down the right path or if I should just go with a declare var recurly: any; at the top of my ts file and be done with it.
Here is how I am also imported the Recurly types into my typescript file
import { Address } from '@recurly/recurly-js';
Any advice would be greatly appreciated