DEV Community

Converting a JavaScript project to Typescript, one file at a time

Suhas Chatekar on August 21, 2017

Convert a JavaScript application to Typescript JavaScript is good but, like me, if you come from statically typed languages then it beco...
Collapse
 
vyemialyanchyk profile image
vyemialyanchyk

what is a right way to declare ENVIRONMENT_CONFIG & DEBUG with webpack.DefinePlugin example:

new webpack.DefinePlugin({
ENVIRONMENT_CONFIG: JSON.stringify(environmentConfig),
DEBUG: JSON.stringify(DEBUG),
}),

cause I get:

ERROR in ./src/app/utils/Utility.ts
(11,26): error TS2304: Cannot find name 'ENVIRONMENT_CONFIG'.

Collapse
 
suhas_chatekar profile image
Suhas Chatekar

Are you able to provide complete code of utility.ts?

Collapse
 
vyemialyanchyk profile image
vyemialyanchyk

not a big sense here, ENVIRONMENT_CONFIG used in several files, so errors in several places, this is example:

if (ENVIRONMENT_CONFIG.FLAG_1 === '0') {
...
} else if (ENVIRONMENT_CONFIG.FLAG_1 === '1') {
...
} else {
...
}

I've found workable solution: stackoverflow.com/questions/460086...
but I do not like "typings" folder use, cause "typings" expected to be vanished with typings lib use, imo.

Collapse
 
kmcginn profile image
Kevin McGinn

Thanks for an interesting article! :)

I am a little uneasy about your (admittedly untested) suggestion for creating type declaration files for external packages. In my limited npm experience, I assumed it was a best practice for only the npm utility itself to make changes to the node_modules folder; that way, it is easy to retrieve your dependencies from any computer without adding them to source control. To keep the "purity" of the node_modules folder, would it be possible to create a specific folder for external type declaration files and make the TypeScript compiler aware of it?

Collapse
 
suhas_chatekar profile image
Suhas Chatekar

You are spot on. I completely missed on that. Since I have never done such a thing myself before I searched for the best options to deal with this properly and came across this wonderfully written SO answer which does a lot more justice to the problem than what I could have done.

Collapse
 
kmcginn profile image
Kevin McGinn

Wonderful find! Thank you!

Collapse
 
pabrams profile image
Paul Abrams • Edited

I don't understand how to run your initial JavaScript application. I'm used to seeing index.html, which I can run by double-clicking. How do I run your index.js without creating an .html file to do it?

Collapse
 
suhas_chatekar profile image
Suhas Chatekar

This is not a web application and hence there is no index.html. You simply run node lib/index.js in order to run the transpiled code.

Collapse
 
hellfiresteve profile image
hellfireSteve • Edited

I have tried to follow this, but loads was missing. It started to go wrong here:

npm install --save-dev webpack.
warnings: npm WARN ts-loader@5.2.2 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@6.0.0 but none is installed. You must install peer dependencies yourself.

solved that using the following:

npm install ajv@6.0.0
npm install typescript
npm install ts-loader

Now, when I run npm run build, I get the following failure:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

  • configuration.module has an unknown property 'loaders'. These properties are valid: object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } -> Options affecting the normal modules (NormalModuleFactory). Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! playground@1.0.0 build: webpack --config webpack.config.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the playground@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Collapse
 
hellfiresteve profile image
hellfireSteve

had to change loaders to rules in webpack.config.js:

module: {
rules: [
{ test: /.ts(x?)$/, loader: 'ts-loader' },

{ test: /.json$/, loader: 'json-loader' }
]