Lsokolowski1 at 14:47, 29 August 2025

2025-08-29T14:47:45Z

← Older revision		Revision as of 14:47, 29 August 2025
Line 2:		Line 2:


	~~<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >~~
	;title: Advanced Typescript Training Course		;title: Advanced Typescript Training Course
	;author: Łukasz Sokołowski		;author: Łukasz Sokołowski
	~~</slideshow>~~

Lsokolowski1 at 13:47, 17 June 2024

2024-06-17T13:47:40Z

Show changes

Lsokolowski1: /* Importing non-code assets ⌘ */

2024-03-26T13:24:32Z

Importing non-code assets ⌘

← Older revision		Revision as of 13:24, 26 March 2024
Line 106:		Line 106:
	</syntaxhighlight>		</syntaxhighlight>
	* Same concept applies to other assets - CSS, SCSS, JSON, etc		* Same concept applies to other assets - CSS, SCSS, JSON, etc
	* '''Exercise''' - setup for ''.jpg'' and add ''~~bearHigh5~~.jpg'' in our ''div''		* '''Exercise''' - setup for ''.jpg'' and add ''bear.jpg'' in our ''div''
	** ''webpack.config.js'' - add this to '''rules''' array<syntaxhighlight lang="js">		** ''webpack.config.js'' - add this to '''rules''' array<syntaxhighlight lang="js">
	{		{

Lsokolowski1: /* Building the application ⌘ */

2023-10-01T16:37:41Z

Building the application ⌘

← Older revision		Revision as of 16:37, 1 October 2023
Line 130:		Line 130:
	* <syntaxhighlight lang="bash" inline>npm run build</syntaxhighlight>		* <syntaxhighlight lang="bash" inline>npm run build</syntaxhighlight>
	* <syntaxhighlight lang="bash" inline>npm run start</syntaxhighlight>		* <syntaxhighlight lang="bash" inline>npm run start</syntaxhighlight>
	* '''Homework''': read carefully 'npm run build' result messages		* '''Homework''': read carefully '''npm run build''' result messages
	** add ''lazy loading'' via import()		** add ''lazy loading'' via import()
	** improve it with ''async-await''		** improve it with ''async-await''

Lsokolowski1: /* Building the application ⌘ */

2023-10-01T16:37:10Z

Building the application ⌘

← Older revision		Revision as of 16:37, 1 October 2023
Line 130:		Line 130:
	* <syntaxhighlight lang="bash" inline>npm run build</syntaxhighlight>		* <syntaxhighlight lang="bash" inline>npm run build</syntaxhighlight>
	* <syntaxhighlight lang="bash" inline>npm run start</syntaxhighlight>		* <syntaxhighlight lang="bash" inline>npm run start</syntaxhighlight>
			* '''Homework''': read carefully 'npm run build' result messages
			** add ''lazy loading'' via import()
			** improve it with ''async-await''

	== Creating Custom Data Types ⌘==		== Creating Custom Data Types ⌘==

Lsokolowski1: /* Configuring Webpack and TypeScript ⌘ */

2023-10-01T15:15:11Z

Configuring Webpack and TypeScript ⌘

← Older revision		Revision as of 15:15, 1 October 2023
Line 75:		Line 75:
	},		},
	output: {		output: {
	filename: '~~bundle~~.js',		filename: 'main.js',
	path: path.resolve(__dirname, 'dist'),		path: path.resolve(__dirname, 'dist'),
	},		},

Lsokolowski1: /* Importing non-code assets ⌘ */

2023-10-01T15:10:27Z

Importing non-code assets ⌘

← Older revision		Revision as of 15:10, 1 October 2023
Line 115:		Line 115:
	** ''index.ts'' - new image element<syntaxhighlight lang="js">		** ''index.ts'' - new image element<syntaxhighlight lang="js">
	//// at the top		//// at the top
	import MyBear from './~~bearHigh5~~.jpg';		import MyBear from './bear.jpg';
	(...)		(...)
	//// in 'component()' function		//// in 'component()' function

Lsokolowski at 09:24, 9 May 2022

2022-05-09T09:24:01Z

New page

{{Cat|JavaScript}}

