Lesson 01: Introduction to TypeScript

TypeScript is from JavaScript

Introduction to JavaScript

JavaScript is a computer language used to assist HTML (and optionally, CSS) to create interactive webpages. These are pages from which a visitor can type values, click buttons, perform selections, make decisions, etc. JavaScript is an interpreted language. This means that the browser checks the JavaScript code only when the webpage is accessed. This technique makes it possible for a programmer to make mistake in writing code. Sometimes those mistakes would be realized only until the webpage is presented to a visitor. Another characteristic of JavaScript is that it neither follows nor enforces strict rules of object-oriented programming.

Practical Learning: Introducing TypeScript

Start Microsoft Visual Studio
On the main menu of Microsoft Visual Studio, click File -> New -> Project ...
In the left list of the New Project dialog box, under Visual C#, click Web and, in the middle list, click ASP.NET Web Application (.NET Framework)
Change the project Name to TrafficTicketsManagement1
Click OK
In the New ASP.NET Web Application dialog box, click the MVC icon
Click OK

Introduction to TypeScript

To address some of the shortcomings of JavaScript, Microsoft created a JavaScript-parallel or subset language named TypeScript. TypeScript is neither better than, nor a replacement to, JavaScript. It is an enhanced way to write JavaScript code and it adds some features not available in JavaScript.

A TypeScript File

To use TypeScript in your project, you must write code for it. You write that code in a text-based file. While or after writing the code, save the file with a .ts extension.

If you are working on a project in Microsoft Visual Studio, in the Solution Explorer, right-click the name of the project and the folder in which you want to store the file. Position the mouse on Add and click New Item... In the left list of the New Item dialog box, under Visual C#, expand Web and click Scripts. In the middle list, click TypeScript file. Accept the suggested name of the file or change it. When you are ready, click OK.

Practical Learning: Creating a TypeScript File

In the Solution Explorer, right-click Scripts -> Add -> New Item...
In the left list of the New Item dialog box, under Visual C#, expand Web and click Scripts
In the middle list, click TypeScript file
Change the Name to TicketsSystem
Click Add

Introduction to Variables

Introduction

A variable is a piece of informtion that is temporarily stored in the computer memory so it can be accessed one or a few times at will.

Declaring a Variable

Before using a variable, you must indicate that you are planning to use it. This indication is referred to as declaring a variable. To declare a variable, use either the var or the let keyword followed by a name and a semicolon.

Practical Learning: Declaring a Variable

In the empty TicketsSystems.ts document, type the follow code:
```
let webPageBody;
```

Initializing a Variable

When declaring a variable, and the computer has reserved an area in memory for it, you can specify what value to store in that memory. This is referred to as initializing the variable. To do this, after the name of the variable, type = followed by the desired value. The formula to follow is:

let variable-name = value;

Updating a Variable

When you are declaring a variable and immediately give it a value, you are said to initialize the variable. Later in the program or code, if you want, you can change the value of the variable. To do that, at any time, type the name of the variable, the = operator, the new value, and a semicolon.

Declaring a Variable without Initializing

As seen above, when declaring a variable, you can immediately initialize it by assigning a value to it. Here is an example:

let empl: string = "Jessica deRossi";

You can also declare a variable without initialize, then assign a value to it when necessary. Here is an example:

let empl;

. . .

empl = "Jessica deRossi";

As an option, when declaring such a variable, you can preceide the var or let keyword with the declare keyword. This would be done as follows:

declare let empl;

. . .

empl = "Jessica deRossi";

TypeScript and Data Types

While JavaScript supports types of values, it neither allows nor requires you to specify the type of a value. In TypeScript, when declaring a variable, you can specify its type. To do this, after the name of a variable, type a colon followed by the type. The formula to follow is:

let variable-name: data-type = value;

Constants

A variable is an area reserved in the computer memory to hold a value. At any time, you can change that value by assigning a new value to the variable. A constant is a variable whose value never changes. This mmeans that, after setting up the variable, you cannot change its value by assigning a new value to the variable. A constant is created using the const keyword. The formula to follow is:

const variable-name = value;

Start with the const keyword and assign the desired value to it. After that, you can use the name of the constant any way you want but based on its type. Remember this rule, you cannot assign a new value to the constant.

Introduction to HTML

Introduction to HTML Elements

The primary language used to create a webpage is HTML. It is made of small tags. Examples of tags are <html>, <body>, <table>, <div>, <span>, <p>, <p>, <td>, <li>, etc. To create a webpage, you aligned these and other tags. The data type of these elements is named HTMLElement. Based on this, the formula to declare a variable for an HTML element is:

