JavaScript and TypeScript: Part 2
In this chapter, I describe some of the more advanced JavaScript features that are useful for Angular development. I explain how JavaScript deals with objects, including support for classes, and I explain how JavaScript functionality is packaged into Java
- PDF / 247,764 Bytes
- 19 Pages / 504 x 720 pts Page_size
- 17 Downloads / 212 Views
JavaScript and TypeScript: Part 2 In this chapter, I describe some of the more advanced JavaScript features that are useful for Angular development. I explain how JavaScript deals with objects, including support for classes, and I explain how JavaScript functionality is packaged into JavaScript modules. I also introduce some of the features that TypeScript provides that are not part of the JavaScript specification and that I rely on for some of the examples later in the book. Table 6-1 summarizes the chapter. Table 6-1. Chapter Summary
Problem
Solution
Listing
Create an object by specifying properties and values
Use the new keyword or use an object literal
1–3
Create an object using a template
Define a class
4, 5
Inherit behavior from another class
Use the extends keyword
6
Package JavaScript features together
Create a JavaScript module
7
Declare a dependency on a module
Use the import keyword
8–12
Declare the types used by properties, parameters, and variables
Use TypeScript type annotations
13–18
Specify multiple types
Use union types
19–21
Create ad hoc groups of types
Use tuples
22
Group values together by key
Use indexable types
23
Control access to the methods and properties in a class
Use the access control modifiers
24
Preparing the Example Project For this chapter, I continue using the JavaScriptPrimer project from Chapter 5. No changes are required to prepare for this chapter, and running the following command in the JavaScriptPrimer folder will start the TypeScript compiler and the development HTTP server: ng serve --port 3000 --open
© Adam Freeman 2018 A. Freeman, Pro Angular 6, https://doi.org/10.1007/978-1-4842-3649-9_6
87
Chapter 6 ■ JavaScript and TypeScript: Part 2
A new browser window will open, but it will be empty because I removed the placeholder content in the previous chapter. The examples in this chapter rely on the browser’s JavaScript console to display messages. If you look at the console, you will see the following result: Total value: $2864.99
Working with Objects There are several ways to create objects in JavaScript. Listing 6-1 gives a simple example to get started.
■■Note Some of the examples in this chapter cause the TypeScript compiler to report errors. The examples still work, and you can ignore these messages, which arise because TypeScript provides some extra features that I don’t describe until later in this chapter.
Listing 6-1. Creating an Object in the main.ts File in the src Folder let myData = new Object(); myData.name = "Adam"; myData.weather = "sunny"; console.log("Hello " + myData.name + "."); console.log("Today is " + myData.weather + "."); I create an object by calling new Object(), and I assign the result (the newly created object) to a variable called myData. Once the object is created, I can define properties on the object just by assigning values, like this: ... myData.name = "Adam"; ... Prior to this statement, my object doesn’t have a property called name. When the statement has executed, the property does exist, and
Data Loading...
