typescript - stanford universityweb.stanford.edu/class/cs106aj/res/lectures/typescript.pdf ·...
TRANSCRIPT
![Page 1: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/1.jpg)
TypeScriptJonathan Kula12/3/2018
![Page 2: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/2.jpg)
Introducing TypeScript
● A superset of JavaScript. This means that all JavaScript code is valid TypeScript code!
● TypeScript just adds some new features that will make your life easier.● TypeScript adds a step between “code” and “browser” that checks your
code for consistency. (This is called the compiler.)● TypeScript also adds additional syntax so you can tell the compiler what
you’re trying to do; then, it’ll try to help you do that.● It’s all about making your code more consistent.
![Page 3: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/3.jpg)
![Page 4: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/4.jpg)
function makeCircle(radius, x, y, gw) { let oval = GOval(x, y, radius * 2, radius * 2); gw.add(oval);}
let gw = GWindow(400, 400);
makeCircle(50, 200, 200);
![Page 5: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/5.jpg)
function makeCircle(radius, x, y, gw) { let oval = GOval(x, y, radius * 2, radius * 2); gw.add(oval);}
let gw = GWindow(400, 400);
makeCircle(50, 200, 200);
![Page 6: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/6.jpg)
![Page 7: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/7.jpg)
function createSquare(config) { return { width: config.width, height: config.height, color: config.color, area: config.width * config.height, perimeter: config.width * 2 + config.height * 2 }}
console.log("Creating square with color green!");
let square = createSquare({width: 2, height: 2, colour: "Green"});
console.log("The new square's color is: " + square.color);
![Page 8: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/8.jpg)
function createSquare(config) { return { width: config.width, height: config.height, color: config.color, area: config.width * config.height, perimeter: config.width * 2 + config.height * 2 }}
console.log("Creating square with color green!");
let square = createSquare({width: 2, height: 2, colour: "Green"});
console.log("The new square's color is: " + square.color);
![Page 9: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/9.jpg)
![Page 10: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/10.jpg)
Type Annotation
let variableName: TypeName;
const CONSTANT_NAME: TypeName;
function functionName(param1: Type1, param2: Type2): ReturnType {
![Page 11: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/11.jpg)
Type Annotation
let age: number = 20;
const ALPHABET: string = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
function divides(divisor: number, dividend: number): boolean {
![Page 12: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/12.jpg)
Type Inference
let foo = "Hello";
let foo: string = "Hello";
These statements are equivalent because of type inference.
![Page 13: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/13.jpg)
Type Inference
let foo = 1;
let foo: string = 1;
These statements are not equivalent because of type inference.(The second statement throws an error; 1 is not a string!)
![Page 14: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/14.jpg)
What types are there?
● Here are types you’ve worked with!○ number○ string○ boolean○ null○ undefined○ object○ function○ any
![Page 15: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/15.jpg)
What types are there?
● Here are types you’ve worked with!○ number○ string○ boolean○ null○ undefined○ object○ function○ any
Primitive Types:“simple” types –You build all other types out of primitive types.
![Page 16: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/16.jpg)
What types are there?
● Here are types you’ve worked with!○ number○ string○ boolean○ null○ undefined○ object○ function○ any
Primitive Types:“simple” types –You build all other types out of primitive types.Non-Primitive Types:Everything else.
![Page 17: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/17.jpg)
What types are there?
● Here are types you’ve worked with!○ number○ string○ boolean○ null○ undefined○ object○ function○ any
Primitive Types:“simple” types –You build all other types out of primitive types.Non-Primitive Types:Everything else.any:A special type that can represent anything!
![Page 18: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/18.jpg)
What types are there?
● Here are types you’ve worked with!○ number○ string○ boolean○ null○ undefined○ object○ function○ any
● And some types you haven’t.○ symbol○ never
Primitive Types:“simple” types –You build all other types out of primitive types.Non-Primitive Types:Everything else.any:A special type that can represent anything!
← ask me about these after class!
![Page 19: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/19.jpg)
What types are there?
● Here are types you’ve worked with!○ number○ string○ boolean○ null○ undefined○ object○ function○ any
Primitive Types:“simple” types –You build all other types out of primitive types.Non-Primitive Types:Everything else.any:A special type that can represent anything!
![Page 20: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/20.jpg)
What types are there?
● Here are types you’ve worked with!○ number○ string○ boolean○ null○ undefined○ object○ function○ any
← Seems like this describes an awful lot...
![Page 21: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/21.jpg)
let dog = { type: 'mammal', name: 'dog', sounds: ['woof', 'bark', 'yip', 'ruff']};let cat = { type: 'mammal', name: 'cat', sounds: ['meow', 'purr', 'hiss']};
let enigma = { rotors: [], lamps: [], keys: []};
let key = {};key.letter = "A";key.mouseDownAction = function () {
};
let profile = { name: "Jonathan Kula", imageUrl: "http://image.url/img.png", language: "English"};
let jonathan = { favoriteColor: "Green", name: "Jonathan Kula", status: "Active", classes: [ { name: "CS106AJ", role: "SL", grade: -1 }, { name: "CS103", role: "Student", grade: 87.5 } ]};
![Page 22: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/22.jpg)
Interfaces
● Interfaces describe the structure of objects.
![Page 23: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/23.jpg)
Interfaces
● Interfaces describe the structure of objects.● Interfaces are not objects.● Interfaces have no functionality – they only describe other objects.
interface InterfaceName { property1: Type1 property2: Type2}
![Page 24: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/24.jpg)
Interfaces
● Interfaces describe the structure of objects.● Interfaces are not objects.● Interfaces have no functionality – they only describe other objects.
interface Point { x: number y: number}
![Page 25: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/25.jpg)
Function Annotations
● What if we wanted to make an interface for an Enigma key?
![Page 26: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/26.jpg)
Function Annotations
● What if we wanted to make an interface for an Enigma key?
interface WithFunction { func: (param1: Type1, param2: Type2) => ReturnType}
![Page 27: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/27.jpg)
Function Annotations
● What if we wanted to make an interface for an Enigma key?
interface Key { letter: string onMouseDown: () => void}
● void is a special type meaning “doesn’t return anything”
![Page 28: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/28.jpg)
Map Annotations
● What about using objects as maps?
![Page 29: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/29.jpg)
Map Annotations
● What about using objects as maps?
interface Phonebook { [name: KeyType]: ValueType}● The KeyType can be either string or number.
![Page 30: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/30.jpg)
Map Annotations
● What about using objects as maps?
interface Phonebook { [name: string]: string}
● The KeyType can be either string or number.
![Page 31: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/31.jpg)
Classes in TypeScript
● Think of them like “Interfaces with functionality”● You use “class-like factory functions” in Teaching Machine, Adventure, and
when coding using object-oriented ideas.● Classes are types too, much like interfaces!
![Page 32: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/32.jpg)
Classes in TypeScript
● Make an object of a class by using the new keyword.● Refer to properties of the class using the this keyword.● this inside a class refers to “the current object.”
let jonathan = new Profile("Jonathan Kula", "http://image.url/", "English");let ryan = new Profile("Ryan Eberhardt", "http://image.url/", "English");
jonathan.getName(); // “this” now refers to jonathan – returns “Jonathan Kula”ryan.getName(); // “this” now refers to ryan – returns “Ryan Eberhardt”
![Page 33: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/33.jpg)
Acquiring Typescript
● Download nodejs LTS from https://nodejs.org/en/● Open a Powershell (Windows) or Terminal (macOS or Linux)● Type npm install -g typescript
![Page 34: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/34.jpg)
Setting Up Typescript
● Download TypeScript configuration file from the course website.○ I can break it down after class if you’re interested!
● Put that file in your project folder.
![Page 35: TypeScript - Stanford Universityweb.stanford.edu/class/cs106aj/res/lectures/Typescript.pdf · Classes in TypeScript Make an object of a class by using the new keyword. Refer to properties](https://reader034.vdocuments.net/reader034/viewer/2022042107/5e86481b5bd5822bac35fc1e/html5/thumbnails/35.jpg)
Using TypeScript
Manually:
● Open Powershell/Terminal, go to your project directory using cd, then type tsc to build all .ts files into .js files!
Better:
● Get an IDE that supports TypeScript!● I use both WebStorm and Visual Studio Code.
○ I prefer WebStorm, but it’s only free while you’re a student. Visual Studio Code is also quite good, and free. I have a slide deck about how to acquire WebStorm here.