andromeeda¶

Pygments style based on the Andromeeda VS Code theme.

Accessibility¶

Contrast ratio relative to the background color #23262E, calculated according to WCAG guidelines.

Token Type	Color	Contrast	Result
Text	#D5CED9	9.84	✅ PASS
Error	#FC644D	5.09	✅ PASS
Comment	#87888F	4.29	⚠️ FAIL
Comment.Preproc	#c74ded	4.12	⚠️ FAIL
Comment.PreprocFile	#96E072	9.51	✅ PASS
Keyword	#c74ded	4.12	⚠️ FAIL
Operator	#ee5d43	4.53	✅ PASS
Name	#00e8c6	9.62	✅ PASS
Name.Attribute	#f39c12	6.90	✅ PASS
Name.Builtin	#FFE66D	12.10	✅ PASS
Name.Class	#FFE66D	12.10	✅ PASS
Name.Constant	#f39c12	6.90	✅ PASS
Name.Decorator	#FFE66D	12.10	✅ PASS
Name.Entity	#f39c12	6.90	✅ PASS
Name.Exception	#f39c12	6.90	✅ PASS
Name.Function	#FFE66D	12.10	✅ PASS
Name.Tag	#f92672	4.00	⚠️ FAIL
Name.Variable	#00e8c6	9.62	✅ PASS
Name.Other	#D5CED9	9.84	✅ PASS
Literal	#96E072	9.51	✅ PASS
Literal.String	#96E072	9.51	✅ PASS
Literal.String.Interpol	#ee5d43	4.53	✅ PASS
Literal.String.Regex	#7cb7ff	7.26	✅ PASS
Literal.Number	#f39c12	6.90	✅ PASS
Generic.Deleted	#ee5d43	4.53	✅ PASS
Generic.Inserted	#96E072	9.51	✅ PASS
Generic.Error	#FC644D	5.09	✅ PASS
Generic.Heading	#f92672	4.00	⚠️ FAIL
Generic.Subheading	#ff00aa	4.20	⚠️ FAIL
Generic.Output	#96E072	9.51	✅ PASS
Generic.Prompt	#87888F	4.29	⚠️ FAIL
Generic.Traceback	#FC644D	5.09	✅ PASS

Samples¶

Here are examples of the andromeeda style applied to different programming languages.

bash

#!/bin/bash
# weather.sh
# Copyright 2018 computer-geek64. All rights reserved.

program=Weather
version=1.1
year=2018
developer=computer-geek64

case $1 in
-h | --help)
	echo "$program $version"
	echo "Copyright $year $developer. All rights reserved."
	echo
	echo "Usage: weather [options]"
	echo "Option          Long Option             Description"
	echo "-h              --help                  Show the help screen"
	echo "-l [location]   --location [location]   Specifies the location"
	;;
-l | --location)
	curl https://wttr.in/$2
	;;
*)
	curl https://wttr.in
	;;
esac

#include <stdio.h>

#define ARR_LEN 7

void qsort(int v[], int left, int right);
void printArr(int v[], int len);

int main()
{
	int i;
	int v[ARR_LEN] = { 4, 3, 1, 7, 9, 6, 2 };
	printArr(v, ARR_LEN);
	qsort(v, 0, ARR_LEN-1);
	printArr(v, ARR_LEN);
	return 0;
}

void qsort(int v[], int left, int right)
{
	int i, last;
	void swap(int v[], int i, int j);

	if (left >= right)
		return;
	swap(v, left, (left + right) / 2);
	last = left;
	for (i = left+1; i <= right; i++)
		if (v[i] < v[left])
			swap(v, ++last, i);
	swap(v, left, last);
	qsort(v, left, last-1);
	qsort(v, last+1, right);
}

void swap(int v[], int i, int j)
{
	int temp;

	temp = v[i];
	v[i] = v[j];
	v[j] = temp;
}

void printArr(int v[], int len)
{
	int i;
	for (i = 0; i < len; i++)
		printf("%d ", v[i]);
	printf("\n");
}

// From https://github.com/Heatwave/The-C-Programming-Language-2nd-Edition/blob/master/chapter-4-functions-and-program-structure/8.qsort.c

css

html {
	margin: 0;
	background: black;
	height: 100%;
}

