JavaScript/TypeScript Training Resources
31 July 2016 - TypeScript
Introduction
We regularly do JavaScript and TypeScript trainings. In this blog article I collect important links and demos we typically do during such trainings.
Prerequisites
During our trainings, you have to have recent versions of the following software installed:
- Chrome Browser
- Node.js with NPM
- Git
- Global NPM packages:
npm install --global typescript gulp typings lite-server
I recommend to have recent versions of the following software installed on your development machine:
- Visual Studio Code
- Visual Studio with .NET Core (if you want to develop web apps with ASP.NET backend)
- Git client with UI like Git Extensions
- Docker or Docker for Windows
I recommend to have accounts for the following cloud services:
JavaScript Basics
Embedded vs. External Scripts
- Samples: Embedded, External
- Exercises
- Discuss code
- Run it with
lite-server
- Code editing with VSCode
- Basics of Chrome Developer Tools
- Create external sample with Plunker
- Discuss Subresource Integrity security feature based on Bootstrap CDN sample
- Discuss Content Security Policy (CSP) security feature, in particular
unsafe-inline
keyword
Data Types
- Samples: Datatypes, Dynamically Typed, Multiline Strings
- Exercises
- Discuss code
- Discuss primitive types vs. objects
- Discuss
Date
utility - Discuss advantages and disadvantages of dynamical typing
- Read about ES2015’s
let
keyword. Note that it works in TypeScript, too (even with ES5). - Discuss concept of Garbage Collection
DOM Access
- Samples: Datatypes, Basic DOM Access
- Exercises
- Discuss code
- Discuss role of jQuery
Truthy, Falsy, Operators
- Samples: Falsy
- Exercises
- Discuss code
- Discuss truthy, falsy and type coercion in boolean contexts
- Discuss operators, in particular Primary Expressions, typeof, in
Statements and Declarations
- Samples: Switch, Exceptions, For Loops, While Loops, Do While Loops, Break/Continue, For In, Index, Delete
- Exercises
- Discuss code
- Read more details about statements and declarations
- Discuss new ES2015 features (e.g. for..of, Generators)
Objects
- Samples: Creating Objects, Accessing Properties, Object References, Object Methods, Callbacks
- Exercises
- Discuss code
- Read more details about objects
- Discuss the
JSON
object - Discuss JSON parse reviver functions (e.g. parse date string). See also Json.NET Date Serialization
Arrays
- Samples: Array Literal, Push/Pop, Reverse, Sort, Concat, Shift/Unshift, Slice, Splice, Length
- Exercises
Functions
- Samples: Basic Functions, Function Literals, Function Dispatching, Function Arguments, Variable Arguments, Nested Functions, Scope Reference, Functions as Data, Closures
- Exercises
- Discuss code
- Read more details about functions
- Discuss closures
- Discuss ES2015 Arrow Functions
Object Model
Note that we do not write JavaScript code for constructor functions, inheritance, modules, etc. in JavaScript during the course. TypeScript will care for that. However, we write TypeScript code and discuss the resulting JavaScript for target ES5 and ES2015.
Read more about JavaScript’s object model
Further Readings
TypeScript
Working With Types
- Sample: Basic Types
- Exercises
- Discuss code
- Compile with
tsc
- Use watch mode with
tsc -w
- Discuss and demo
tsconfig.json
- Discuss
let
vs.var
- Read details about type inference
- Read details about advanced types
Working With Objects
- Sample: Objects
- Exercises
- Discuss code
- Try IntelliSense and early type checking in VSCode
Interfaces and Classes
- Sample: Interfaces and Classes
- Exercises
- Discuss code
- Discuss generated JavaScript code (class pattern, inheritance, etc.)
- Discuss parameter properties
- Discuss static properties and abstract classes
- Discuss generics
- Compare generated JavaScript code for
tsc app.ts
andtsc app.ts --target ES6
and discuss different TypeScript targets.
Lambdas, Arrow Functions
- Sample: Lambdas
- Exercises
- Discuss code
- Discuss
this
capturing in generated JavaScript code - Compare generated JavaScript code for
tsc map.ts
andtsc map.ts --target ES6
and discuss different TypeScript targets.
async/await
- Samples: async/await
- Exercises
- Discuss code
- Discuss availability of ES2015 feature in browsers
- Discuss TypeScript roadmap for async/await in ES5
Modules
- Sample: Modules
- Exercises
- Discuss code
- Discuss internal vs. external modules
- Compile code with
tsc app.ts module.ts anotherModule.ts
and run it withnode app.js
- Discuss ambient modules (
.d.ts
) and the typings tool - Read details about modules
Loading Modules with System.js
- Samples: Loader
- Exercises
- Discuss code
- Discuss different loader/packager options (e.g. System.js, Webpack)
Further Readings, Resources
- TypeScript Handbook
- Definitely Typed on GitHub
- The typings tool
- typings Registry
- System.js Loader
- TSLint (checks your TypeScript code for readability, maintainability, and functionality errors)
Client-side Development with ASP.NET
OWIN
- Samples: OWIN
- NuGet packages
Microsoft.Owin.StaticFiles
Microsoft.Owin.Host.SystemWeb
(for IIS integration)
- Exercises
- Discuss code
- Demo creating OWIN sample from scratch
- Discuss
Gulpfile
- Show it in Visual Studio Task Runner
- Discuss NPM scripts as an addition/replacement for Gulp
- Discuss necessary changes in
web.config
ASP.NET Core
- Samples: NetCore
- NuGet packages
Microsoft.AspNetCore.StaticFiles
- Exercises
- Discuss code
- Demo creating ASP.NET Core sample from scratch
- Demo running ASP.NET Core sample under Linux