IT6203 IT Design Studio

Module 6 TypeScript and JSON

Introduction and Module Summary

In this module, you will learn about JavaScript history and how JavaScript is related to TypeScript. You will write TypeScript code, compile and run it in a browser and in a console window.  You will learn about JavaScript Object Notation.

Objectives and Outcomes

This module directly supports highlighted course outcome(s) Students who complete this course successfully will be able to 1.      Plan, design, and develop as a team a complete IT application that consists of sub-system components. 2.      Implement and test the IT application integration. Module outcomes and activities: After completing this module, students will be able: Write, compile and run TypeScript code Use JSON files Create and test a disaster recovery plan for your project Read assigned materials introduced introduced Watch assigned videos reinforced Complete Module  Lab reinforced/mastered mastered mastered

Required Materials

1.      Is JavaScript a (true) OOP language? https://medium.com/@andrea.chiarelli/is-javascript-a-true-oop-language-c87c5b48bdf0 2.      TypeScript Basic Types https://www.typescriptlang.org/docs/handbook/basic-types.html 3.      TypeScript Interfaces https://www.typescriptlang.org/docs/handbook/interfaces.html 4.      Write Object-Oriented JavaScript with TypeScript http://rachelappel.com/write-object-oriented-javascript-with-typescript/ 5.      Generate TypeScript interfaces from JSON data https://www.youtube.com/watch?v=NHi455y3V2k (3 min video)

Optional Materials

1.      V8 https://github.com/v8/v8/wiki 2.      Get ready : a new V8 is coming, Nodde.JS performance is changing https://medium.com/the-node-js-collection/get-ready-a-new-v8-is-coming-node-js-performance-is-changing-46a63d6da4de 3.      Make Types from JSON files https://jvilk.com/MakeTypes/

Assessments and Assignments

1.      Module Lab (10 points)

Topics

Open the navigation pane

Module Checklist

This is the suggested order of the completion of this module. Save a copy of this file on your computer and make notes in this document while you are completing your assignments. Use the table below to keep track of your progress. Activity Completion Read this module & assigned readings, and watch assigned videos (3 hours) NO Complete Module  Lab (1 hour) NO Complete Module feedback at the end of the module NO Read feedback provided for your lab. NO

 

JavaScript Engine

 

You should be familiar with JavaScript already. IT 5433 that covers JavaScript is the prerequisite for this course. All major browsers have a dedicated JavaScript engine.

If you need to refresh your JavaScript, use https://javascript.info/ or https://www.w3schools.com/js/ or any other tutorials.

JavaScript was first used on a client-side in web browsers. Now JavaScript engines are embedded not only in web browsers but in web servers (e.g., Node.JS), database management systems, office, and PDF software.

JavaScript is an interpreted language. A web browser interprets JavaScript just as it interprets HTML. However, in early 2000s several vendors proposed to use compilers to improve JavaScript performance. Chrome was the first browser with build-in JavaScript compiler. Just-In-Time (JIT) compiler boosted JavaScript performance.

V8 is Google’s open source high-performance JavaScript engine, written in C++ and is part of Google Chrome. V8 compiles and executes JavaScript source code, handles memory allocation for objects, and garbage collects objects it no longer needs. You can think about V8 as JavaScript VM. Node.JS depends on V8JavaScript Engine.

In 2017 V8 released with a new Just In Time (JIT) Compiler: Turbofan that improves throughput by over 45%.

http://benediktmeurer.de/2017/03/01/v8-behind-the-scenes-february-edition/

 

JavaScript is a weakly typed language. All strongly typed languages have stricter typing rules at compile time and thus fewer errors. Is length a number or a string?

var length = 123;

length = ‘123 feet’;

 

TypeScript is a superset of JavaScript and strongly typed. It is designed for development of large applications. TypeScript code is compiled to JavaScript. It is a source-to-source compilation without changing the level of abstraction.

var length: number = 123;

length = ‘123 feet’;      //Error: cannot assign a string to a number

 

In addition, TypeScript supports class-based object-oriented programming.

TypeScript

In this section, we will install TypeScript and run several examples.

Installation and Strong Typing

1. Install TypeScript npm install -g typescript
2. Create in the IT6203test folder directory for TypeScript code and call it typescript
3. Open this folder with VSCode.
4. Create a new file and call it ts

 

function hello(fname) {

return “Hello, ” + fname;

}

 

let fname = “Jane”;

 

document.body.innerHTML = hello(fname);

 

5. In a new terminal window run tsc hello.ts This command will create a js file in the same directory
6. Generated code is exactly the same as TypeScript code except let was changed to var.
7. Create html file in the same directory

<!DOCTYPE html>

<html>

<head><title>Hello</title></head>

<body>

