Getting started with TypeScript
Remarks#
TypeScript aims to be a superset of JavaScript that transpiles to JavaScript. By generating ECMAScript compliant code, TypeScript can introduce new language features while retaining compatibility with existing JavaScript engines. ES3, ES5 and ES6 are currently supported targets.
Optional types are a primary feature. Types allow static checking with the goal of finding errors early and can enhance tooling with features like code refactoring.
TypeScript is an open source and cross platform programming language developed by Microsoft. The source code is available on GitHub.
Versions#
Version | Release Date |
---|---|
2.4.1 | 2017-06-27 |
2.3.2 | 2017-04-28 |
2.3.1 | 2017-04-25 |
2.3.0 beta | 2017-04-04 |
2.2.2 | 2017-03-13 |
2.2 | 2017-02-17 |
2.1.6 | 2017-02-07 |
2.2 beta | 2017-02-02 |
2.1.5 | 2017-01-05 |
2.1.4 | 2016-12-05 |
2.0.8 | 2016-11-08 |
2.0.7 | 2016-11-03 |
2.0.6 | 2016-10-23 |
2.0.5 | 2016-09-22 |
2.0 Beta | 2016-07-08 |
1.8.10 | 2016-04-09 |
1.8.9 | 2016-03-16 |
1.8.5 | 2016-03-02 |
1.8.2 | 2016-02-17 |
1.7.5 | 2015-12-14 |
1.7 | 2015-11-20 |
1.6 | 2015-09-11 |
1.5.4 | 2015-07-15 |
1.5 | 2015-07-15 |
1.4 | 2015-01-13 |
1.3 | 2014-10-28 |
1.1.0.1 | 2014-09-23 |
Installation and setup
Background
TypeScript is a typed superset of JavaScript that compiles directly to JavaScript code. TypeScript files commonly use the .ts
extension. Many IDEs support TypeScript without any other setup required, but TypeScript can also be compiled with the TypeScript Node.JS package from the command line.
IDEs
Visual Studio
Visual Studio 2015
includes TypeScript.Visual Studio 2013 Update 2
or later includes TypeScript, or you can download TypeScript for earlier versions.
Visual Studio Code
- Visual Studio Code (vscode) provides contextual autocomplete as well as refactoring and debugging tools for TypeScript. vscode is itself implemented in TypeScript. Available for Mac OS X, Windows and Linux.
WebStorm
WebStorm 2016.2
comes with TypeScript and a built-in compiler. [Webstorm is not free]
IntelliJ IDEA
IntelliJ IDEA 2016.2
has support for Typescript and a compiler via a plugin maintained by the Jetbrains team. [IntelliJ is not free]
Atom & atom-typescript
Atom
supports TypeScript with the atom-typescript package.
Sublime Text
Sublime Text
supports TypeScript with the typescript package.
Installing the command line interface
Install Node.js
Install the npm package globally
You can install TypeScript globally to have access to it from any directory.
npm install -g typescript
or
Install the npm package locally
You can install TypeScript locally and save to package.json to restrict to a directory.
npm install typescript --save-dev
Installation channels
You can install from:
- Stable channel:
npm install typescript
- Beta channel:
npm install typescript@beta
- Dev channel:
npm install typescript@next
Compiling TypeScript code
The tsc
compilation command comes with typescript
, which can be used to compile code.
tsc my-code.ts
This creates a my-code.js
file.
Compile using tsconfig.json
You can also provide compilation options that travel with your code via a tsconfig.json
file. To start a new TypeScript project, cd
into your project’s root directory in a terminal window and run tsc --init
. This command will generate a tsconfig.json
file with minimal configuration options, similar to below.
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false,
"pretty": true
},
"exclude": [
"node_modules"
]
}
With a tsconfig.json
file placed at the root of your TypeScript project, you can use the tsc
command to run the compilation.
Hello World
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet(): string {
return this.greeting;
}
};
let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());
Here we have a class, Greeter
, that has a constructor
and a greet
method. We can construct an instance of the class using the new
keyword and pass in a string we want the greet
method to output to the console. The instance of our Greeter
class is stored in the greeter
variable which we then us to call the greet
method.
Basic syntax
TypeScript is a typed superset of JavaScript, which means that all JavaScript code is valid TypeScript code. TypeScript adds a lot of new features on top of that.
TypeScript makes JavaScript more like a strongly-typed, object-oriented language akin to C# and Java. This means that TypeScript code tends to be easier to use for large projects and that code tends to be easier to understand and maintain. The strong typing also means that the language can (and is) precompiled and that variables cannot be assigned values that are out of their declared range. For instance, when a TypeScript variable is declared as a number, you cannot assign a text value to it.
This strong typing and object orientation makes TypeScript easier to debug and maintain, and those were two of the weakest points of standard JavaScript.
Type declarations
You can add type declarations to variables, function parameters and function return types.
The type is written after a colon following the variable name, like this:
var num: number = 5;
The compiler will then check the types (where possible) during compilation and report type errors.
var num: number = 5;
num = "this is a string"; // error: Type 'string' is not assignable to type 'number'.
The basic types are :
number
(both integers and floating point numbers)string
boolean
Array
. You can specify the types of an array’s elements. There are two equivalent ways to define array types:Array<T>
andT[]
. For example:number[]
- array of numbersArray<string>
- array of strings
- Tuples. Tuples have a fixed number of elements with specific types.
[boolean, string]
- tuple where the first element is a boolean and the second is a string.[number, number, number]
- tuple of three numbers.
{}
- object, you can define its properties or indexer{name: string, age: number}
- object with name and age attributes{[key: string]: number}
- a dictionary of numbers indexed by string
enum
-{ Red = 0, Blue, Green }
- enumeration mapped to numbers- Function. You specify types for the parameters and return value:
(param: number) => string
- function taking one number parameter returning string() => number
- function with no parameters returning an number.(a: string, b?: boolean) => void
- function taking a string and optionally a boolean with no return value.
any
- Permits any type. Expressions involvingany
are not type checked.void
- represents “nothing”, can be used as a function return value. Onlynull
andundefined
are part of thevoid
type.never
let foo: never;
-As the type of variables under type guards that are never true.- `function error(message: string): never {
}` - As the return type of functions that never return.
null
- type for the valuenull
.null
is implicitly part of every type, unless strict null checks are enabled.
Casting
You can perform explicit casting through angle brackets, for instance:
var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();
This example shows a derived
class which is treated by the compiler as a MyInterface
.
Without the casting on the second line the compiler would thrown an exception as it does not understand someSpecificMethod()
, but casting through <ImplementingClass>derived
suggests the compiler what to do.
Another way of casting in Typescript is using the as
keyword:
var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();
Since Typescript 1.6, the default is using the as
keyword, because using <>
is ambiguous in .jsx files. This is mentioned in Typescript official documentation.
Classes
Classes can be defined and used in TypeScript code. To learn more about classes, see the Classes documentation page.
TypeScript REPL in Node.js
For use TypeScript REPL in Node.js you can use tsun package
Install it globally with
npm install -g tsun
and run in your terminal or command prompt with tsun
command
Usage example:
$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12
Running TypeScript using ts-node
ts-node is an npm package which allows the user to run typescript files directly, without the need for precompilation using tsc
. It also provides REPL.
Install ts-node globally using
npm install -g ts-node
ts-node does not bundle typescript compiler, so you might need to install it.
npm install -g typescript
Executing script
To execute a script named main.ts, run
ts-node main.ts
// main.ts
console.log("Hello world");
Example usage
$ ts-node main.ts
Hello world
Running REPL
To run REPL run command ts-node
Example usage
$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit
To exit REPL use command .exit
or press CTRL+C
twice.