Contents

typescript

typescript

Typescript is a typed superset of Javascript that transpiles (is converted) to plain Javascript.

Install, compile and run

   1 sudo npm install -g typescript # install
   2 echo "console.log(\"Hello world\");" > helloworld.ts
   3 tsc helloworld.ts # compile
   4 node helloworld.js # run
   5

kate

KateTypeScriptSyntaxHighlighting

   1 wget https://github.com/PrettyFlower/KateTypeScriptSyntaxHighlighting/raw/master/typescript.xml
   2 cp typescript.xml /usr/share/apps/katepart/syntax/typescript.xml

With let keyword added

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE language SYSTEM "language.dtd">
   3 <language name="TypeScript" section="Scripts" extensions="*.ts;"
   4         indenter="cstyle" author="PrettyFlower (abigchode@gmail.com)">
   5 <highlighting>
   6     <list name="keywords">
   7         <item> if </item>
   8         <item> else </item>
   9         <item> for </item>
  10         <item> in </item>
  11         <item> while </item>
  12         <item> do </item>
  13         <item> continue </item>
  14         <item> break </item>
  15         <item> with </item>
  16         <item> try </item>
  17         <item> catch </item>
  18         <item> finally </item>
  19         <item> switch </item>
  20         <item> case </item>
  21         <item> new </item>
  22         <item> var </item>
  23         <item> function </item>
  24         <item> return </item>
  25         <item> delete </item>
  26         <item> true </item>
  27         <item> false </item>
  28         <item> void </item>
  29         <item> throw </item>
  30         <item> typeof </item>
  31         <item> const </item>
  32         <item> default </item>
  33         <item> this </item>
  34         <item> null </item>
  35         <item> undefined </item>
  36         
  37         <item> class </item>
  38         <item> export </item>
  39         <item> declare </item>
  40         <item> module </item>
  41         <item> import </item>
  42         <item> static </item>
  43         <item> interface </item>
  44         <item> implements </item>
  45         <item> constructor </item>
  46         <item> public </item>
  47         <item> private </item>
  48         <item> string </item>
  49         <item> number </item>
  50         <item> bool </item>
  51         <item> any </item>
  52         <item> extends </item>
  53         <item> let </item>
  54     </list>
  55     
  56     <contexts>
  57         <context attribute="Normal Text" lineEndContext="#stay" name="Normal">
  58             <DetectSpaces/>
  59             <keyword attribute="Keyword" context="#stay" String="keywords"/>
  60             <DetectChar attribute="String" context="String" char="&quot;"/>
  61             <DetectChar attribute="String Char" context="String 1" char="'"/>
  62             <StringDetect attribute="Reference" context="Reference" String="///" />
  63             <Detect2Chars attribute="Comment" context="Comment" char="/" char1="/"/>
  64             <Detect2Chars attribute="Comment" context="Multi/inline Comment" char="/" char1="*" beginRegion="Comment"/>
  65             <DetectIdentifier/>
  66         </context>
  67         
  68         <context attribute="String" lineEndContext="#pop" name="String">
  69             <DetectIdentifier/>
  70             <HlCStringChar attribute="String Char" context="#stay"/>
  71             <LineContinue attribute="String" context="#stay"/>
  72             <DetectChar attribute="String" context="#pop" char="&quot;"/>
  73         </context>
  74         
  75         <context attribute="String Char" lineEndContext="#pop" name="String 1">
  76             <DetectIdentifier/>
  77             <HlCStringChar attribute="String Char" context="#stay"/>
  78             <LineContinue attribute="String" context="#stay"/>
  79             <DetectChar attribute="String Char" context="#pop" char="'"/>
  80         </context>
  81 
  82         <context attribute="Comment" lineEndContext="#pop" name="Comment">
  83             <DetectSpaces />
  84             <IncludeRules context="##Alerts" />
  85             <DetectIdentifier />
  86         </context>
  87         
  88         <context attribute="Comment" lineEndContext="#stay" name="Multi/inline Comment">
  89             <IncludeRules context="##Alerts" />
  90             <Detect2Chars attribute="Comment" context="#pop" char="*" char1="/" endRegion="Comment"/>
  91         </context>
  92         
  93         <context attribute="Reference" lineEndContext="#pop" name="Reference">
  94             <DetectChar attribute="ReferenceBracket" context="#stay" char="&lt;"/>
  95             <DetectChar attribute="ReferenceBracket" context="#stay" char="&gt;"/>
  96             <DetectChar attribute="ReferenceFile" context="ReferenceFile" char="&quot;"/>
  97             <DetectChar attribute="ReferenceFile" context="ReferenceFile 1" char="'"/>
  98         </context>
  99         
 100         <context attribute="ReferenceFile" lineEndContext="#pop" name="ReferenceFile">
 101             <DetectIdentifier/>
 102             <HlCStringChar attribute="ReferenceFile" context="#stay"/>
 103             <LineContinue attribute="ReferenceFile" context="#stay"/>
 104             <DetectChar attribute="ReferenceFile" context="#pop" char="&quot;"/>
 105         </context>
 106         
 107         <context attribute="ReferenceFile" lineEndContext="#pop" name="ReferenceFile 1">
 108             <DetectIdentifier/>
 109             <HlCStringChar attribute="ReferenceFile" context="#stay"/>
 110             <LineContinue attribute="ReferenceFile" context="#stay"/>
 111             <DetectChar attribute="ReferenceFile" context="#pop" char="'"/>
 112         </context>
 113     </contexts>
 114     <itemDatas>
 115         <itemData name="Normal Text" defStyleNum="dsNormal"/>
 116         <itemData name="Keyword" defStyleNum="dsNormal" color="#00f"/>
 117         <itemData name="Char" defStyleNum="dsChar"/>
 118         <itemData name="String" defStyleNum="dsString" color="#a31515"/>
 119         <itemData name="String Char" defStyleNum="dsString" color="#a31515"/>
 120         <itemData name="Comment" defStyleNum="dsNormal" italic="true" color="#080"/>
 121         <itemData name="Reference" defStyleNum="dsNormal" color="#aeb9ae"/>
 122         <itemData name="ReferenceBracket" defStyleNum="dsNormal" color="#708870" bold="true"/>
 123         <itemData name="ReferenceFile" defStyleNum="dsNormal" color="#2c51cc"/>
 124     </itemDatas>
 125 </highlighting>
 126 <general>
 127     <comments>
 128         <comment name="singleLine" start="//" />
 129         <comment name="multiLine" start="/*" end="*/" />
 130     </comments>
 131     <keywords casesensitive="1"/>
 132 </general>
 133 </language>