<script src=”hello.js”></script>

</body>

</html>

8. Open html in the browser. You should see “Hello, Jane”
9. Create a new file and call it ts

 

function feet(length) {

return 5 + length;

}

 

var length = “123 feet”;

 

document.body.innerHTML = feet(length);

 

10. VSCode will show an error message that length must be a number, not a string
11. In the terminal window run tsc feet.ts This command will display an error message, but will still create a js file in the same directory
12. Modify ts to explicitly declare length as a number:

 

function feet(length) {

return 5 + length;

}

 

var length : number= 123;

 

document.body.innerHTML = feet(length);

13. In the terminal window run tsc feet.ts It should not have any errors and update js file.
14. The only difference between the two files: information about type is removed.
15. The compiler did not complain about var let, but you should use newer JavaScript construct let.
16. Create html file in the same directory

<!DOCTYPE html>

<html>

<head><title>Feet calculation</title></head>

<body>

<script src=”feet.js”></script>

</body>

</html>

17. Open html in the browser. You should see the number 128 displayed. It is the result of addition of 123 and 5

 

Basic Types

TypeScript supports basic types including boolean, numbers, strings and arrays. It also has a unique type like void, never and any. https://www.typescriptlang.org/docs/handbook/basic-types.html

1. Modify ts to add console output:

function feet(x) {

return 5 + x;

}

 

let myLength : number= 123;

console.log(feet(myLength));

 

2. In the terminal window run tsc feet.ts It will update js file.
3. In the terminal window run node feet.js It will execute the js file. The result will be 128
4. Modify ts to add an example of other data types:

function feet(x) {

return 5 + x;

}

 

let myLength : number= 123;

console.log(feet(myLength));

 

//Tuple example

let currency: [number, string];

currency = [10, “USD”];

console.log(currency[0] + ” ” + currency[1])

 

 

//String example

let substr: string = ‘dog’;

let notaword: string = ‘under${substr}’;

console.log(notaword);

let word: string = `under${substr}`;

console.log(word);

 