var | let | const variable-name;

Usse the var or the let keyword if the value of the variable will change or not in the program. If the value of the variable will not change, declare it using the const keyword. To specify the data type of the variable, after the name of the variable, type : HTMLElement. The formula becomes:

var | let | const variable-name: HTMLElement;

Practical Learning: Declare a Variable for an HTML Element

Change the variable as follows:
```
let webPageBody: HTMLElement;
```

Getting the HTML Contents of an Element

Some HTML elements (also called DOM elements) get a value (text, number, etc) from a user. The visitor of a webpage may enter some text in a text box or make a selection from a Web control. To get the text that an element holds, you can use the following formula:

expression = document.element-access

The expression will store or hold the value. The document word and the period are required. The element-access specifies the way you access an HTML element. Therefore, to declare a variable that gets an HTML element, you can declare a variable as follows:

var | let | const variable-name = document.element-access;

Usse the var or the let keyword if the value of the variable will change or not in the program. If the value of the variable will not change, declare it using the const keyword. We will explore the element-access aspects in later sections.

Techniques of Selecting an HTML Element

Selecting an Element by Querying

To select an element from a webpage, JavaScript provides the following formula:

expression = document.querySelector(selection);

The expression will hold, store, or receive the value. The document.querySelector() is required. In the parentheses of document.querySelector(), you will provide a way to select an element.

Selecting an Element by its Tag

To select some elements in a webpage using a tag name, pass the tag name in the prentheses of document.querySelector(). The tag name must be included in single or double-quotes. You can assign the expression to a variable. Here is an example:

let webPageBody: HTMLElement;

webPageBody = document.querySelector("body");

Instead of declaring the variable on one line and initializing it on another line, you can declare and initialize it on the same line. Here is an example:

let webPageBody: HTMLElement = document.querySelector("body");

Remember that, when declaring a variable, if you are not planning to change its value in the program, you should declare it as a constant.

Practical Learning: Selecting the Body Element

Change the document as follows:

const webPageBody: HTMLElement = document.querySelector("body");

Selecting an Element by its Identifier

One of the ways you can prepare an HTML element for selection is to add an ID attribute to it. Here are examples:

@{
    ViewBag.Title = "Bethesda Car Rental";
}

<h2 id="companyName">Something</h2>

<p id="introduction"></p>

To select an element based on its identifier, use document.getElementById("identification"). This means that, in the parentheses, type the value you gave to the ID attribute of the element. You can then add .innerHTML or .textContent. Here is an example:

let corporation: HTMLElement = document.getElementById("companyName");

As an alternative, you can use document.querySelector("#identification"). This time, in the parentheses, use the identifier but precede it with the # symbol.

The Value of an HTML Element

Setting the HTML Contents of an Element

Some HTML elements display a value (number, text, etc) in a webpage. To specify the value of an element, type the name of the HTML element variable followed by .innerHTML. You can then use the expression. One way to use it is to assign a value to the expression. The formula you would follow is:

variable-name.innerHTML = expression;

Practical Learning: Accessing the Body of a Webpage

Change the TypeScript document as follows:

let webPageBody: HTMLElement = document.querySelector("body");

webPageBody.innerHTML = "Traffic Tickets System";

Setting the Text Contents of an Element

The alternative to .innerHTML is .textContent. The formula to follow is:

variable-name.textContent = expression;

The Value of a Web Control

To access a control from a webpage, you can use the following formula:

document.form-name.control-name.value

In this case, Between document. and .value, enter the way to make a selection.

TypeScript is Compiled

Compiling TypeScript

As mentioned above, TypeScript provides a clearer way to write JavaScript code. Before using TypeSript code in your project, you must convert that code to JavaScript. To do this, you must use a compiler. The TypeScript compiler is named tsc, which stands for TypeScript compiler. If you are not using a programming environment, you must first download the TypeScript language. Then, when you have created a TypeScript file, you must compile it at the Command Prompt. The command to use is:

tsc file-name.ts

When executed, this command would create the JavaScript equivalent to the TypeScript file. If you are working in Microsoft Visual Studio, the studio already has the compiler and would generate the JavaScript file for you. After creating your TypeScript file, simply build the project. The studio would then generate the JavaScript version of your TypeScript file.

Practical Learning: Building the Project

To build the project, on the main menu, click Build -> Build Solution
To check the JavaScript file, on the main menu, click File -> Open -> File...
Navigate to the sub-folder of the project with the same name as the solution, then open the Scripts folder

Notice a JavaScript file named TicketsManagement (that has the .js extension)