Sample code typescript for browser

   1 npm install -g typescript
   2 npm install -g webpack

greeter.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head><title>TypeScript Greeter</title><meta charset="UTF-8"></head>
   4     <body>
   5         <script src="dist/bundle.js"></script>
   6     </body>
   7 </html>

lib.ts

Handbook modules

Any declaration (such as a variable, function, class, type alias, or interface) can be exported by adding the export keyword.

   1 export function getText(){
   2     return "text";
   3 }

greeter.ts

import {xyz} from "module";

   1 import {getText} from "./lib";
   2 
   3 interface Person {
   4     firstName: string;
   5     lastName: string;
   6 }
   7 
   8 function greeterPerson(p:Person) {
   9     return "Hello GP, " + p.firstName + ' ' + p.lastName + ' ' + getText() ;
  10 }
  11 
  12 function greeter(person:string) {
  13     return "Hello, " + person;
  14 }
  15 
  16 var user = "XPTO User";
  17 
  18 //document.body.innerHTML = greeter(user);
  19 document.body.innerHTML = greeterPerson( 
  20 {firstName:"First",lastName:"Last"}  
  21 );

tsconfig.json

   1 {
   2     "compilerOptions": {
   3         "module": "es6",
   4         "noImplicitAny": true,
   5         "removeComments": true,
   6         "preserveConstEnums": true,
   7         "sourceMap": true
   8     },
   9  "files": [ "greeter.ts",  "lib.ts"] 
  10 }

