Contents

  1. typescript
    1. Install, compile and run
    2. kate
    3. Sample code typescript for browser
    4. Constants
    5. Console app hello world
    6. Promise
    7. Question mark after interface member name
    8. Exclamation mark after interface member name
    9. Method not implemented
    10. RxJS
    11. Enums
    12. Microtask
    13. Date and epoch
    14. Nullish coalescing operator (??) (double question marks)
    15. Docker node24 and 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

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

   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

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!");


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

Question mark after interface member name

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

Exclamation mark after interface member name

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

Method not implemented

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

RxJS

   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)

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

typescript (last edited 2026-09-10 16:31:14 by vitor)