TypeScript for Everyone

Presented at CharlotteJS meetup
Charlotte, NC
March 9, 2017

Transcript

1. TypeScript for Everyone Van J. Wilson @vanwilson CharlotteJS Meetup March 9, 2017
2. What is this “TypeScript” thing?
3. TypeScript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. -www.typescriptlang.org
4. Benefits of TypeScript • Adds strong, compile-time type checking to JS • Makes it easier to use traditional object-oriented design patterns, like classes and interfaces, in JS • Easy to learn—extends existing JavaScript syntax • Tracks new Javascript standards, like ES2015 & ES2016, as they come out
5. Why should I care?
8. Next-Gen ES in TypeScript
9. Using TypeScript • Playground: http://www.typescriptlang.org/play/ • NPM: npm install -D typescript@latest - -exact • Use Visual Studio Code • Use Visual Studio (just kidding)
10. Strong Typing
11. Examples of Strong Typing • Type of parameter:
 function foo(operand: number, message: string) • Type of return value:
 function sqrt(operand: number): number
12. Interfaces
13. Interfaces “One of TypeScript’s core principles is that type- checking focuses on the shape that values have… “In TypeScript, interfaces fill the role of naming these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.”
14. Examples of Interfaces • Define:
 interface Point {
 x: number,
 y: number
 }
 • Use:
 function moveTo(position: Point) {
 penX = position.x;
 penY = position.y;
 }
15. Classes
16. Classes “Traditional JavaScript uses functions and prototype- based inheritance to build up reusable components… “Starting with ECMAScript 2015,… JavaScript programmers will be able to build their applications using this object-oriented class-based approach. In TypeScript, we allow developers to use these techniques now, and compile them down to JavaScript that works in [current browsers]…”
17. Example of Classes class LineSegment {
 start: Point;
 end: Point;
 slope: number;
 
 constructor(start: Point, end: Point) {
 this.start = start;
 this.end = end;
 } getSlope() { this.slope = ((this.end.y - this.start.y) / (this.end.x - this.start.x)); return this.slope; } }
18. Auto-creation of class properties class LineSegment {
 slope: number;
 
 constructor(public start: Point, public end: Point) {
 }
 ...
 }
19. Instantiating a Class let firstYear = {
 slope: number; x: 1, y: 3 } let sixthYear = { x: 6, y: 12 } let myIncome = new LineSegment(firstYear, sixthYear);
20. Calling a Class Method let slope = myIncome.getSlope();
21. Types for 3rd-Party Libraries • In the early days of Typescript, this was “fun” • Pre-Typescript 2, you had to use TypeScript Definition Manager (tsd or typings commands) • As of Typescript 2+, you can npm install types packages, just like you do the libraries themselves
22. http://microsoft.github.io/TypeSearch/
23. Using @types • npm install --save jQuery • npm install --save @types/jquery • Typescript compiler will automatically look in ./ node_modules/@types folder for type definitions • (you no longer need the triple-slash reference)
 /// <reference path="jquery/ jquery.d.ts" />
24. Resources • http://www.typescriptlang.org/ 
 -the official TypeScript site • http://blog.angular-university.io/typescript-2-type-system-how-do-type-definitions- work-in-npm-when-to-use-types-and-why-what-are-compiler-opt-in-types/
 -good explanation of the replacement for TypeScript Definition Manager • https://github.com/dzharii/awesome-typescript 
 -curated list of TypeScript resources • https://app.pluralsight.com/library/courses/typescript 
 -good introduction, paid site, free trial available
25. Questions?