How to use TypeScript starter

is a simple example library written in TypeScript

scripts in package.json for common tasks

  • build - compile TypeScript to JavaScript
  • docs - generate documentation from source
  • lint - validate sources
  • version - release and publish a new version

example modules using TypeScript library in various environments (node, typescript, browser)

can be reused to create TypeScript libraries

Quick start guide

Prerequisites:

  • Git installed
  • Node.js v 6+ installed
  • logged in with npm login command
  • IDE with support for TypeScript installed
  • let's start :)

Quick start guide

git clone https://github.com/solargis/typescript-starter.git
cd typescript-starter
npm install
npm run build

Install dependencies

Clone project

Build library

sudo npm link

Link local module into global modules (optional)

Quick start guide

cd examples/node-commonjs
npm install
npm start

Explore examples

Optionally link local module of @solargis/typescript-starter

npm link @solargis/typescript-starter

Quick start guide

Apply previous steps for each example:
 

node-commonjs - classic ES5 node module

node-typescript - node module written in TypeScript

browser-rollup - simple webapp bundled with Rollup

browser-ng - example app generated with Angular CLI

browser-webpack - sample webapp bundled with Webpack

Compile TypeScript

Install TypeScript compiler globally

sudo npm install -g typescript

Compile single file

tsc myfile.ts

Compile in watch mode

  • incremental recompile on file change
tsc -w myfile.ts

Compile TypeScript

Compile TypeScript project

tsc -p tsconfig.json

The tsconfig.json file specifies the root files and the compiler options required to compile the project.

If tsc is run without arguments, compiler searches for tsconfig.json in current directory, and continues with parent directories up.

Compile TypeScript

Example tsconfig.json with "files" property: 

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts",
        "scanner.ts",
        "parser.ts",
        "utilities.ts"
    ]
}

Compile TypeScript

Example with "include" and "exclude" properties: 

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "build/tsc.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

Compiler options

target

  • ECMAScript target version
  • ES3, ES5, ES6/ES2015, ES2016, ES2017, ESNext

module

  • specify module code generation
  • CommonJS, AMD, System, UMD, ES6/ES2015, ESNext

​moduleResolution

  • determine how modules get resolved
  • Node or Classic

Compiler options

outFile

  • concatenate and emit output to single file
  • order of concatenation is determined by input list of files and imports

outDir

  • redirect output structure to the directory

​lib

  • list of library files to be included in the compilation (defaults according to target)
  • ES5, ES6/ES2015, ES7/ES2016, ES2017, ESNext, DOM, WebWorker, ScriptHost

Compiler options

importHelpers

  • import emit helpers from tslib (implementation of new features, e.g. async/await)

typeRoots

  • list of folders to include type definitions from
  • node_modules/@types as default

types

  • list of names of type definitions (from typeRoots) to include

Compiler options

sourceMap

  • generates corresponding .map files

inlineSourceMap

  • emit a single file with source maps included, instead of having separate .map file

​declaration

  • generates corresponding .d.ts files with types

experimentalDecorators

  • enables experimental support for ES decorators (for Angular)

Compiler options

baseUrl

  • base directory to resolve non-relative module names

rootDir

  • root directory of input files (by default computed)

strict

  • enable strict type checking options
  • enables noImplicitAny, noImplicitThis, alwaysStrict and strictNullChecks

​pretty

  • stylize errors and messages using color and context

TSLint

  • extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors
     
  • supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters

TSLint

Install globally (typescript is peer dependency)

sudo npm install -g tslint typescript

Init project - generate basic configuration file

tslint --init

Usage

tslint -c tslint.json 'src/**/*.ts'

typedoc

Global installation

sudo npm install -g typedoc

Local installation

npm install --save-dev typedoc

Usage

typedoc src/index.ts --mode file --out build/docs

Documentation generator for TypeScript projects

typedoc

  • TypeDoc runs the TypeScript compiler and extracts type information from the generated compiler symbols
  • TypeScript specific elements like classes, enumerations or property types and access modifiers will be automatically detected
  • All comments are parsed as markdown
  • TypeDoc uses the Marked markdown parser and HighlightJS to highlight code blocks within markdown sections
  • Additionally you can link to other classes, members or functions using double square brackets

gh-pages

Publish generated documentation to gh-pages Git branch to github, available online

Install locally

npm install gh-pages --save-dev

Usage (push build/docs dir to gh-pages branch):

# package.json
{
  "scripts": {
    "docs:html": "typedoc src/index.ts --mode file --out build/docs",
    "docs:publish": "npm run docs:html && gh-pages -d build/docs",
  }
}

npm run docs:publish

How to use typescript-starter

By Michal Moravcik

How to use typescript-starter

  • 86