TypeScript Reference

💡

In this crib-sheet, you will find a curated set of basic syntactic forms used when adding TypeScript code within Dynaboard.

Dynaboard supports all ECMAScript 2020 features through the use of the QuickJS (opens in a new tab) Javascript Engine, a small and embeddable runtime that we compile to WebAssembly for secure sandboxing of your code.

TypeScript (opens in a new tab) is a popular superset of JavaScript created by Microsoft that adds compile-time typechecking capabilities to the language. Any syntax you're familiar with in standard JavaScript, you'll be able to use in Dynaboard.

Under the hood, Dynaboard manages the TypeScript toolchain, such as its language server (opens in a new tab), so that you don't have to set it up. By default, your apps will have intelligent typing on nodes and their properties. Types are optional, but you can always further constrain types as you see fit based on the maturity of your codebase.

💡

This page is not meant to be an an introduction to programming in general, and assumes you have some baseline familiarity with other programming languages than TypeScript. If you're new to programming, you will want to check out an online introductory lesson (opens in a new tab) before diving into using Dynaboard, as the code-forward features of Dynaboard enable its most powerful capabilities.

Literals

// number
123
 
// string
"abc"
'def'
`ghi ${ /* supports interpolation */ } jkl`
 
// boolean
true
false
 
// null & undefined
null
undefined

Arrays

const strArr: string[] = ['a', 'b', 'c']
 
// (arrays are 0-indexed)
 
strArr[0] // => 'a'
strArr[1] // => 'b'

Objects

const obj: Record<string, number> = {
  a: 1,
  b: 2,
  c: 3,
}
 
obj.a    // => 1
obj['b'] // => 2

Functions

// function-style
function square(x: number): number {
  return x * x
}
 
// arrow-style
const square = (x: number): number => {
  return x * x
}
 
// inline arrow-style
const square = (x: number): number => x * x
 
// without types (JavaScript-like)
const square = (x) => x * x

Boolean Logic

💡

In TypeScript, you should use the triple-equals equality and inequality operators (=== and !==, respectively). Double-equals equality will introduce coercion, which is sometimes very surprising (opens in a new tab).

// equality
1 === 1     // => true
1 !== 3 + 4 // => true
 
// greater than, less than
4 > 2   // => true
4 >= 2  // => true
2 < 10  // => true
2 <= 10 // => true
 
// objects have unique identity
{} === {} // => false

Arithmetic

1 + 2  // => 3
5 - 10 // => -5
6 * 7  // => 42
10 / 5 // => 2
10 % 3 // => 1 (modulo aka remainder)
 
Math.round(1.5) // => 2
Math.pow(2, 10) // => 1024
Math.random()   // => random number 0..1

Array Functions

[1, 2, 3, 4].map(x => x * x)                // => [1, 4, 9, 16]
[1, 2, 3, 4].filter(x => x % 2 === 0)       // => [4, 16]
[1, 2, 3, 4].reduce((acc, x) => acc + x, 0) // => 10
[1, 2, 3, 4].join(',')                      // => "1,2,3,4"

Variables

💡

Prefer const whenever possible, and use let as a second-resort. Avoid using the legacy var keyword or not declaring your variables, as this is considered bad practice in modern TypeScript.

const myImmutableValue = "foo"
myImmutableValue = "bar" // => Error
 
let myMutableValue = "foo"
myMutableValue = "bar" // => no Error

Control structures

// if statement
if (booleanExpr) {
  // then...
}
 
// if-else statement
if (booleanExpr) {
  // then...
} else {
  // otherwise...
}
 
// if else-if else statement
if (booleanExpr) {
  // then...
} else if (secondBooleanExpr) {
  // then...
} else {
  // otherwise...
}
 
// while statement
while (booleanExpr) {
  // do...
}
 
// C-style for statement
for (let i = 0; i < 10; i++) {
  // do...
}
 
// for-of statements (array iteration)
const arrValue = [1, 2, 3, 4]
let sum = 0
for (const v of array) {
  sum += v
}
return sum // => 10
 
// for-of statement (object entry iteration)
const objValue = {
  foo: 'bar',
  baz: 'qux'
}
let concatenated = ''
for (const [k, v] of Object.entries(array)) {
  concatenated += k + ':' + v
}
return concatenated // => "foo:barbaz:qux"

Comments

/*
 * Multi-line comments
 */
 
const foo = 'bar' // single-line comments

Promises (async / await)

const myPromiseVal = Promise.resolve(1)
 
async function myAsyncFunc(i: number) {
  await $delay(500)
  return i
}
 
async function myAsyncFunc() {
  const val1 = await myPromiseVal
  const val2 = await myAsyncFunc(2)
 
  return val1 + val2 // => 3
}

Hotkeys Overview