A hands-on guide full of ready-to-use recipes and code examples

7. npm install typescript-g

8. {
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"moduleResolution": "node
"outDir": "build/"
},
"files": [
"./app.ts"
]
}

9. function append( line: string ): string {
return "suffix" + line;
}
var res: string = append( "a string" );

10. tsc

11. function append(line) {
return "suffix" + line;
}
var res = append("a string");

14. tsc
src/app.ts(5,27): error TS2345: Argument
of type 'number' is not assignable to
parameter of type 'string'.

16. import { foo } from "./foo";
console.log( foo );
export var foo: string = "a string";

17. "use strict";
var foo_1 = require("./foo");
console.log(foo_1.foo);
"use strict";
exports.foo = "a string";

22. if ( true ) {
let foo = "foo";
}
console.log( foo ); // undefined
const foo = "foo";
foo = "bar"; // ERROR

24. let foo = `line
line
line`;
let foo = "foo",
bar = "bar",
str = ` ${foo}, ${bar}`;
console.log( str ); // foo, bar

26. this.foo = 1;
let res = [ 1, 2, 3 ].map(( n ) => {
return this.foo + n;
});
console.log( res ); // 2, 3, 4
this.foo = 1;
let res = [ 1, 2, 3 ].map( n => this.foo +
n );
console.log( res ); // 2, 3, 4

28. class Foo {
bar() {
return "bar";
}
static baz() {
return "baz";
}
}
console.log( Foo.baz() );
let foo = new Foo();
console.log( foo.bar() );

29. class Foo {
bar() {
return "bar";
}
}
class Baz extends Foo {
}
let baz = new Baz();
console.log( baz.bar() );

30. class Foo {
constructor( arg ) {
this.arg = arg;
}
}
class Bar extends Foo {
constructor( arg ) {
super( arg );
}
}
let bar = new Bar( "arg" );
console.log( bar.arg );

32. let baz = "baz";
let obj = {
foo: "foo",
bar() {
return "bar";
},
baz
}
console.log( obj ); // Object {
foo="foo", baz="baz", bar=function()}

34. function foo( start = 0, end = 1 ) {
console.log( start, end );
}
function foo({ start = 0, end = 1 } = {}) {
console.log( start, end );
}

35. function log( msg, ...args ) {
console.log( msg, args[ 0 ], "..." );
}
log( "passing nums", 1, 2, 3 ); // passing
nums 1...

36. function save( foo, bar, baz ) {
console.log( foo, bar, baz );
}
let csv = "foo,bar,baz".split( "," );
save( ...csv ); // foo bar baz

38. const map = new Map();
map.set( "aKey", "a value" );
map.get( "aKey" ); // "a value" value
map.size; // 1
// Key can be an object
map.set( window, "a value" );
map.forEach(( value, key ) => {
//..
});
map.has( "aKey" ); // true
map.delete( "aKey" );
map.clear();

39. const set = new Set([ 1, 2, 3, 4 ]);
set.add( 5 );
set.has( 5 ); // true
set.size; // 5
set.delete( 5 );
set.size; // 4
set.forEach( console.log ); // 1, 2, 3, 4
set.clear();
set.size; // 0

41. const ERR_CODE = {
TYPE_ERROR: Symbol(),
SYNTAX_ERROR: Symbol()
}
console.log( ERR_CODE.TYPE_ERROR ===
ERR_CODE.TYPE_ERROR ); // true

43. let foo, bar, baz;
[foo, bar, baz] = "foo,bar,baz".split( ","
);
let { foo, bar } = obj;
// foo = "foo", bar = "bar"

44. let obj = { foo: "foo", bar: "bar" };
let { foo: f, bar: b} = obj;
// f = "foo", b = "bar"
let el = document.getElementById( "#foo" );
const { querySelector, querySelectorAll } =
el;
querySelector( ".class" );

47. {
"compilerOptions": {
…
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
…
}

48. function Mixin( data ) {
return function( target ){
Object.assign( target.prototype, data );
};
}
@Mixin({
bar: "bar"
})
class Foo {
}
let foo = new Foo();
console.log( foo.bar );

49. function Readonly( target, key, descriptor )
{
descriptor.writable = false;
return descriptor;
}
class Foo{
@Readonly
bar(){
}
}
let foo = new Foo();
foo.bar ="bar"; // ERROR

51. function test(){
let arr = Array.from( arguments );
Array.isArray( arr ); // true
arr.includes( 2 ); // true
arr.find( n => n === 2 ); // 2
}
test( 1, 2, 3 );
let foo = { foo: "foo" };
Object.assign( foo, { bar: "bar" } );
foo; // { foo: "foo", bar: "bar" }

54. interface Rectangle {
width: number;
height: number;
calcArea(): number;
}
class Square implements Rectangle {
width: number;
height: number;
calcArea() {
this.width * this.height;
}
}

55. interface DataMap {
[key: string]: any;
}
function stringify( data: DataMap ){
return JSON.stringify( data );
}
stringify({ foo: [ 1,2 ] });

56. interface DataMap<Val> {
[key: string]: Val;
}
function stringify( data: DataMap<string>
){
return JSON.stringify( data );
}
stringify({ foo: "foo" });

58. abstract class Foo {
protected bar(){}
}
class Bar extends Foo {
private secret: string = "secret";
public quiz(){
return this.bar();
}
}

60. class Foo {
public constructor( public arg:
string = "default"){
}
}
let foo = new Foo();
console.log( foo.arg ); // default

61. class Foo {
private bar: string = "bar";
baz: number[] = [ 1, 2 ];
static quiz: boolean = true;
}

63. function geInput(): HTMLInputElement {
let el = <HTMLInputElement>
document.querySelector( "input" );
}

65. function validate( spec: string | string[]
): boolean {
if ( !Array.isArray( spec ) ) {
spec = <string[]>Array.of( spec );
}
return spec.every( isSpecValid );
}

68. npm install typings--global
typings search --name backbone
typingsinstall dt~backbone--global --save

69. {
…,
"files": [
"./typings/index.d.ts",
…
]
}

70. class View extends Backbone.View {
events: {
"click button": "onClick"
}
onClick( e: Event ) {
e.preventDefault();
}
}