var webPageBody = document.querySelector("body");
webPageBody.innerHTML = "Traffic Tickets System";
//# sourceMappingURL=TicketsSystem.js.map

Click Cancel

To execute, on the main menu, click Debug -> Start Without Debugging
Close the browser and return to your programming environment
In the Solution Explorer, expand Views and expand Home
Double-click About.cshtml
To execute the application, press Ctrl + F5.
Notice that the About webpage of the website displays
Close the browser and return to your programming environment

A TypeScript File for all Views

After building the project, you can use the generated JavaScript file in your webpages. You have various options. If you want to use the JavaScript file on all webpages, include the JavaScript file in your BundleConfig.cs file.

Practical Learning: Applying Type to all Web Pages

In the Solution Explorer, expand App_Start and click BundleConfig.cs

Change the document as follows:

using System.Web.Optimization;

namespace TrafficTicketsManagement1
{
    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/TicketsSystem.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

To execute the project, on the main menu, click Debug -> Start Without Debugging
Close the browser and return to your programming environment
In the Solution Explorer, under Views and under Home, double-click About.cshtml
To execute the application, press Ctrl + F5.
Notice that you get the same result (a simple webpage with only a one-line title)
Close the browser and return to your programming environment

A TypeScript File for a Web Page

You may want to access the results of the TypeScript code in only one or some webpages. To do this, make sure you don't reference the JavaScript file in your BundleConfig.cs file. In a desired webpage, create your HTML tags and their attributes in ways that will allow you to access them in code. In your TypeScript code, use the techniques we reviewed to access the HTML tags. In a webpage that will use the compiled JavaScript file, create a reference to that file.

Practical Learning: Using TypeScript in a View

Click the BundleConfig.cs tab and remove the JavaScript reference you had added:

using System.Web.Optimization;

namespace TrafficTicketsManagement1
{
    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

In the Solution Explorer, expand Controllers and click HomeController.cs

Add a method named TrafficTicket as follows:

using System.Web.Mvc;

namespace TrafficTicketsManagement1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult TrafficTicket() => View();
    }
}

In the class, right-click TrafficTicket() -> Add View...
In the Add View dialog box, make sure the View Name text box displays TrafficTicket.
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Introduction";
}

<h2 id="company">Introduction</h2>

Click the TicketsSystem.ts tab and change the document as follows:

const corporation: HTMLElement = document.querySelector("#company");

corporation.innerHTML = "Traffic Tickets System";

Click the Introduction.cshtml tab and change the document as follows:

@{
    ViewBag.Title = "Introduction";
}

<h2 id="company">Introduction</h2>

<script src="~/Scripts/TicketsSystem.js"></script>

In the Solution Explorer, under Views, expand Shared and click _Layout.cshtml

Change the document as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Traffic Tickets System :: @ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Traffic Tickets System", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("TrafficTicket", "Introduction", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p class="text-center">&copy; @DateTime.Now.Year - Traffic Tickets System</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

To execute the application, on the main menu, click Debug and click Start Without Debugging:
In the webpage, click the Introduction link
In the webpage, click About
Close the browser and return to your programming environment

Using many TypeScript Files

In your project, you can create as many TypeScript files as you need. To use the generated JavaScript files on all webpages or views, you can add their references in the BundleConfig.cs file. Here is an example:

using System.Web.Optimization;

namespace PayrollPreparation1
{
    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/PersonelManagement.js",
                        "~/Scripts/TimeSheetEvaluation.js",
                        "~/Scripts/PayrollPreparation.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/PayrollPreparation.css"));
        }
    }
}

Introduction to Boolean Values

A value is said to be Boolean if it can assessed as being true or as being false.

A Boolean Variable

To declare a Boolean variable, use the var or the let keyword follows by a name for the variable. While JavaScrit supports Boolean values, it doesn't let you specify the type of the variable. In TypeScript, when declaring a Boolean variable, to specify its data type, use the boolean keyword. Here is an example:

let sleeping: boolean;

As done in JavaScript, to initialize a Boolean variable, assign true or false to it. Here is an example:

let sleeping: boolean = false;

In the same way, to change the value of a Boolean variable, assign true or false to it.

A Constant Boolean Variable

When declaring a Boolean variable, if its value will not change anytime in the program, you declare it as a constant. To do that, instead of the var or the let, declare it using the const keyword but initialize it with true or false. Here is an example:

const gettingOnEverybodysNerve: boolean = true;

Practical Learning: Ending the Lesson

Close your programming environment


Home	Copyright © 2018-2019, FunctionX	Next