TypeScript Project Setup— Modules and Options

TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.

However, not everyone knows how it actually works.

In this article, we’ll look at how to use modules in a TypeScript project.

Also, we look at the options we can set for the TypeScript compiler

Module Formats

Before ES6, we have different kinds of JavaScript modules to solve the problems with organizing code into small pieces.

There were multiple types of modules before that.

TypeScript has built-in support for standard JavaScript modules.

So we can use the export and import syntax for exposing module members and using them respectively.

For instance, we can export a member by writing:

module.ts

export const printMsg = (msg: string): void => {  
  console.log(msg);  
};

Then we can use it in another module by importing it.

The export keyword lets us export a member in a module.

We can export anything at the top level.

Then we can use our module by using the import keyword.

For example, we can write:

import { printMsg } from "./module";  
printMsg("foo");

We import the printMsg function with the import statement.

Then we called it.

We should get 'foo' logged in the console log just like when we called it in the same module.

If we build the code, then they’ll be bundled together.

And the code will vary depending on the target that we choose.

We won’t get any references to modules in our build artifacts.

If we’re using a standalone TypeScript project, then we’ve to specify in the lib section of tsconfig.json .

We should specify the module system that we want to compile with the Typescript compiler with the module setting.

The following choices can be set for this setting.

none will disable modules.

commonjs selects the CommonJS module format which is supported by Node

amd selected Asynchronpus Module Definition, supported by the RequireJs module loader.

system selects the module format supported by the SystemJS module folder.

umd selected the Universal Module Definition module format.

es2015 or es6 selects the module format in the ES6 language specification.

esnext selects modules features that have been proposed for the next version of the JavaScript language.

To add the option, we can write:

{    
  "compilerOptions": {    
    "target": "es2018"  
    //...  
    "module": "commonjs"  
  }  
}

Once we have that, we can use the module system of our choice.

We can use commonjs for Node apps, but es6 is the standard so we should use that.

Modules are usually located in the node_modules folder.

TypeScript compiler uses the classic resolution with module is set to es2015 , system , or amd .

The resolution style can be set using the moduleResolution configuration property in tsconfig.json using the classic or node value.

Compiler Configuration Settings

There are many other compiler configuration options in addition to the module and target settings.

allowJs sets whether we wan to include JavaScript files in the compilation process.

allowSyntheticDefaultImports allows imports from modules that don’t declare a default export.

It’s used to increase code compatibility.

baseUrl specifies the root location to resolve module dependencies.

checkJs tells the compiler to check JavaScript code for common errors.

declaration is the option we set to produce type declaration files that provide type information for JavaScript code.

downlevelIteration enables support for iterators when targeting an older version of JavaScript.

emitDecoratorMetadata option lets us include decorator metadata in the JavaScrti emitted by the compiler and is used with the experimentalDecorations option.

experimentalDecorators enables support for decorators.

forceConsistentCasingInFileNames enures the names of import statements match the case used by the imported file.

importHelpers determines whether the helper code is added to JavaScript to reduce the amount of code that’s produced overall.

isolateModules treats each file as a separate module.

jsx specifies how HTML elements in JSX/TSX files are processed.

jsxFactory specifies the name of the factory function that’s used to replace HTML files in JSX/TSX files.

noImplicitAny prevents implicit use of the any type.

noImplicitReturns option requires all paths in a function to return a result.

resolveJsonModule allows us to import JSON files as if they’re modules.

skipLibCheck lets us skip the checks for declaration files.

strict enables stricter checking of TypeScript code.

strictNullChecks prevents null and undefined from being accepted as values for other types.

suppressExcessPropertyErrors stops the compiler from generating errors for objects that defined properties, not in the specified range.

typeRoots specifies the root location the compiler uses to look for declaration files.

types specifies a list of declaration files to include when compiling.

Conclusion

With the TypeScript compiler, we can specify lots of options to control how code is converted from TypeScript to JavaScript code we can use.

Modules should be used in our project, but we’ve to specify the kind of modules we want to build first.