What is TypeScript? TypeScript = JavaScript TypeScript = Modern - - PowerPoint PPT Presentation

▶
what is typescript typescript javascript typescript
SMART_READER_LITE
LIVE PREVIEW

What is TypeScript? TypeScript = JavaScript TypeScript = Modern - - PowerPoint PPT Presentation

Jul 18, 2023 376 likes •915 views

What is TypeScript? TypeScript = JavaScript TypeScript = Modern JavaScript TypeScript = Modern JavaScript + Types Open source and open development Closely track ECMAScript standard Innovate in type system Best of breed tooling Continuously

slide-1
SLIDE 1
slide-2
SLIDE 2
slide-3
SLIDE 3

What is TypeScript?

slide-4
SLIDE 4
slide-5
SLIDE 5

TypeScript = JavaScript

slide-6
SLIDE 6

TypeScript = Modern JavaScript

slide-7
SLIDE 7

TypeScript = Modern JavaScript + Types

slide-8
SLIDE 8

Open source and open development Closely track ECMAScript standard Innovate in type system Best of breed tooling Continuously lower barrier to entry Community, community, community

slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11

ArrayList<Dog> dogs = new ArrayList<Dog>();

slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14

function cost(items) { let total = 0; for (let item of items) { total += item.price; } return total; }

slide-15
SLIDE 15

function cost(items) { let total = 0; for (let item of items) { total += item.price; } return total; }

any

slide-16
SLIDE 16

function cost(items: any) { let total = 0; for (let item of items) { total += item.price; } return total; }

slide-17
SLIDE 17

declare let foo: any; // All of these are allowed! foo.bar; foo.baz; foo += foo; foo *= foo / foo; foo(); new foo();

slide-18
SLIDE 18

function cost(items: any) { let total = 0; for (let item of items) { total += item.price; } return total; }

slide-19
SLIDE 19

function cost(items: any) { let total = 0; for (let item of items) { total += item.price; } return total; }

number

slide-20
SLIDE 20

function cost(items: any): number { let total: number = 0; for (let item of items) { total += item.price; } return total; }

slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23

let n: number = 0; let s: string = ""; let b: boolean = false;

slide-24
SLIDE 24

function originDistance(point) { return Math.sqrt(point.x ** 2 + point.y ** 2); }

slide-25
SLIDE 25

function originDistance(point) { return Math.sqrt(point.x ** 2 + point.y ** 2); }

slide-26
SLIDE 26

function originDistance(point) { return Math.sqrt(point.x ** 2 + point.y ** 2); }

  • riginDistance({ x: 100, y: 100 });

class Coordinate { x = 0; y = 0; }

  • riginDistance(new Coordinate());
slide-27
SLIDE 27

interface HasXY { x: number; y: number; } function originDistance(point: HasXY) { return Math.sqrt(point.x ** 2 + y ** 2); } class Coordinate { x = 0; y = 0; }

  • riginDistance(new Coordinate());
slide-28
SLIDE 28

interface HasXY { x: number; y: number; } function originDistance(point: HasXY) { return Math.sqrt(point.x ** 2 + y ** 2); } class Coordinate { x = 0; y = 0; }

  • riginDistance({ x: 0, y: 0 });
slide-29
SLIDE 29

interface CoordinateI { x: number; y: number; } let p: CoordinateI; class CoordinateC { x = 0; y = 0; } let p: CoordinateC; let p: { x: number, y: number }

slide-30
SLIDE 30
slide-31
SLIDE 31

function padLeft(str: string, padding: any) { let padChar; let padCount; if (typeof padding === "number") { padChar = " "; padCount = padding; } else { padCount = padding.count; padChar = padding.char; } return Array(padCount + 1).join(padChar) + str; }

slide-32
SLIDE 32

function padLeft(str: string, padding: any) { let padChar; let padCount; if (typeof padding === "number") { padChar = " "; padCount = padding; } else { padCount = padding.count; padChar = padding.char; } return Array(padCount + 1).join(padChar) + str; }

slide-33
SLIDE 33

function padLeft(str: string, padding: any) { let padChar; let padCount; if (typeof padding === "number") { padChar = " "; padCount = padding; } else { padCount = padding.count; padChar = padding.char; } return Array(padCount + 1).join(padChar) + str; }

slide-34
SLIDE 34

function padLeft(str: string, padding: number | Options) { let padChar; let padCount; if (typeof padding === "number") { padChar = " "; padCount = padding; } else { padCount = padding.count; padChar = padding.char; } return Array(padCount + 1).join(padChar) + str; }

slide-35
SLIDE 35
slide-36
SLIDE 36

/** * @param component A component * @param value Must be either "left", "right" or "center" */ function align(component: any, value: string) { // ... }

slide-37
SLIDE 37

/** * @param component A component * @param value Must be either "left", "right" or "center" */ function align(component: any, value: "left" | "right" | "center") { // ... }

slide-38
SLIDE 38

/** * @param component A component * @param value Must be either "left", "right" or "center" */ function align(component: any, value: "left" | "right" | "center") { // ... } align(Foo, "centre");

slide-39
SLIDE 39

number string boolean

slide-40
SLIDE 40

number string boolean

slide-41
SLIDE 41

number string boolean

slide-42
SLIDE 42

number string boolean undefined null

slide-43
SLIDE 43

number undefined

slide-44
SLIDE 44

number undefined number | undefined

slide-45
SLIDE 45
slide-46
SLIDE 46

let foo = { bar: 0 }; foo.bar = 100; foo["bar"] = 100;

slide-47
SLIDE 47

function get(obj, propName) { // do some stuff... return obj[propName]; } function set(obj, propName, value) { // do some stuff...

  • bj[propName] = value;

} get(someObj, "some-property"); set(someObj, "other-property", 100);

slide-48
SLIDE 48

{ x: T, y: U } T | U T & U keyof T T[K] { [P in K]: X } T extends U ? X : Y

slide-49
SLIDE 49
slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53

http://typescriptlang.org