Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
npm install typescript-g
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"moduleResolution": "node
"outDir": "build/"
},
"files": [
"...
function append( line: string ): string {
return "suffix" + line;
}
var res: string = append( "a string" );
tsc
function append(line) {
return "suffix" + line;
}
var res = append("a string");
tsc
src/app.ts(5,27): error TS2345: Argument
of type 'number' is not assignable to
parameter of type 'string'.
import { foo } from "./foo";
console.log( foo );
export var foo: string = "a string";
"use strict";
var foo_1 = require("./foo");
console.log(foo_1.foo);
"use strict";
exports.foo = "a string";
if ( true ) {
let foo = "foo";
}
console.log( foo ); // undefined
const foo = "foo";
foo = "bar"; // ERROR
let foo = `line
line
line`;
let foo = "foo",
bar = "bar",
str = ` ${foo}, ${bar}`;
console.log( str ); // foo, bar
this.foo = 1;
let res = [ 1, 2, 3 ].map(( n ) => {
return this.foo + n;
});
console.log( res ); // 2, 3, 4
this.foo = 1;
l...
class Foo {
bar() {
return "bar";
}
static baz() {
return "baz";
}
}
console.log( Foo.baz() );
let foo = new Foo();
consol...
class Foo {
bar() {
return "bar";
}
}
class Baz extends Foo {
}
let baz = new Baz();
console.log( baz.bar() );
class Foo {
constructor( arg ) {
this.arg = arg;
}
}
class Bar extends Foo {
constructor( arg ) {
super( arg );
}
}
let ba...
let baz = "baz";
let obj = {
foo: "foo",
bar() {
return "bar";
},
baz
}
console.log( obj ); // Object {
foo="foo", baz="ba...
function foo( start = 0, end = 1 ) {
console.log( start, end );
}
function foo({ start = 0, end = 1 } = {}) {
console.log(...
function log( msg, ...args ) {
console.log( msg, args[ 0 ], "..." );
}
log( "passing nums", 1, 2, 3 ); // passing
nums 1...
function save( foo, bar, baz ) {
console.log( foo, bar, baz );
}
let csv = "foo,bar,baz".split( "," );
save( ...csv ); // ...
const map = new Map();
map.set( "aKey", "a value" );
map.get( "aKey" ); // "a value" value
map.size; // 1
// Key can be an...
const set = new Set([ 1, 2, 3, 4 ]);
set.add( 5 );
set.has( 5 ); // true
set.size; // 5
set.delete( 5 );
set.size; // 4
se...
const ERR_CODE = {
TYPE_ERROR: Symbol(),
SYNTAX_ERROR: Symbol()
}
console.log( ERR_CODE.TYPE_ERROR ===
ERR_CODE.TYPE_ERROR...
let foo, bar, baz;
[foo, bar, baz] = "foo,bar,baz".split( ","
);
let { foo, bar } = obj;
// foo = "foo", bar = "bar"
let obj = { foo: "foo", bar: "bar" };
let { foo: f, bar: b} = obj;
// f = "foo", b = "bar"
let el = document.getElementByI...
{
"compilerOptions": {
…
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
…
}
function Mixin( data ) {
return function( target ){
Object.assign( target.prototype, data );
};
}
@Mixin({
bar: "bar"
})
c...
function Readonly( target, key, descriptor )
{
descriptor.writable = false;
return descriptor;
}
class Foo{
@Readonly
bar(...
function test(){
let arr = Array.from( arguments );
Array.isArray( arr ); // true
arr.includes( 2 ); // true
arr.find( n =...
interface Rectangle {
width: number;
height: number;
calcArea(): number;
}
class Square implements Rectangle {
width: numb...
interface DataMap {
[key: string]: any;
}
function stringify( data: DataMap ){
return JSON.stringify( data );
}
stringify(...
interface DataMap<Val> {
[key: string]: Val;
}
function stringify( data: DataMap<string>
){
return JSON.stringify( data );...
abstract class Foo {
protected bar(){}
}
class Bar extends Foo {
private secret: string = "secret";
public quiz(){
return ...
class Foo {
public constructor( public arg:
string = "default"){
}
}
let foo = new Foo();
console.log( foo.arg ); // defau...
class Foo {
private bar: string = "bar";
baz: number[] = [ 1, 2 ];
static quiz: boolean = true;
}
function geInput(): HTMLInputElement {
let el = <HTMLInputElement>
document.querySelector( "input" );
}
function validate( spec: string | string[]
): boolean {
if ( !Array.isArray( spec ) ) {
spec = <string[]>Array.of( spec );...
npm install typings--global
typings search --name backbone
typingsinstall dt~backbone--global --save
{
…,
"files": [
"./typings/index.d.ts",
…
]
}
class View extends Backbone.View {
events: {
"click button": "onClick"
}
onClick( e: Event ) {
e.preventDefault();
}
}
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
The Flavor of TypeScript
Upcoming SlideShare
Loading in …5
×

The Flavor of TypeScript

769 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

The Flavor of TypeScript

  1. 1. npm install typescript-g
  2. 2. { "compilerOptions": { "target": "ES5", "module": "commonjs", "moduleResolution": "node "outDir": "build/" }, "files": [ "./app.ts" ] }
  3. 3. function append( line: string ): string { return "suffix" + line; } var res: string = append( "a string" );
  4. 4. tsc
  5. 5. function append(line) { return "suffix" + line; } var res = append("a string");
  6. 6. tsc src/app.ts(5,27): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
  7. 7. import { foo } from "./foo"; console.log( foo ); export var foo: string = "a string";
  8. 8. "use strict"; var foo_1 = require("./foo"); console.log(foo_1.foo); "use strict"; exports.foo = "a string";
  9. 9. if ( true ) { let foo = "foo"; } console.log( foo ); // undefined const foo = "foo"; foo = "bar"; // ERROR
  10. 10. let foo = `line line line`; let foo = "foo", bar = "bar", str = ` ${foo}, ${bar}`; console.log( str ); // foo, bar
  11. 11. 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
  12. 12. class Foo { bar() { return "bar"; } static baz() { return "baz"; } } console.log( Foo.baz() ); let foo = new Foo(); console.log( foo.bar() );
  13. 13. class Foo { bar() { return "bar"; } } class Baz extends Foo { } let baz = new Baz(); console.log( baz.bar() );
  14. 14. class Foo { constructor( arg ) { this.arg = arg; } } class Bar extends Foo { constructor( arg ) { super( arg ); } } let bar = new Bar( "arg" ); console.log( bar.arg );
  15. 15. let baz = "baz"; let obj = { foo: "foo", bar() { return "bar"; }, baz } console.log( obj ); // Object { foo="foo", baz="baz", bar=function()}
  16. 16. function foo( start = 0, end = 1 ) { console.log( start, end ); } function foo({ start = 0, end = 1 } = {}) { console.log( start, end ); }
  17. 17. function log( msg, ...args ) { console.log( msg, args[ 0 ], "..." ); } log( "passing nums", 1, 2, 3 ); // passing nums 1...
  18. 18. function save( foo, bar, baz ) { console.log( foo, bar, baz ); } let csv = "foo,bar,baz".split( "," ); save( ...csv ); // foo bar baz
  19. 19. 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();
  20. 20. 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
  21. 21. const ERR_CODE = { TYPE_ERROR: Symbol(), SYNTAX_ERROR: Symbol() } console.log( ERR_CODE.TYPE_ERROR === ERR_CODE.TYPE_ERROR ); // true
  22. 22. let foo, bar, baz; [foo, bar, baz] = "foo,bar,baz".split( "," ); let { foo, bar } = obj; // foo = "foo", bar = "bar"
  23. 23. 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" );
  24. 24. { "compilerOptions": { … "emitDecoratorMetadata": true, "experimentalDecorators": true }, … }
  25. 25. function Mixin( data ) { return function( target ){ Object.assign( target.prototype, data ); }; } @Mixin({ bar: "bar" }) class Foo { } let foo = new Foo(); console.log( foo.bar );
  26. 26. function Readonly( target, key, descriptor ) { descriptor.writable = false; return descriptor; } class Foo{ @Readonly bar(){ } } let foo = new Foo(); foo.bar ="bar"; // ERROR
  27. 27. 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" }
  28. 28. interface Rectangle { width: number; height: number; calcArea(): number; } class Square implements Rectangle { width: number; height: number; calcArea() { this.width * this.height; } }
  29. 29. interface DataMap { [key: string]: any; } function stringify( data: DataMap ){ return JSON.stringify( data ); } stringify({ foo: [ 1,2 ] });
  30. 30. interface DataMap<Val> { [key: string]: Val; } function stringify( data: DataMap<string> ){ return JSON.stringify( data ); } stringify({ foo: "foo" });
  31. 31. abstract class Foo { protected bar(){} } class Bar extends Foo { private secret: string = "secret"; public quiz(){ return this.bar(); } }
  32. 32. class Foo { public constructor( public arg: string = "default"){ } } let foo = new Foo(); console.log( foo.arg ); // default
  33. 33. class Foo { private bar: string = "bar"; baz: number[] = [ 1, 2 ]; static quiz: boolean = true; }
  34. 34. function geInput(): HTMLInputElement { let el = <HTMLInputElement> document.querySelector( "input" ); }
  35. 35. function validate( spec: string | string[] ): boolean { if ( !Array.isArray( spec ) ) { spec = <string[]>Array.of( spec ); } return spec.every( isSpecValid ); }
  36. 36. npm install typings--global typings search --name backbone typingsinstall dt~backbone--global --save
  37. 37. { …, "files": [ "./typings/index.d.ts", … ] }
  38. 38. class View extends Backbone.View { events: { "click button": "onClick" } onClick( e: Event ) { e.preventDefault(); } }

×