body {
	margin: 0;
	width: 100%;
	height: inherit;
}

/* the three main rows going down the page */

body > div {
  height: 25%;
}

.thumb {
	float: left;
	width: 25%;
	height: 100%;
	object-fit: cover;
}

.main {
  display: none;
}

.blowup {
  display: block;
  position: absolute;
  object-fit: contain;
  object-position: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.darken {
  opacity: 0.4;
}

/* From https://github.com/mdn/css-examples/blob/main/object-fit-gallery/style.css */

diff

$ cat file1.txt
cat
mv
comm
cp

$ cat file2.txt
cat
cp
diff
comm

$ diff -c file1.txt file2.txt
*** file1.txt   Thu Jan 11 08:52:37 2018
--- file2.txt   Thu Jan 11 08:53:01 2018
***************
*** 1,4 ****
  cat
- mv
- comm
  cp
--- 1,4 ----
  cat
  cp
+ diff
+ comm

# From https://www.geeksforgeeks.org/diff-command-linux-examples/

package main

import (
    "fmt"
    "log"
    "net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hi there, I love %s!", r.URL.Path[1:])
}

func main() {
    http.HandleFunc("/", handler)
    log.Fatal(http.ListenAndServe(":8080", nil))
}

html+jinja

{# templates/results.html #}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Results</title>
</head>

<body>
  <h1>{{ test_name }} Results</h1>
  <ul>
  {% for student in students %}
    <li>
      <em>{{ student.name }}:</em> {{ student.score }}/{{ max_score }}
    </li>
  {% endfor %}
  </ul>
</body>
</html>

{# From https://realpython.com/primer-on-jinja-templating/#use-if-statements #}

html

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>MDN Web Docs Example: Toggling full-screen mode</title>
    <link rel="stylesheet" href="styles.css">
    <style class="editable">
        video::backdrop {
          background-color: #448;
        }
    </style>

    <!-- import the webpage's javascript file -->
    <script src="script.js" defer></script>
  </head>
  <body>
    <section class="preview">
      <video controls
        src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
        poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
        width="620">

        Sorry, your browser doesn't support embedded videos.  Time to upgrade!

      </video>
    </section>

<textarea class="playable playable-css" style="height: 100px;">
video::backdrop {
  background-color: #448;
}
</textarea>

<textarea class="playable playable-html" style="height: 200px;">
<video controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
Sorry, your browser doesn't support embedded videos.  Time to upgrade!
</video>
</textarea>

    <div class="playable-buttons">
        <input id="reset" type="button" value="Reset" />
      </div>
    </body>
    <script src="playable.js"></script>
  </body>
</html>

<!-- From https://github.com/mdn/css-examples/blob/main/backdrop/index.html -->

java

import java.awt.Rectangle;

public class ObjectVarsAsParameters
{	public static void main(String[] args)
	{	go();
	}

	public static void go()
	{	Rectangle r1 = new Rectangle(0,0,5,5);
		System.out.println("In method go. r1 " + r1 + "\n");
		// could have been
		//System.out.prinltn("r1" + r1.toString());
		r1.setSize(10, 15);
		System.out.println("In method go. r1 " + r1 + "\n");
		alterPointee(r1);
		System.out.println("In method go. r1 " + r1 + "\n");

		alterPointer(r1);
		System.out.println("In method go. r1 " + r1 + "\n");
	}

	public static void alterPointee(Rectangle r)
	{	System.out.println("In method alterPointee. r " + r + "\n");
		r.setSize(20, 30);
		System.out.println("In method alterPointee. r " + r + "\n");
	}

	public static void alterPointer(Rectangle r)
	{	System.out.println("In method alterPointer. r " + r + "\n");
		r = new Rectangle(5, 10, 30, 35);
		System.out.println("In method alterPointer. r " + r + "\n");
	}

}

javascript

// --- Demonstration of imports ---

// Importing named exports and the default export
import defaultAnimal, { person, add } from './module.js';

// Importing everything from the module as an alias
import * as Module from './module.js';


// --- Demonstration of exports ---

// Named exports
export const person = { name: "Alice", age: 30 };

export function add(x, y = 0) {
  return x + y;
}

// Default export
const defaultAnimal = { name: "Default Animal" };
export default defaultAnimal;

// Generator function
export function* idGenerator() {
  let id = 0;
  while (true) {
    yield id++;
  }
}

// Using typeof for runtime type checks
console.log(typeof person);  // object
console.log(add(2, 3));      // 5
console.log(defaultAnimal);  // { name: "Default Animal" }

// Emulating 'satisfies' behavior using runtime checks
function createAnimal(animal) {
  if (typeof animal.name === 'string') {
    return animal;  // Ensures the animal has a 'name' property
  }
  throw new Error("Animal must have a name");
}

const dog = createAnimal({ name: "Buddy", breed: "Golden Retriever" });
console.log(dog);  // { name: 'Buddy', breed: 'Golden Retriever' }

// Generator usage
const generator = Module.idGenerator();
console.log(generator.next().value);  // 0
console.log(generator.next().value);  // 1
console.log(generator.next().value);  // 2

// Handling a generic-like behavior by allowing any type and runtime checks
function identity(arg) {
  return arg;
}

let str = identity("Hello");
let num = identity(42);
console.log(str, num);  // "Hello", 42

// Emulating default generics by using default parameters
function wrapInArray(value = "") {
  return [value];
}

const stringArray = wrapInArray();  // Default is empty string
const numberArray = wrapInArray(42);  // Passes 42 explicitly
console.log(stringArray, numberArray);  // [""] , [42]

// --- for-of and for-in loops ---

// for-of: Iterates over iterable objects like arrays, strings, maps, etc.
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
  console.log(fruit);  // Outputs: apple, banana, cherry
}

// for-in: Iterates over enumerable properties of an object
const car = { make: "Tesla", model: "Model S", year: 2021 };
for (const key in car) {
  if (car.hasOwnProperty(key)) {
    console.log(`${key}: ${car[key]}`);  // Outputs key-value pairs of car object
  }
}

// --- IIFE (Immediately Invoked Function Expression) ---

(function () {
  console.log("This IIFE runs immediately after it's defined.");
  const privateVar = "I'm private inside the IIFE!";
  console.log(privateVar);  // Accessing the private variable inside the IIFE
})();

// --- Using a generator to loop indefinitely ---
function* infiniteGenerator() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const gen = infiniteGenerator();
console.log(gen.next().value);  // 0
console.log(gen.next().value);  // 1

// --- Async and Await ---

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

// Example usage of async function
fetchData('https://jsonplaceholder.typicode.com/todos/1')
  .then(data => console.log(data))  // Outputs fetched data
  .catch(error => console.error(error));

// JSDoc type annotations
/**
 * @typedef {Object} Task
 * @property {string} title
 * @property {boolean} completed
 */

/**
 * Create a task
 * @param {Task} task
 * @returns {Task}
 */
function createTask(task) {
  return task;
}

const myTask = createTask({
  title: "Learn JavaScript",
  completed: false,
});
console.log(myTask);

// Importing everything as a namespace (simulated for demonstration)
console.log(Module.person);  // { name: "Alice", age: 30 }
console.log(Module.add(10, 20));  // 30

lua

ball = {
  xpos = 60,
  ypos = 60,

  -- without the colon syntax, must mention self argument explicitly
  move = function(self, newx, newy)
    self.xpos = newx
    self.ypos = newy
  end
}

-- using the colon, ball is passed as self automatically
ball:move(100, 120)

-- using the dot, must pass self explicitly
ball.move(ball, 100, 120)

markdown

An h1 header
============

Paragraphs are separated by a blank line.

2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
look like:

  * this one
  * that one
  * the other one

Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.

> Block quotes are
> written like so.
>
> They can span multiple paragraphs,
> if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺



An h2 header
------------

Here's a numbered list:

 1. first item
 2. second item
 3. third item

Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here's a code sample:

    # Let me re-iterate ...
    for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:

~~~
define foobar() {
    print "Welcome to flavor country!";
}
~~~

(which makes copying & pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:

~~~python
import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print(i)
~~~



### An h3 header ###

Now a nested list:

 1. First, get these ingredients:

      * carrots
      * celery
      * lentils

 2. Boil some water.

 3. Dump everything in the pot and follow
    this algorithm:

        find wooden spoon
        uncover pot
        stir
        cover pot
        balance wooden spoon precariously on pot handle
        wait 10 minutes
        goto first step (or shut off burner when done)

    Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).

Here's a link to [a website](http://foo.bar), to a [local
doc](local-doc.html), and to a [section heading in the current
doc](#an-h2-header). Here's a footnote [^1].

[^1]: Some footnote text.

Tables can look like this:

Name           Size  Material      Color
------------- -----  ------------  ------------
All Business      9  leather       brown
Roundabout       10  hemp canvas   natural
Cinderella       11  glass         transparent

Table: Shoes sizes, materials, and colors.

(The above is the caption for the table.) Pandoc also supports
multi-line tables:

--------  -----------------------
Keyword   Text
--------  -----------------------
red       Sunsets, apples, and
          other red or reddish
          things.

green     Leaves, grass, frogs
          and other things it's
          not easy being.
--------  -----------------------

A horizontal rule follows.

***

Here's a definition list:

apples
  : Good for making applesauce.

oranges
  : Citrus!

tomatoes
  : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each
term and  its definition to spread things out more.)