webpack.config.js

   1 var path = require('path');
   2 
   3 module.exports = {
   4   entry: ['./greeter.js','./lib.js'],
   5   output: {
   6     filename: 'bundle.js',
   7     path: path.resolve(__dirname, 'dist')
   8   }
   9 };

build.sh

   1 tsc
   2 webpack --config webpack.config.js

Constants

   1 export class Constants {
   2     static readonly CONST_A = "constA";
   3     static readonly CONST_B = "constB";
   4 }
   5 
   6 export const STATES = {
   7   stateA: 's1',
   8   stateB: 's2'
   9 };

Console app hello world

   1 cd /tmp
   2 mkdir bar 
   3 cd bar
   4 npm init 
   5 echo '{ "compilerOptions": {  "target": "es5", "sourceMap": true } }' > tsconfig.json 
   6 npm install typescript ts-node
   7 npm install @types/node
   8 echo -e '#!/usr/bin/env node\nconsole.log("Hello world!");' > index.ts
   9 ./node_modules/ts-node/dist/bin.js index.ts

Promise

Promise
- The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
Using promises
- A Promise is an object representing the eventual completion or failure of an asynchronous operation.
Promises all
- The Promise.all() method takes an iterable of promises as an input, and returns a single Promise that resolves to an array of the results of the input promises.
Promises all settled
- The Promise.allSettled() method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

index.ts

   1 #!/usr/bin/env node
   2 let p1:Promise<boolean> = new Promise<boolean>(  (resolve,reject)=>{
   3   resolve(true);
   4 } );
   5 p1.then( (value)=>{ 
   6     console.log("resolve sent value " +  value ); 
   7   }
   8 )
   9 let c1:Promise<boolean> = new Promise<boolean>(  (resolve,reject)=>{
  10   reject('Error occurred');
  11 } );
  12 c1.catch( (value)=>{
  13     console.log("reject sent value " + value);
  14   } 
  15 );
  16 console.log("Hello world!");

./node_modules/ts-node/dist/bin.js index.ts

Hello world!
resolve sent value true
reject sent value Error occurred

node_modules/typescript/bin/tsc index.ts
node index.js

Question mark after interface member name

It means that the member is optional

   1 interface Test{
   2   memberx?:string;
   3 }

Exclamation mark after interface member name

It means that the member is required (not null)

   1 interface Test{
   2   memberx!:string;
   3 }

Method not implemented

   1   throw new Error("Method not implemented.");

RxJS

https://rxjs.dev/guide/subject
- An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers.

   1 sudo apt install nodejs npm -y
   2 node -v
   3 # v14.19.1
   4 cd /tmp
   5 mkdir bar 
   6 cd bar
   7 npm init 
   8 echo '{ "compilerOptions": {  "target": "es5", "sourceMap": true } }' > tsconfig.json 
   9 npm install typescript ts-node @types/node rxjs

