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

Navigation

Upload page content

typescript

Install, compile and run

kate

Sample code typescript for browser

greeter.html

lib.ts

greeter.ts

tsconfig.json

webpack.config.js

build.sh

Constants

Console app hello world

Promise

index.ts

Question mark after interface member name

Exclamation mark after interface member name

Method not implemented

RxJS

index.ts

Enums

Microtask

Date and epoch

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

Docker node24 and typescript

index.ts