Here's a "line block" (note how whitespace is honored):

| Line one
|   Line too
| Line tree

and images can be specified like so:

![example image](example-image.jpg "An exemplary image")

Inline math equation: $\omega = d\phi / dt$. Display
math should get its own line like so:

$$I = \int \rho R^{2} dV$$

And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.

| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

<!--- From http://www.unexpected-vortices.com/sw/rippledoc/quick-markdown-example.html -->

php

<?php

namespace App\Console;

use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;

class Kernel extends ConsoleKernel
{
    /**
     * Define the application's command schedule.
     */
    protected function schedule(Schedule $schedule): void
    {
        // $schedule->command('inspire')->hourly();
    }

    /**
     * Register the commands for the application.
     */
    protected function commands(): void
    {
        $this->load(__DIR__.'/Commands');

        require base_path('routes/console.php');
    }
}

python-console

>>> # https://github.com/authlib/joserfc
>>> from joserfc import jwt
>>> from joserfc.jwk import OctKey
>>> key = OctKey.import_key("secret")
>>> encoded = jwt.encode({"alg": "HS256"}, {"k": "value"}, key)
>>> encoded
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrIjoidmFsdWUifQ.ni-MJXnZHpFB_8L9P9yllj3RNDfzmD4yBKAyefSctMY'
>>> token = jwt.decode(encoded, key)
>>> token.header
{'alg': 'HS256', 'typ': 'JWT'}
>>> token.claims
{'k': 'value'}
>>> jwt.encode({"alg": "HS256", "kid": 123}, {"k": "value"}, key)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File ".../joserfc/jws.py", line 111, in serialize_compact
    registry.check_header(protected)
  File ".../joserfc/rfc7515/registry.py", line 68, in check_header
    validate_registry_header(self.header_registry, header)
  File ".../joserfc/registry.py", line 194, in validate_registry_header
    raise InvalidHeaderValueError(f"'{key}' in header {error}")