index.ts

   1 #!/usr/bin/env node
   2 import { Observable, Subject, pipe, take, Subscription } from 'rxjs';
   3 
   4 const publisher = new Observable(subscriber => {
   5   subscriber.next(1);
   6   subscriber.next(2);
   7   subscriber.next(3);
   8   setTimeout(() => {
   9     subscriber.next(4);
  10     subscriber.complete();
  11   }, 1000);
  12 });
  13 
  14 console.log("Hello world!");
  15 
  16 publisher.subscribe({
  17   next(x) { console.log('got value ' + x); },
  18   error(err) { console.error('something wrong occurred: ' + err); },
  19   complete() { console.log('done'); }
  20 });
  21 
  22 let eventStream = new Subject();
  23 // only consumes 2 events
  24 let obs1 = eventStream.pipe(take(2))
  25 let subs1: Subscription = obs1.subscribe({
  26   next: (x) => {
  27     console.log('Sub1 next: ' + x);
  28   },
  29   error: (err) => {
  30     console.log('Sub1 error: ' + err);
  31   },
  32   complete: () => {
  33     console.log('Sub1 completed');
  34     console.log(`In complete closed subs1 ${subs1.closed}`);
  35     subs1.unsubscribe();
  36   }
  37 });
  38 
  39 const subscription2: Subscription = eventStream.subscribe({
  40   next: (x) => {
  41     console.log('Sub2 next: ' + x);
  42   },
  43   error: (err) => {
  44     console.log('Sub2 error: ' + err);
  45   },
  46   complete: () => {
  47     console.log('Sub2 completed');
  48   }
  49 });
  50 
  51 // send notifications
  52 setTimeout(() => {
  53   eventStream.next('n1_foo');
  54   eventStream.next('n2_foo');
  55   eventStream.error('e1_foo');
  56   eventStream.error('e2_foo');
  57   eventStream.complete();
  58   console.log(`Closed subs1 ${subs1.closed}`);
  59 }, 3000);

   1 ./node_modules/ts-node/dist/bin.js index.ts
   2 ./node_modules/typescript/bin/tsc index.ts
   3 node index.js

   1 docker pull node:24-alpine 
   2 docker run -it node:24-alpine sh 
   3 apk add nano
   4 cd /tmp
   5 mkdir foo
   6 cd foo
   7 npm init --init-type=module -y
   8 echo '{ "compilerOptions": {  "target": "es2022", "sourceMap": true } }' > tsconfig.json 
   9 npm install rxjs
  10 nano index.ts 
  11 node index.ts # node v24.21.0 can run ts files directly
  12

Enums

Using an enum is simple: just access any member as a property off of the enum itself, and declare types using the name of the enum.

   1 enum Direction {
   2   Up=0,
   3   Down,
   4   Left,
   5   Right,
   6 }
   7 
   8 enum Direction {
   9   Up = "UP",
  10   Down = "DOWN",
  11   Left = "LEFT",
  12   Right = "RIGHT",
  13 }
  14 
  15 enum BooleanLikeHeterogeneousEnum {
  16   No = 0,
  17   Yes = "YES",
  18 }

Microtask

Date and epoch

   1 let d: Date = new Date();
   2 console.log(">>> " + d.getTime() );

Nullish coalescing operator (??) (double question marks)

nullish coalescing operator

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

   1 const x = null;
   2 const y = x ?? "x is null";
   3 console.log(y);
   4 // "x is null"
   5

Docker node24 and typescript

index.ts

   1 #!/usr/bin/env node
   2 
   3 interface Acme{
   4   name: string | null | undefined;
   5 }
   6 
   7 class Snafu{
   8   private name:string;
   9 
  10   constructor(name:string){
  11     this.name = name;
  12   }
  13 
  14   getName():string {
  15     return this.name;
  16   }
  17 }
  18 
  19 function xyz():Promise<Acme>{
  20   let r:Acme = {name:"aaa"};
  21 
  22   let p1:Promise<Acme> = new Promise<Acme>(  (resolve,reject)=>{
  23     resolve(r);
  24   });
  25 
  26   return p1;
  27 }
  28 
  29 function asd():Promise<Snafu>{
  30   let s:Snafu = new Snafu("bbbb");
  31 
  32   let p:Promise<Snafu> = new Promise<Snafu>(  (resolve,reject)=>{
  33     resolve(s);
  34   });
  35 
  36   return p;
  37 }
  38 
  39 let promise1 =  xyz();
  40 let p2 = asd();
  41 
  42 console.log("Hello world!");
  43 promise1.then( (value: Acme)=>{  console.log(value.name);  } ); 
  44 p2.then( (value: Snafu)=>{ console.log(value.getName() ) ;  } );

   1 docker pull node:24-alpine
   2 docker run -it node:24-alpine sh 
   3 node -v # v24.21.0
   4 npm -v # 11.19.0
   5 cd /tmp
   6 mkdir bar 
   7 cd bar
   8 npm init --init-type=module -y
   9 echo '{ "compilerOptions": {  "target": "es2022", "sourceMap": true } }' > tsconfig.json 
  10 apk add nano
  11 nano index.ts
  12 node index.ts