<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >
;title: Advanced Typescript Training Course
;author: Łukasz Sokołowski
</slideshow>

== Advanced Typescript ==
Advanced Typescript Training Materials

{{Can I use your material}}

== Introduction ⌘==
* Overview of [[Typescript#Closing_remarks_.E2.8C.98|TypeScript]] features and advantages
* Programming best practices and tips
** We'll cover some of them during the day

== Getting Started ⌘==
* Installing TypeScript, Nodejs, and Visual Studio Code
* Initializing the server
* Configuring access modifiers and compiler options
* Setting up a Node.js project
* Building and debugging Node.js TypeScript

=== Configuring access modifiers and compiler options ⌘===
* Example with Angular - ''jwt''
* Related docs - ''aka.ms/tsconfig.json''

=== Setting up a Node.js project ⌘===
* '''Example''' - ''other_/node_/''

== Configuring Webpack and TypeScript ⌘==
* Enabling source maps
* Using third-party libraries
* Importing non-code assets
* Building the application

=== Initial setup ⌘===
* '''Exercise''' - ''webpack_/with_ts''
* Compiler and loader
** <syntaxhighlight lang="bash" inline>npm install --save-dev typescript ts-loader</syntaxhighlight>
* Directories and configuration
** ''index.ts'' - new file with content from 'index.js' and change first line: <syntaxhighlight lang="js" inline>import * as _ from 'lodash';</syntaxhighlight>
** ''tsconfig.json'' - 'tsc --init' and later apply these changes<syntaxhighlight lang="json">
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}
</syntaxhighlight>
** ''webpack.config.js''<syntaxhighlight lang="js">
const path = require('path');

module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
</syntaxhighlight>

=== Enabling source maps ⌘===
* '''Exercise''' - ''webpack_/with_ts''
* TypeScript will output inline source maps to our compiled JavaScript files
* ''tsconfig.json'' - uncomment line with <syntaxhighlight lang="json" inline>"sourceMap": true,</syntaxhighlight>
* Telling webpack to '''extract''' source maps and '''include''' in final bundle
** ''webpack.config.js'' - put this just below '''entry:''' <syntaxhighlight lang="js" inline>devtool: 'inline-source-map',</syntaxhighlight>

=== Using third-party libraries ⌘===
* When installing new lib from '''npm'''
** Always remember to install it's '''typing definition''' (''.d.ts'' files)
** Definitions can be found here [https://www.typescriptlang.org/dt/search?search= Types for TS]
* '''Example''' - <syntaxhighlight lang="bash" inline>npm install --save-dev @types/lodash</syntaxhighlight>
* '''Exercise''' - install ''jquery'' with it's typings
** when we '''click''' on our ''div'' it should shout with popup: "TS rulezzzzz!"

=== Importing non-code assets ⌘===
* We need to '''defer''' the type
** ''custom.d.ts'' - new file
** example setup for ''.svg''<syntaxhighlight lang="ts">
declare module '*.svg' {
const content: any;
export default content;
}
</syntaxhighlight>
* Same concept applies to other assets - CSS, SCSS, JSON, etc
* '''Exercise''' - setup for ''.jpg'' and add ''bearHigh5.jpg'' in our ''div''
** ''webpack.config.js'' - add this to '''rules''' array<syntaxhighlight lang="js">
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
</syntaxhighlight>
** ''index.ts'' - new image element<syntaxhighlight lang="js">
//// at the top
import MyBear from './bearHigh5.jpg';
(...)
//// in 'component()' function
// Add the image to our existing div
const myIcon = new Image();
myIcon.src = MyBear;

element.appendChild(myIcon);
</syntaxhighlight>

=== Building the application ⌘===
* Some good practices (performance, etc)
** https://webpack.js.org/guides/build-performance/#typescript-loader
* <syntaxhighlight lang="bash" inline>npm run build</syntaxhighlight>
* <syntaxhighlight lang="bash" inline>npm run start</syntaxhighlight>

== Creating Custom Data Types ⌘==
* Union, Intersection, and Tuple Types
* Type Guards, Type Casting, and Type Assertions
* Creating arrays for custom types
* Other types and examples

=== Custom Data Types ⌘===
* Usually a '''combination''' of primitive types (strings, numbers, Booleans) with '''objects'''
* Building blocks of advanced types – '''type alias''', '''string''', and '''number literals'''
* Allow to write code
** '''easier to understand''' for myself and '''easier to work with'''
** and for any '''others''' working with me
** or those who are '''inheriting''' the project
* Oftenly web applications become more complex
** it is necessary to be able to '''model''' that complexity
** TypeScript makes that easy with advanced types
** types that are '''conditional''' and '''flexible'''

=== Type Aliases ⌘===
* Allow to declare '''references''' to any type – advanced or primitive
* Make code '''easier''' to read - allow to be '''less verbose'''
* We '''declare''' our type once and '''reuse''' it throughout application
* Code is more readable and maintainable
* ''Syntax:'' <syntaxhighlight inline lang="ts">type OnlyStrings = string;</syntaxhighlight>
** The '''type''' keyword is followed by the alias, ''OnlyStrings'', and then the '''string''' type
* '''Exercise''' - ''customdt_/exerc_/ex1''

=== Type Literals ⌘===
* Allow to create a type based on a '''specific''' string or number
* Not very useful in itself, but with more complex types such as '''union''' types
* ''Syntax:'' <syntaxhighlight inline lang="ts">type Success = 200;</syntaxhighlight>
* '''Example''' - ''customdt_/examp_/e2''
* '''Exercise''' - ''customdt_/exerc_/ex2''

=== Intersection ⌘===
* Allows to '''combine''' types to form a '''new type'''
** with the properties of the combined types
** it is an '''and''' type
* Similar to multi-class inheritance
** child object can have more than one parent object that it derives its properties from
* Helps to keep the cod DRY (Don't Repeat Yourself)
* '''Merged properties''' should be of the '''same type'''
* ''Syntax:'' <syntaxhighlight inline lang="ts">type CourseEvaluation = TrainingEvaluationForm & CourseEventEvaluationByTrainer;</syntaxhighlight>
* '''Example''' - ''customdt_/examp_/e3''
* '''Exercise''' - ''customdt_/exerc_/ex3''

=== Union ⌘===
* Similar to intersection
** but it is an '''or''' type
** do not merges types
* Similar to the ternary operator in JavaScript
** types are separated by the '''|''' (pipe)
* ''Syntax:'' <syntaxhighlight inline lang="ts">type Lead = General | Price | Course;</syntaxhighlight>
* '''Example''' - ''customdt_/examp_/e4''
* '''Exercise''' - ''customdt_/exerc_/ex4''

=== Index Types ⌘===
* Allow to create objects with '''flexible''' number of '''properties'''
** We define a '''signature''' for our type using an '''interface'''
* ''Syntax:'' <syntaxhighlight inline lang="ts">[ msg: number ]: string;</syntaxhighlight>
* '''Example''' - ''customdt_/examp_/e5''
* '''Exercise''' - ''customdt_/exerc_/ex5''

=== Tuple ⌘===
* '''Array''' which contains '''multiple''' types
** fixed indexed order - the '''order''' and '''length''' are '''guaranteed'''
** data is connected with '''less''' syntax than ''keyed objects''
* A good pattern for short bits of connected data or for '''fixtures'''
* Example from 'Reactjs' - ''useState'' returns a tuple of the value and a setter function
* ''Syntax:'' <syntaxhighlight inline lang="ts">const closedLead: [Invoice, Payment] = ["Consultancy23032021", {paid:1, paymentType:"transfer"} ];</syntaxhighlight>
* '''Example''' - ''customdt_/examp_/e6''
* '''Exercise''' - ''customdt_/exerc_/ex6''

=== Type Guards ⌘===
* Participate in the '''code flow analysis'''
** We '''influence''' the code flow
* TS uses existing JS behavior which validates our objects at '''runtime'''
* We can prep also custom functions - '''type predicate functions'''
* ''Syntax/operators'' - '''in, instanceof, typeof, is'''
** Full list of possible typeof values developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
* '''Example''' - ''customdt_/examp_/e7''
* '''Exercise''' - ''customdt_/exerc_/ex7''

=== Type Casting, Assertions ⌘===
Two syntaxes
* xml '''<>''' - this way won't work with JSX (.tsx, etc.) and Reactjs
** [[Typescript#Assertions_.E2.8C.98|Assertions]]
* '''... as ...'''
** [[Typescript#Const_for_objects.2C_fixes_.E2.8C.98|Casting with 'as']]

=== Generics ⌘===
* [[Typescript#Generics_.E2.8C.98|Generics basics]]
* '''Example''' - ''customdt_/examp_/e8_''
* '''Exercise''' - together with 'Conditional Types'

=== Conditional Types ⌘===
* Allow '''complex''' type expressions
** drive some of the '''built-in''' types
* Really powerful - allow to write '''logic inside our types'''
* Similar to the regular JS '''ternary''' operator (inline conditions)
** differences: in the syntax (extends keyword), check is done at compile time and not runtime
* ''Syntax:'' <syntaxhighlight inline lang="ts">T extends U ? X : Y</syntaxhighlight>
* '''Example''' - ''customdt_/exerc_/e9''
* '''Exercise''' - ''customdt_/exerc_/ex8_9''

== Applying Decorators ⌘==
* Enabling decorators
* Creating class, parameter, and method decorators
* Using property descriptors
* Using metadata

=== Reflection, tightly coupled with ⌘===
* '''Reflection''' is the capability of a certain piece of code to '''examine''' and be introspective about itself (navel-gazing)
** a piece of code can have '''access''' to things such as the '''variables''', '''functions''', and '''classes''' defined inside it
* Most languages provide some kind of reflection API that enables us to '''treat the code itself as if it was data'''
** TypeScript is built upon JavaScript - inherits the JavaScript reflection capabilities

=== Decorators intro ⌘===
* Decorators (''from js proposal'')
** can be used to '''metaprogram''' and add functionality to a '''value'''
** '''without fundamentally changing''' its external behavior
* Have three primary capabilities
** Can '''replace''' the value that is being decorated with a matching value that has the same semantics
*** e.g. a method with another method, a field with another field, a class with another class, etc
** Can provide '''access''' to the value that is being decorated via '''accessor''' functions (can be shared)
** Can '''initialize''' the value that is being decorated, running '''additional''' code '''after''' the value has been fully defined
*** when the value is a member of class, initialized once per instance

=== Decorators intro con't ⌘===
* Special kind of '''declaration'''
* Can be '''attached''' to
** '''a class declaration, method, accessor, property, or parameter'''
* Uses ''@expression''
** expression must evaluate to a '''function'''
** such function will be called at '''runtime''' with information about the decorated declaration
* To transpile
tsc --target ES5 --experimentalDecorators
* tsconfig.json
"experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
"emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */

=== Decorator types, syntax ⌘===
<syntaxhighlight lang="ts">
@ClassDecorator
class ExampleClass {
    @PropertyDecorator
    public exampleProperty:number = 0;
    private _exampleField: number = 0;
    @AccessorDecorator
    public get exampleField() { return this._exampleField; }
    @MethodDecorator
    public exampleMethod(@ParameterDecorator paramName: string) {}
}

//// 'PascalCase' instead of 'lowerCamelCase'
function ClassDecorator (constructor: Function) {}
function AccessorDecorator (target: any, propertyName: string, descriptor: PropertyDescriptor) {}
function MethodDecorator (target: any, propertyName: string, descriptor: PropertyDescriptor) {}
function PropertyDecorator (target: any, propertyName: string) {}
function ParameterDecorator (target: any, propertyName: string, parameterIndex: number) {}
</syntaxhighlight>

=== Class Decorator ⌘===
<syntaxhighlight lang="ts">
interface Invoice {
id: string;
clientId: number;
}

interface HasNewProperty {
newProp: string;
}

// decorator definition can look like this
function SignedInv<T extends {new(...args:any[]):{}}>(constructor:T) {
// return class extends constructor {
return class extends constructor implements HasNewProperty {
newProp = "new prop";
invSign = "my_new_name_template";
}
}

// Decorator 'factory' - common practice to pass custom params
function InvoiceDescr(limit: number) {
return function (constructor: Function) {
constructor.prototype.invType = 'Consultancy' + limit
}
}

@SignedInv
@InvoiceDescr(3)
class FranchiseeAccountancyTool {
private _invoice;
invSign: string;

constructor(public accToolKey: string, public taxRate: string) {
this.invSign = accToolKey + 'inv_code';
}

get invoice() {
return this._invoice;
}

set invoice(inv: Invoice) {
this._invoice = inv;
}
}

let franAcc = new FranchiseeAccountancyTool('cnaj837tjdhsu#jd9_fd8', '204');
console.log(franAcc);
console.log(franAcc.invSign);
console.log(franAcc.newProp);
console.log(franAcc.invType);
</syntaxhighlight>

=== Class Decorator examples ===
* ''decorators_''
* In 'Angular' application
** <small>[[Angular_2_Fundamentals#Example_1_.E2.8C.98]]</small>
** jwt example - ''angular-login-jwt''

=== Decorator exercises ===
* Ex 1-5 (class, method, accessor)
* Act1
* Ex 6-8 (field, param)
** metadata, with 'reflect-metadata' pollyfill-lib
* Act2

== Implementing Asynchronous Code and APIs ⌘==
* Using callbacks, promises, and async/await
* Writing a REST API with Node.js and TypeScript


=== Using callbacks, promises, and async/await ⌘===
* JavaScript runtime is '''single threaded''' (on both web browser and server via node)
** One, and only one, piece of code will be running at a particular time - '''main thread'''
* JavaScript has also been built around an '''asynchronous''' approach
** main thread will '''not pause''' when requested to load a resource of some sort
** will place request onto an '''internal queue''', eventually be processed at a later point in time
** it does '''take away''' the need for in-memory locking mechanisms (other languages)

=== Callbacks, promises, and async/await con't ⌘===
* The '''callback''' mechanism - we provide a callback function to an asynchronous request
** it will be executed once the asynchronous request has been processed
* The '''Promise''' mechanism - provides a simplified syntax for writing asynchronous code
** allows to '''chain''' multiple asynchronous calls one after another (''fluent syntax'')
* '''Async and await''' technique - we mark certain functions as asynchronous
** use the '''await''' keyword to pause the execution flow ''until'' the asynchronous function returns

=== Callbacks, promises, and async/await examples ⌘===
* Callbacks
** ''async_/examp_/callbacks''
* Promises
** ''async_/examp_/promises''
* Async/await
** ''async_/examp_/async_and_await''
* Comparison of all approaches
** ''async_/examp_/callback_vs_..''

=== Callbacks, promises, and async/await exercises ⌘===
* Callbacks - ''async_/exerc_/ex1''
* Promises - ''async_/exerc_/ex2''
** Optional - ''async_/exerc_/a2''
* Ex3 - async/await
** Optional - ''async_/exerc_/a3''

=== Writing a REST API with Node.js and TypeScript ⌘===
* '''REST''' is a very common standard for web traffic
** Most websites and web APIs operate using REST
* ''Representational State Transfer''
* Defines concepts
** '''operations''' ("methods" or "verbs") - GET, DELETE, POST, PUT, and PATCH
** '''resources''' ("path" or "noun")
* '''Example''' - server - ''rest_/e1''
* '''Exercises''' - client - ''rest_/ex1''
** Add missing functionalities
*** '''Reactjs''' - deleteOne, searchBy - ''other_/fe_/react-api-call-ts''

** Discussion/homework - '''migrate''' from JS to TS - ''other_/be_''

Advanced Typescript - Revision history

Lsokolowski1 at 14:47, 29 August 2025

Lsokolowski1 at 13:47, 17 June 2024

Lsokolowski1: /* Importing non-code assets ⌘ */

Lsokolowski1: /* Building the application ⌘ */

Lsokolowski1: /* Building the application ⌘ */

Lsokolowski1: /* Configuring Webpack and TypeScript ⌘ */

Lsokolowski1: /* Importing non-code assets ⌘ */

Lsokolowski at 09:24, 9 May 2022