4

I'm currently trying to set up a development environment for a typescript REST consumer and am encountering the following problem: the compiler seems to mind references to Typings when they're placed in the .ts source files, however completely ignores them when I try to manage my refereneces via a single .d.ts file in tsconfig.json.

I'm getting an error TS2307: Cannot find module 'request'. while trying to compile the following code:

import * as request from 'request'; module HTTPClient { ... } 

This is my tsconfig.json file:

{ "compilerOptions": { "jsx": "react", "module": "commonjs", "noImplicitAny": true, "noEmitOnError": true, "outDir": "./build/", "preserveConstEnums": true, "removeComments": true, "target": "ES5", "declarationFiles": true, "moduleResolution": "classic" }, "exclude": [ "./node_modules", "./build", "./tests" ], "include": [ "./src/ts/**/*", "./typings/main.d.ts" ] } 

And this is the gulp code I'm using to compile and bundle everything:

var typescriptProject = typescriptCompiler.createProject(project['tsconfig'], { typescript: typescript }); gulp.task( 'compile-ts', function () { return gulp .src([ project['ts'] + '**/*{ts, tsx}' ]) .pipe(typescriptCompiler(typescriptProject)) .js .pipe(gulp.dest(output['js'])); } ); gulp.task( 'bundle-js', function () { return browserify(output['js'] + 'main.js') .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest(output['web'])); } ); 

I have the ambient definitions for Request installed and referenced in typings/main.d.ts. Could this have something to do with the way I'm using browserify to resolve the modules? Any help would be much appreciated.

1 Answer 1

2

The problem was caused by two things:

First, if you're using gulp-typescript to compile your code first and then bundle it only with browserify (without using tsify), you have several options on how to configure the compiler. If you choose to configure it with tsconfig.json, you first need to create a TypeScript Project object with gulp-typescript like so:

var typescriptCompiler = require('gulp-typescript'); var typescriptProject = typescriptCompiler.createProject(project['tsconfig'], { typescript: typescript }); 

And then feed the sources retrieved from the project to the compiler in your gulp task:

gulp.task( 'compile-ts', function () { return typescriptProject .src() .pipe(typescriptCompiler(typescriptProject)) .js .pipe(gulp.dest(output['js'])); } ); 

The second problem was me including "typings/main.d.ts" in the sources. This caused a whole bunch of "TS2300: Duplicate identifier" errors: solving that was just a matter of moving "typings/main.d.ts" to the "exclude" section to avoid duplication.

NOTE: The typings version was indeed outdated; if you're running into this problem, update it.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.