joserfc.errors.InvalidHeaderValueError: invalid_header_value: 'kid' in header must be a str

python

from typing import Iterator

# This is an example
class Math:
    @staticmethod
    def fib(n: int) -> Iterator[int]:
        """Fibonacci series up to n."""
        a, b = 0, 1
        while a < n:
            yield a
            a, b = b, a + b

    def __call__(self, n: int) -> list[int]:
        return list(self.fib(n))

result = sum(Math.fib(42))
print(f"The answer is {result} \n")

# numbers
print(0x10F, 0b10)

# exception
try:
    1 / 0
except ZeroDivisionError:
    pass

rebol

;## String tests ##
print "Hello ^"World" ;<- with escaped char
multiline-string: {
    bla bla "bla" {bla}
}
char-a: #"a"
escaped-a: #"^(61)"
new-line: #"^/"

;## Binaries ##
print decompress 64#{eJzLSM3JyQcABiwCFQUAAAA=}
;2#{0000 00000} ;<- this one is invalid!
2#{}
#{FF00}

;##Date + time ##
1-Feb-2009
1-Feb-2009/2:24:46+1:0
1:0 1:1:1 -0:1.1

;## Tuple ##
red: 255.0.0
red-with-alpha: 255.0.0.100

;## url!, file! and email! ##
aaa@bbb.cz
http://
dns://
tcp://127.0.0.1
%/c/rebol/
%"c:\Program Files\"
%/c/Program%20Files/
to-rebol-file "c:\Program Files\"
suffix? %bla.swf