5. The result will beTuple allows mixing different types of elements in one array. The index is used to access elements of a tuple.
   On line 13 variable notaword was declared almost the same way as variable word on line 15. notaword is a regular string. word is a template string, which can span multiple lines and have embedded expressions. These strings are surrounded by the backtick/backquote (`) character, and embedded expressions as ${ expr }.
6. If the variable substr is modified, the variable word will not be modified as a result:

 

[omitted code]

 

let word: string = `under${substr}`;

console.log(word);

substr =’stand’;

console.log(word);

let html: string = `<div>${substr}</div>`;

console.log(html);

 

7. Compile and run the codeThe variable word still has the value underdog, but the new template string html uses the new value of the variable substr.

 

Structural Subtyping

TypeScript has two ways to declare a variable structure:

Inline annotation

1. Modify the ts file to create a variable myStudent that will hold a student’s name and age. The type-checker checks the call to displayName function has a single parameter that requires that the object passed in has two properties: fname string and age number. The object myStudent has more properties, but the compiler only checks that at least the ones required are present and match the types required.

function displayName(personObj: {fname: string, age: number}) {

console.log(`<h1> ${ personObj.fname} (${personObj.age})</h1>`);

 

}

 

let myStudent = { fname: “Jane”, lname: “Doe”, age: 15};

 

displayName(myStudent);

2. Compile and execute the code. Jane (15) will be displayed.

Annotation Using Interface

1. Modify the ts file to create an Interface Person and use it to create a variable called myStudent. Function argument also can be changed to the interface Person.

function displayName(personObj: Person) {

console.log(`<h1> ${ personObj.fname} (${personObj.age})</h1>`);

 

}

interface Person { fname: string, lname: string, age: number};

let myStudent : Person = { fname: “Jane”, lname: “Doe”, age: 15};

 

displayName(myStudent);

2. Compile and execute the code. The same result: Jane (15) will be displayed.
3. Not all properties of an interface might be required. A question mark following a property name is used to mark it optional. If we delete age : 15 from the ts file, during compilation, “Property ‘age’ is missing” will be displayed.But if we make age an optional property by adding a question mark after age, there will be no compilation errors, and the result will be Jane (undefined).

function displayName(personObj: Person) {

console.log(`<h1> ${ personObj.fname} (${personObj.age})</h1>`);

 

}

interface Person {

fname: string,

lname: string,

age?: number

};

let myStudent : Person = { fname: “Jane”, lname: “Doe”};

 

displayName(myStudent);

 

Class-Based Object-Oriented Programming (OOP) with TypeScript

OOP Concepts

Abstraction: hides all but the relevant data about an object in order to reduce complexity and increase efficiency.

Inheritance:  allows building new objects that share some of the attributes of existing objects.

Polymorphism:  allows processing objects differently based on their type or context.

Encapsulation: allows hiding values or state of an object.

 

1. Create a new file and call it ts. We will use the same interface and function but will add class Student with a constructor and a few public fields. Interface Person and class Student are two different levels of abstraction.

 

class Student {

studentInfo: string;

constructor(public fname: string, public lname: string, public netID: number) {

this.studentInfo = fname + ” ” + lname + ” ” + netID;

}

}

 

interface Person {

fname: string;

lname: string;

age?: number

}

 

function displayName(personObj: Person) {

console.log(`<h1> ${ personObj.fname} (${personObj.age})</h1>`);

 

}

 

let ann = new Student(“Ann”, “Green”, 12345);

 

//Ann as a person

displayName(ann);

 

//Ann as a student

console.log(“Full student information: ” + ann.studentInfo);

 

2. Compile and run the code. You should receive: output:
   <h1> Ann (undefined)</h1>
   Full student information: Ann Green 12345

 

JSON: JavaScript Object Notation

JSON is a data interchange format it is self-descriptive, human readable, hierarchical and supports arrays.

Examples:

Students JSON

[ { “firstName” : “John” , “lastName” : “Dow” },

{ “firstName” : “Ann” , “lastName” : “Smith” },

{ “firstName” : “Joan” , “lastName” : “Doe” }]

http://jsonviewer.stack.hu/

 

https://json.org/example.html

{“menu”: {

“id”: “file”,

“value”: “File”,

“popup”: {

“menuitem”: [

{“value”: “New”, “onclick”: “CreateNewDoc()”},

{“value”: “Open”, “onclick”: “OpenDoc()”},

{“value”: “Close”, “onclick”: “CloseDoc()”}

]

}

}}

JSON with TypeScript

1. Use the example from previous section to create a new file json
2. Use http://json2ts.com/ to generate TypeScript interface code and save it in the ts file. Give interface name StudentObject

export interface StudentObject {

firstName: string;

lastName: string;

}

3. Create new file ts

//import ts students

import {StudentObject} from “./students”

 

let student1: StudentObject;

student1.firstName

 

You can see that VSCode recognizes interface StudentObject.

4. We will learn how to read files later.

Import JSON file into MongoDB

To import students.json into MongoDB:

1. Use File Explorer to copy the json file to C:\Progra~1\MongoDB\Server\4.0\bin directory.
2. Open PowerShell and change to C:\Progra~1\MongoDB\Server\4.0\bin directory.

cd C:\Progra~1\MongoDB\Server\4.0\bin

3. Run mongoimport utility to import JSON file:

.\mongoimport –db  IT6203  –collection  Students  –type json –file students.json –jsonArray

4. Start MongoDB and query newly created database:

./mongo

 

 

use IT6203

db.Students.find()

 

You should see records you imported. Note that MongoDB is case sensitive and if you search for db.students.find() no results will be found.

 

 

5. To export collection as JSON file, you have to run PowerShell as administrator. It needs permission to create a new
6. Start PowerShell as administrator.

cd C:\Progra~1\MongoDB\Server\4.0\bin

 

./mongoexport –db IT6203 –collection Students –out newstudents.json

7. Open the json file with VSCode. You will find all three records.

 

Lab

Before you start the lab, you have to run and understand all code form this module.

1. (6 points) Create a disaster recovery plan for your project.
   1. What will be the ideal backup schedule for your project?
   2. What type of backup will work the best for your development environment?
   3. Identify steps you need to perform to reinstall all required software.
   4. Provide a detailed description of what would you do in case of a complete failure of your development environment.
   5. How can you test your solution?

To receive full points for this question you have to demonstrate how you will recover your development environment. I recommend using CSE Standard VM to test your disaster recovery plan.

2. (2 points) Export MongoDB database you created for your group as a JSON file. Generate interface for a MemberObject. Create a ts
3. (2 points) Use generated an interface to initialize a variable holding your information. Write a displayMemberInformation function to display all the information about the member. This function will be similar to displayName function from this module.

What to submit:

One lab report docx file that contains questions and answers that include:

1. Selectable code that can be copied from the report and ran in the development environment to reproduce your solution.
2. Screenshots showing successful execution of code in your development environment.
3. Screenshots demonstrating results.

 

Include feedback for this module that includes:

1. Difficulty (-2 – too easy … 0 – just right … 2 – too hard)
2. Interest level (-2 – low interest … 0 – just right … 2 – high interest)
3. Time to read assigned material (including module)
4. Time to complete the lab
5. Suggestion to improve this module

All work turned in for this class must meet the style and submission guidelines. Work that does not meet the style and submission criteria will not be graded.