- TypeScript in 5 Minutes
- Comprehensive and Useful Handbook
- Unofficial Deep Dive into TypeScript
- TypeScript Playground
- (Old) Introductory video on TypeScript
- Why would you want to use TypeScript
npm install -g [email protected]
Perhaps the most important benefit of using TypeScript over Javascript is that with TypeScript we can add types to our code. In order to do this we need to somehow describe the format of our objects and data. We do this by way of type definition files often found with the file extension .d.ts. The Typings module we're about to install is just a tool for managing and installing type definitions.
npm install -g [email protected]
Many popular Javascript modules already have companion type definitions. For older versions of typings, we store the required type definitions for a node module in the typings.json file. It will look something like:
{
"dependencies": {
"sequelize": "registry:npm/sequelize#3.0.0+20160422171705",
"lodash": "registry:npm/lodash#4.0.0+20160416211519"
}
After running typings install in this directory you will find a new directory has been created called typings/.
As of TypeScript 2.0 you can include typings in your package.json file, as described here.
To compile a TypeScript file called myFile.ts you run the command tsc myFile.ts and the appropriate Javascript files will be created. If you would like to include source maps, simple pass in the --sourceMap option into tsc.
tsc --sourceMap myFile.ts
In order to automatically watch and compile new changes automatically you can use the --watch compiler option.
tsc --watch
The presence of a
tsconfig.jsonfile in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.
Including a tsconfig.json file in the root of your TS project removes the requirement that we explicitly pass compiler options into the tsc command. Here is a comprehensive list of compiler options that can be included in your tsconfig. The format of your tsconfig file can be found here.
As the name suggests TypeScript introduces types to Javascript in order to provide static type checking to your code. Among the additions are:
TS style can be enforced with the TSLint Module. Jake's TSLint Config is a possible start to a codebase wide TSLint config that we could all discuss. Other than TypeScript specific style we should be careful to follow ES6 Style conventions.
TypeScript offers support for the async and await keywords introduced in ES7. Read more about this here.
VSCode is an excellent IDE developed by Microsoft (tiny start up that also developed TypeScript). You can download it here. One important benefit of using VSCode is that, when debugging, you'll be able to set breakpoints in the actual TypeScript code rather than the compiled Javascript. Take a look at the magic here.
Here is a recommended .vscode/settings.json which can be configured after installation:
{
"typescript.validate.enable": true,
"typescript.tsserver.trace": "on",
"editor.tabSize": 2,
"files.associations": {
"*.ts": "typescript"
},
"files.exclude": {
"**/*.js.map": true,
"**/*.js": {
"when": "$(basename).ts"
}
},
"search.exclude": {
"templates": true,
"node_modules": true,
"typings": true
},
"editor.formatOnType": true,
"files.trimTrailingWhitespace": true,
"files.eol": "\n",
"editor.formatOnPaste": true,
"editor.minimap.enabled": false,
"editor.snippetSuggestions": "bottom"
}You may find the TSLint extension especially useful. It will use the tslint.json file in the root of your TypeScript project in order to enforce TypeScript style in the proejct.
`
Tell Jake Rails is better