;## Money ##
$1
-$1.2
USA$100

;## Tag! ##
<a>
<a href="a()">

;## Pair! ##
10x200

;## Issue! ##
type? #ff0000 ;== issue!

;## some numbers ##
to integer! (1 + (x / 4.5) * 1E-4)

;## some spec comments
1 + 1
comment "aa"
2 + 2
comment {aa}
3 + 3
comment {a^{}
4 + 4
comment {{}}
5 + 5
comment {
	foo: 6
}
6 + 6
comment [foo: 6]
7 + 7
comment [foo: "[" ]
8 + 8
comment [foo: {^{} ]
9 + 9
comment [foo: {boo} ]
10 + 10
comment 5-May-2014/11:17:34+2:00
5-May-2014/11:17:34+2:00 11 + 11

;## other tests ##
---: 1
x/(1 + n)/y
b/:1

;## and...
REBOL [
    purpose: {
        reads css file and creates html from it
        so one can see how the styles looks like
    }
]
style: %default
out: rejoin [{
<html>
<head>
  <title>Pygments style: } style {.css</title>
  <link rel="stylesheet" href="} style {.css">
</head>
<body>
<div class="syntax"><pre>
}]
css: read/lines join style %.css
foreach line css [
    parse line [".syntax ." copy c to " " thru "/*" copy t to "*/" to end (
        append out rejoin ["<span class=" c ">" t "</span>^/"])
    ]
]
write join style %.html join out "</pre></div></body></html>"
halt

rst

* This is a bulleted list.
* It has two items, the second
  item uses two lines.

1. This is a numbered list.
2. It has two items too.

#. This is a numbered list.
#. It has two items too.

This is a normal text paragraph. The next paragraph is a code sample::

   It is not processed in any way, except
   that the indentation is removed.

   It can span multiple lines.

This is a normal text paragraph again.

Lorem ipsum [#]_ dolor sit amet ... [#]_

.. rubric:: Footnotes

.. [#] Text of the first footnote.
.. [#] Text of the second footnote.

.. From https://devguide.python.org/documentation/markup/

ruby

class LotteryTicket

  NUMERIC_RANGE = 1..25

  attr_reader :picks, :purchased

  def initialize( *picks )
    if picks.length != 3
      raise ArgumentError, "three numbers must be picked"
    elsif picks.uniq.length != 0x3
      raise ArgumentError, "the three picks must be different numbers"
    elsif picks.detect { |p| not NUMERIC_RANGE === p }
      raise ArgumentError, "the three picks must be numbers between 1 and 25"
    end
    @picks = picks
    @purchased = Time.now
  end

end

rust

// Unlike C/C++, there's no restriction on the order of function definitions
fn main() {
    // We can use this function here, and define it somewhere later
    fizzbuzz_to(100);
}

// Function that returns a boolean value
fn is_divisible_by(lhs: u32, rhs: u32) -> bool {
    // Corner case, early return
    if rhs == 0 {
        return false;
    }

    // This is an expression, the `return` keyword is not necessary here
    lhs % rhs == 0
}

// Functions that "don't" return a value, actually return the unit type `()`
fn fizzbuzz(n: u32) -> () {
    if is_divisible_by(n, 15) {
        println!("fizzbuzz");
    } else if is_divisible_by(n, 3) {
        println!("fizz");
    } else if is_divisible_by(n, 5) {
        println!("buzz");
    } else {
        println!("{}", n);
    }
}

// When a function returns `()`, the return type can be omitted from the
// signature
fn fizzbuzz_to(n: u32) {
    for n in 1..=n {
        fizzbuzz(n);
    }
}

scheme

(define WINDOW-WIDTH 150)
(define WINDOW-HEIGHT 180)

; A world is a number.
; Its display is a blue disk of that size.
; show-world : world -> image
(define (show-world diameter)
  (circle diameter "solid" "blue"))
"Examples of show-world:"
(show-world 1) "should be a blue dot"
(show-world 20) "should be" (circle 20 "solid" "blue")

; The next world is one larger.
; next-world : world -> world
(define (next-world diameter)
  (+ 1 diameter))
"Examples of next-world:"
(next-world 7) "should be" 8

"Now let's start the animation!"

(big-bang WINDOW-WIDTH WINDOW-HEIGHT 1 1)
(on-update-event show-world)
(on-tick-event next-world)

sql

USE AdventureWorks2022;
GO
IF OBJECT_ID('dbo.NewProducts', 'U') IS NOT NULL
    DROP TABLE dbo.NewProducts;
GO
ALTER DATABASE AdventureWorks2022 SET RECOVERY BULK_LOGGED;
GO

SELECT * INTO dbo.NewProducts
FROM Production.Product
WHERE ListPrice > $25
AND ListPrice < $100;
GO
ALTER DATABASE AdventureWorks2022 SET RECOVERY FULL;
GO

swift

class Residence {
    var rooms: [Room] = []
    var numberOfRooms: Int {
        return rooms.count
    }
    subscript(i: Int) -> Room {
        get {
            return rooms[i]
        }
        set {
            rooms[i] = newValue
        }
    }
    func printNumberOfRooms() {
        print("The number of rooms is \(numberOfRooms)")
    }
    var address: Address?
}

toml

# This is a TOML document

title = "TOML Example"

[owner]
name = "Tom Preston-Werner"
dob = 1979-05-27T07:32:00-08:00

[database]
enabled = true
ports = [ 8000, 8001, 8002 ]
data = [ ["delta", "phi"], [3.14] ]
temp_targets = { cpu = 79.5, case = 72.0 }

[servers]

[servers.alpha]
ip = "10.0.0.1"
role = "frontend"

[servers.beta]
ip = "10.0.0.2"
role = "backend"

typescript

// Using 'typeof' to infer types
const person = { name: "Alice", age: 30 };
type PersonType = typeof person;  // { name: string; age: number }

// 'satisfies' to ensure a type matches but allows more specific types
type Animal = { name: string };
const dog = { name: "Buddy", breed: "Golden Retriever" } satisfies Animal;

// Generics with 'extends' and default values
function identity<T extends number | string = string>(arg: T): T {
  return arg;
}

let str = identity();  // Default type is string
let num = identity(42);  // T inferred as number

// 'extends' with interface and class
interface HasLength {
  length: number;
}

function logLength<T extends HasLength = string>(arg: T): void {
  console.log(arg.length);
}

logLength("Hello");    // OK: string has length (default is string)
logLength([1, 2, 3]);  // OK: array has length
// logLength(123);      // Error: number doesn't have length

// 'typeof' with functions
function add(x: number, y: number): number {
  return x + y;
}

type AddFunctionType = typeof add;  // (x: number, y: number) => number

// Generic interfaces with 'extends' and default types
interface Box<T extends object = { message: string }> {
  content: T;
}

let defaultBox: Box = { content: { message: "Hello" } };  // Uses default type
let customBox: Box<{ status: number }> = { content: { status: 200 } };

// Complex example with 'satisfies' and default generics
type Task = {
  title: string;
  description?: string;
  completed: boolean;
};

const myTask = {
  title: "Learn TypeScript",
  completed: false,
  priority: "High",
} satisfies Task;  // Allows priority but ensures Task structure

// Generic function with default type
function wrapInArray<T = string>(value: T): T[] {
  return [value];
}

const stringArray = wrapInArray();  // Default to string
const numberArray = wrapInArray(42);  // T inferred as number

/**
 * Combines two generic types into a tuple.
 *
 * @template T - The first type.
 * @template U - The second type.
 * @param {T} first - The first value.
 * @param {U} second - The second value.
 * @returns {[T, U]} A tuple containing both values.
 */
function combine<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

vue

<script setup>
import { ref } from 'vue'

const message = ref('Hello World!')

function reverseMessage() {
  // Access/mutate the value of a ref via
  // its .value property.
  message.value = message.value.split('').reverse().join('')
}

function notify() {
  alert('navigation was prevented.')
}
</script>

<template>
  <h1>{{ message }}</h1>
  <button @click="reverseMessage">Reverse Message</button>
  <button @click="message += '!'">Append "!"</button>
  <a href="https://vuejs.org" @click.prevent="notify">
    A link with e.preventDefault()
  </a>
</template>

<style>
button, a {
  display: block;
  margin-bottom: 1em;
}
</style>