Skip to content

Instantly share code, notes, and snippets.

@jonahglover
Last active May 27, 2017 00:40
Show Gist options
  • Save jonahglover/349e3005d4fb230d60196ea0769855b6 to your computer and use it in GitHub Desktop.
Save jonahglover/349e3005d4fb230d60196ea0769855b6 to your computer and use it in GitHub Desktop.
Introduction to TypeScript for JavaScript developers

TypeScript

Table of Contents

Introduction

Installation

Compilation

Types

Best Practices

VSCode

Introduction

Installation

Install TypeScript

npm install -g typescript@2.3.2

Install Typings Module

A Note on the Typings module

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 typings@2.1.1

Install Type Definitions

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.

Compilation

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

TSConfig

The presence of a tsconfig.json file 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.

~ TypeScript Documentation

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.

Types

As the name suggests TypeScript introduces types to Javascript in order to provide static type checking to your code. Among the additions are:

Best Practices

Style

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.

Async/Await

TypeScript offers support for the async and await keywords introduced in ES7. Read more about this here.

VSCode

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"
}

Extensions

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. `

@pawel-lmcb
Copy link

Tell Jake Rails is better

@vanmichael
Copy link

Tell Jake Coffee Script is better

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment