New project

Go to folder and run

C:\myapp> npm init

accept defaults or edit as necessary. then run

C:\myapp> npm install -D typescript

create a new file 'index.ts' under a 'src' folder and enter the following sample

// a function to just show hello plus a name
function helloTS(person: string) {
    console.log(`Hello ${person}`);
}

// lets test
helloTS('Adonis L. Villamor');

compile by going to terminal and run (typescript compile that generates a js version of the files)

C:\myapp> tsc src/index.ts

you will find an index.js file version of your typescript in the src folder which you can now use. Note that running 'tsc' with a specified ts file will not run the tsconfig. To use tsconfig files, see below.

Config file

create file '.tsconfig' and enter the following

{}

run it by just the following command

C:\myapp> tsc

It will do the same thing. what it does is look at all files including subdirectories and convert .ts, .d.ts and .tsx to generate their respective js version.

compilerOptions

tsconfig file contains an element compilerOptions which allows us to manage how the compiler will translate the file. having this unspecified uses default values.

"compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["es2015"],
    "strict": true,
    "declaration": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "noImplicitAny": true,
    "outDir": "dist",
    "rootDir":".",
    "sourceRoot": "src",
    "sourceMap": true
}

important/commonly used options

• target (string default "ES3") - Specify ECMAScript target version
• module (string default depends on target value. if target is "ES3" or "ES5", it is set as "CommonJS", else "ES6") - Specify module code generation
• lib (array of strings) - List of library files to be included in the compilation. for react/react-native projects
• strict (bool default false) - Enable all strict type checking options
• declaration (bool default false)- Generates corresponding .d.ts file.
  • declarationDir (string default root) - Output directory for generated declaration files.
  • declarationMap (bool default false)- Generates a sourcemap for each corresponding ‘.d.ts’ file.
• removeComments (bool default false) - deletes comments made in the output file
• preserveConstEnums (bool default false) - this allows us to make TS preserve the enum names in the JS output. used for reusable modules where your enums will be used by external apps.
• esModuleInterop (bool default false) - enable this for runtime babel ecosystem compatibility and typesystem compatibility.
• moduleResolution (string default depends on "module") - Determine how modules get resolved. Either "Node" for Node.js/io.js style resolution, or "Classic"
• noImplicitAny (bool false) - allows us to enforce all types be declared and not allow implicitly undefined ones as 'any'
• outDir (string) - specify where the compiled file gets created. if not set, the output is generated where the 'ts' or 'tsx' file exists
  • rootDir (string) - specify where the root directory is. used in conjunction with outDir to specify its root. without it, the common root directory starts where the input file is found on
• sourceRoot (string) - specify where the 'TS' source files are located
• sourceMap (boolean default false) - generates '.map' files which allows us to debug codes 'with typescript' on certain browsers/IDE instead of the compacted or generated 'js' code.
• jsx (string default "preserve") - Support JSX in .tsx files: "react", "preserve", "react-native"

include

The include field is an array that allows us to specify a GLOB like string value of which files to include in the output except those mentioned in 'exclude'

"include":[ "src/**/*", "tools/**/*" ]

exclude

The exclude field is an array of strings that allows us to specify the folders and files to exclude

"exclude": [ "node_modules", "coverage", "**/*.test.ts" ]

References:

• TSConfig Official Guide
• Compiler Options