TypeScript is a typed superset of JavaScript developed by Microsoft that can be used for both client and server-side development. It provides optional static typing, classes, and interfaces to JavaScript and is transpiled to JavaScript. Some key features of TypeScript include support for basic types like boolean, number, string, enums, generics, and decorators. It also supports features like classes, modules, and arrow functions. TypeScript code can be compiled to standard JavaScript so it works across all JavaScript environments.
2. Who am I?
• Jacob Orshalick
• Principal Consultant
• solutionsfit
3. TypeScript Intro
• Developed and maintained by Microsoft
• Can be used on client and server (node.js)
• Any JavaScript program is valid TypeScript
• Definition files allow for use of existing JS libs
• Transpiled (source-to-source compiling)
• Angular 2 is written in TypeScript
• AtScript was absorbed into TypeScript 1.5
4. Why TypeScript?
• Application-scale JavaScript
• Tomorrow’s JavaScript today
• Transpiles to readable, standards-based JS
• First class types, classes, and modules
5. TypeScript Tutorial
• We need a compiler
• https://github.com/Microsoft/TypeScript/
• npm install -g typescript
6. Basic Types
let showQuote: boolean = false;
let numberOfQuotes: number = 15;
let movieName: string = "Waterboy";
let charactersArray: string[] =
[“Napoleon Dynamite", “Pedro”, “Uncle Rico”];
7. Tuples
let quoteTuple: [string, string] =
[“Nacho Libre", “I looked like a fool last night”];
Error:
quoteTuple = [“Nacho Libre", false];
8. Enums
enum MovieType {Comedy, Drama, Action};
let favoriteMovieTypes: MovieType[] =
[MovieType.Comedy, MovieType.Action];
let leastFavoriteMovieTypes: Drink[] =
[MovieType[1]];
enum MovieType {Comedy = 1, Drama = 5, Action = 6};
let favoriteMovieTypes: MovieType[] =
[MovieType[1], MovieType[6]];
9. Other Types
• any: useful for existing applications
• void: useful for function definitions
let favoriteQuotesOrMovieType : any =
MovieType.Comedy;
favoriteQuotesOrMovieType =
“Now that’s high quality H2O";
function askQuestion() : void {
alert(‘What is your favorite quote?');
}
10. let keyword
function getMessage(init: boolean) {
if (init) {
var message = "Weird";
}
return message;
}
console.log(getMessage(true)); // 1
console.log(getMessage(false)); // 2
11. let keyword
function getMessage(init: boolean) {
if (init) {
let message = "Weird";
}
return message;
}
console.log(getMessage(true)); // 1
console.log(getMessage(false)); // 2
12. Looping
• for … of statements (targets values)
• for … in statements (targets keys)
let multiCharacterQuotes: string[string,string][] =
[["Coach", "Gatorade!"], ["Bobby Boucher", "You're drinking the wrong water!”]];
for (let quote of multiCharacterQuotes) {
console.log(quote[0] + “: “ + quote[1]);
// “Coach: Gatorade!”, “Bobby Boucher: You’re drinking the wrong water!”
}
let multiCharacterQuotes: string[string,string][] =
[["Coach", "Gatorade!"], ["Bobby Boucher", "You're drinking the wrong water!”]];
for (let i in multiCharacterQuotes) {
console.log(i); // “0”, “1”
}
13. Arrow Functions
class Movie {
public quoteForDisplay: string;
constructor(public quotes: string[]) {}
randomizeQuote = () => {
this.quoteForDisplay =
this.quotes[
Math.floor(Math.random() * this.quotes.length)];
}
}
let movie = new Movie([“Get that corn outta my face”,
“I wanna win!”]);
setTimeout(movie.randomizeQuote,1000);
14. Annotations… wait, I mean
decorators
• Annotations are supported with TypeScript
• Referred to as decorators
• As with other languages, used for framework
configuration
15. imports and exports
• … or namespaces and module resolution
• Just the basics here:
movie.ts:
export class Movie {
// ...
}
App.ts
import {Movie} from './movie.ts';
let movie: Movie = new Movie(“Nacho Libre");
