Assignment 8 Learning Typescript We are going to play with Typescript, and then we are going to create Entity classes for the Humor Angular Application Steps: 1) create a new folder to hold our experiments with Typescript please create c:\TypescriptPlay 2) Open a Command Prompt to this new folder 3) We are going to use npm to install a Typescript REPL (Read-Execute-Print-Loop) tool enter: npm install -g ts-node 4) We now need to configure the Typescript compiler using Visual Code create a new file in the C:\TypescriptPlay folder named tsconfig.json 5) Add the following single JSON line to this tsconfig.json file: { "compilerOptions": {"target": "ES2016"} } 6) Now we will run the tool in the Command Prompt enter: ts-node 7) We will enter a simple set of commands let x = 21 let y = 4 console.log(x / y) 8) Using Visual Code please build a new Typescript class, name the file (in the TypescriptPlay folder) person.ts (make sure to save the file) and add this code: export class Person { firstName: string; lastName: string; age: number; constructor(fName: string, lName: string, age: number) { this.firstName = fName; this.lastName = lName; this.age = age; } getName() { return this.lastName + ", " + this.firstName; } } 9) In the Command Prompt running ts-node enter this command: .load person.ts you will see the Typescript code displayed 10) We will now create a Person object in the ts-node Command Prompt enter these commands: let p = new Person("John", "Smith", 21); console.log(p.getName()); you will see the getName method run, and the full name displayed on the console 11) Unlike JavaScript Typescript is a strongly typed language if you enter this: let p = new Person("John", "Smith", "21"); <= note the quotes you will get an error message about using a string when a number is required 12) Add this method to the Person class: getDate() { let today = new Date().toLocaleDateString(); return today; } 13) Stop ts-node by entering this command: .exit 14) Restart ts-node, and load the Person class again See steps 6, 9 and 10 to create a Person object 15) Now call the new getDate method console.log(p.getDate()) you will see today's date displayed 16) Exit ts-node 17) The Browser does not run Typescript so Angular compiles it into JavaScript however JavaScript (officially knows as ESMAScript) has a number of verisons and Browser support is not consistent Open a new Command Prompt in the TypescriptPlay folder and run the Typescript compiler with this command: tsc person.ts 18) Using Visual Code open the newly generated person.js file 19) Let's recompile the code with a target of ES2016 (remember we set this in the tsconfig.json file in step 5) tsc --target ES2016 person.ts 20) Using Visual Code look at the person.js file again. Target Options include: ES3 (default) ES5 ES6/ES2015 (synonymous) <= most Browsers will support this ES7/ES2016 ES2017 ES2018 ES2019 ES2020 ESNext <= place holder for experiential features being tried out for the next release 21) Look at the tsconfig.json file in the C:\Humor folder to see the target setting for our application ================================================================================================ We are now going to build the Typescript classes for the Humor Applicaiton All of these file will go into C:\Humor\src\app We will build: category.ts (to hold the details of a specific Category object) we need these fields/types type: string name: string description: string is: string Please add a Constructor that takes these 4 fields Also build numbered-humor.ts using the fields from Assignment #3 Add a keyed-humor.ts, and dated-humor.ts, all of these classes have fields and a Constructor Finally please add a message.ts with a Message class holding: value: string type: string