How to use TypeScript starter
Forked and edited from: https://github.com/bitjson/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 typescriptCompile single file
tsc myfile.tsCompile in watch mode
- incremental recompile on file change
tsc -w myfile.tsCompile 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 typescriptInit project - generate basic configuration file
tslint --initUsage
tslint -c tslint.json 'src/**/*.ts'typedoc
Global installation
sudo npm install -g typedocLocal installation
npm install --save-dev typedocUsage
typedoc src/index.ts --mode file --out build/docsDocumentation 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
More info in README:
How to use typescript-starter
By Michal Moravcik
How to use typescript-starter
- 86