Introduction to Type Script by Sam Goldman, SmartLogic
1 like1,304 views
The document introduces TypeScript, describing it as a superset of JavaScript that adds optional static types and transpiles some ECMAScript 2015+ features. It discusses TypeScript's structural type system and type inference, provides examples of structural typing and generics, and describes how to define types for external libraries, write tests, and build a TypeScript project.
![Generics
interface Monoid<T> {
zero: T;
add: (x: T, y: T) => T;
}
var sum: Monoid<number> = {
zero: 0,
add: (x, y) => x + y
}
var product: Monoid<number> = {
zero: 1,
add: (x, y) => x * y
}
function reduce<T>(list: T[], monoid: Monoid<T>): T {
return list.reduce((acc, x) => monoid.add(acc, x), monoid.zero);
}
console.log(reduce([2, 4, 6], sum)); // 12
console.log(reduce([2, 4, 6], product)); // 48](https://image.slidesharecdn.com/introductiontotypescript-150216111443-conversion-gate02/85/Introduction-to-Type-Script-by-Sam-Goldman-SmartLogic-8-320.jpg)
![Parametricity
interface ParametricityExamples {
identity: <T>(x: T) => T;
reverse: <T>(list: T[]) => T[];
constant: <A,B>(a:A) => (b:B) => A;
}](https://image.slidesharecdn.com/introductiontotypescript-150216111443-conversion-gate02/85/Introduction-to-Type-Script-by-Sam-Goldman-SmartLogic-9-320.jpg)
![Build
var typescriptProject = typescript.createProject({
noExternalResolve: true,
noImplicitAny: true,
target: "ES5",
module: "commonjs"
});
gulp.task("compile", function() {
return gulp
.src(["src/**/*.ts", "typings/**/*.d.ts"])
.pipe(sourcemaps.init())
.pipe(typescript(typescriptProject))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("build/src"))
});](https://image.slidesharecdn.com/introductiontotypescript-150216111443-conversion-gate02/85/Introduction-to-Type-Script-by-Sam-Goldman-SmartLogic-14-320.jpg)
![Build
gulp.task("test", ["compile"], function() {
return gulp
.src("build/src/Spec/**/*.js")
.pipe(mocha({ reporter: "spec" }));
});](https://image.slidesharecdn.com/introductiontotypescript-150216111443-conversion-gate02/85/Introduction-to-Type-Script-by-Sam-Goldman-SmartLogic-15-320.jpg)
Introduction to Type Script by Sam Goldman, SmartLogic
- 2. What is TypeScript • typescriptlang.org • Superset of JavaScript • Optional static types • Transpiles some js.next() features • Targets ES3, ES5, and ES6 (new in TypeScript 1.4)
- 3. TypeScript Types • Structural type system, as opposed to nominal • Type inference • Generics
- 4. Structural Types interface Named { name: string; } class Person { name: string; } var p: Named; // OK, because of structural typing p = new Person();
- 5. Structural Types interface Named { name: string; } var x: Named; // y's inferred type is { name: string; location: string; } var y = { name: 'Alice', location: 'Seattle' }; x = y;
- 6. Structural Types var x = (a: number) => 0; var y = (b: number, s: string) => 0; y = x; // OK x = y; // Error
- 7. Type Inference var x = 3; // x: number // Window.onmousedown: (ev: MouseEvent) => any window.onmousedown = function(mouseEvent) { console.log(mouseEvent.buton); //<- Error };
- 8. Generics interface Monoid<T> { zero: T; add: (x: T, y: T) => T; } var sum: Monoid<number> = { zero: 0, add: (x, y) => x + y } var product: Monoid<number> = { zero: 1, add: (x, y) => x * y } function reduce<T>(list: T[], monoid: Monoid<T>): T { return list.reduce((acc, x) => monoid.add(acc, x), monoid.zero); } console.log(reduce([2, 4, 6], sum)); // 12 console.log(reduce([2, 4, 6], product)); // 48
- 9. Parametricity interface ParametricityExamples { identity: <T>(x: T) => T; reverse: <T>(list: T[]) => T[]; constant: <A,B>(a:A) => (b:B) => A; }
- 10. Definition Files • Annotate non-TypeScript libraries with types • Definitions are trusted, not checked • Write your own or download someone else’s
- 11. Using Definition Files • Cool kids provide .d.ts github.com/Reactive-Extensions/RxJS/tree/master/ts github.com/facebook/immutable-js/tree/master/type-definitions • DefinitelyTyped github.com/borisyankov/DefinitelyTyped unofficial, uneven, but good for popular libraries • TSD: TypeScript Definition Manager definitelytyped.org/tsd bundler/npm/bower for .d.ts files
- 12. Working with vim • typescript-vim https://github.com/leafgarland/typescript-vim syntax highlighting, no indentation • vim-js-indent https://github.com/jason0x43/vim-js-indent • typescript-tools https://github.com/clausreinke/typescript-tools code completion, type interrogation, quickfix not yet compatible with 1.4 (issue #39)
- 13. Build require('source-map-support').install(); var gulp = require("gulp"); var typescript = require("gulp-typescript"); var sourcemaps = require("gulp-sourcemaps"); var mocha = require("gulp-mocha");
- 14. Build var typescriptProject = typescript.createProject({ noExternalResolve: true, noImplicitAny: true, target: "ES5", module: "commonjs" }); gulp.task("compile", function() { return gulp .src(["src/**/*.ts", "typings/**/*.d.ts"]) .pipe(sourcemaps.init()) .pipe(typescript(typescriptProject)) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("build/src")) });
- 15. Build gulp.task("test", ["compile"], function() { return gulp .src("build/src/Spec/**/*.js") .pipe(mocha({ reporter: "spec" })); });
- 16. Beware any var square = (n: number): number => n * n; var json: string = '"not a number"'; var edge: number = JSON.parse(json); var area: number = square(edge.width); console.log("The area of the square is", area) // The area of the square is NaN