notebooks/getting_started.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Getting started with tslab\n",
    "\n",
    "This notebook show the basic usage of tslab with TypeScript.\n",
    "\n",
    "## More examples\n",
    "\n",
    "After you go through this notebook, see these notebooks to understand advanced topics.\n",
    "\n",
    "- [Getting started for JavaScript users](getting_started_javascript.ipynb)\n",
    "- [Deep learning in JavaScript with TensorFlow.js](tensorflow.ipynb)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Writing and running your code interactively\n",
    "\n",
    "- Write and run TypeScript interactively.\n",
    "- To complete code, press `Tab`.\n",
    "- To inspect code, press `Shift-Tab`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hello, tslab!\n",
      "Versions: { tslab: \u001b[32m'1.0.14'\u001b[39m, typescript: \u001b[32m'4.1.2'\u001b[39m, node: \u001b[32m'v14.15.1'\u001b[39m }\n"
     ]
    }
   ],
   "source": [
    "import * as tslab from 'tslab';\n",
    "\n",
    "console.log('Hello, tslab!')\n",
    "console.log('Versions:', tslab.versions)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "/** naiveFib calculates Fibonacci number in a naive way */\n",
    "function naiveFib(n: number): number {\n",
    "    if (n > 1) {\n",
    "        return naiveFib(n - 1) + naiveFib(n - 2);\n",
    "    }\n",
    "    return 1;\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "naiveFib(40) = 165580141 (took 1109ms)\n"
     ]
    }
   ],
   "source": [
    "{\n",
    "    // This is 40x slower if you use Python.\n",
    "    const n = 40;\n",
    "    const start = Date.now()\n",
    "    console.log(`naiveFib(${n}) = ${naiveFib(n)} (took ${Date.now() - start}ms)`)\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# class and interface\n",
    "\n",
    "You can use all TypeScript features including `class` and `interface` with the power of type-safety."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Hello, tslab!\n"
     ]
    }
   ],
   "source": [
    "interface Hello {\n",
    "    getMessage(): string;\n",
    "}\n",
    "\n",
    "class HelloImpl implements Hello {\n",
    "    private name: string;\n",
    "\n",
    "    constructor(name: string) {\n",
    "        this.name = name;\n",
    "    }\n",
    "    \n",
    "    getMessage(): string {\n",
    "        return `Hello, ${this.name}!`;\n",
    "    }\n",
    "}\n",
    "\n",
    "function printMessage(h: Hello) {\n",
    "    console.log(h.getMessage());\n",
    "}\n",
    "\n",
    "printMessage(new HelloImpl('tslab'));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Promise and async await\n",
    "\n",
    "tslab supports `async` and `await` from ES2017. tslab also supports top-level `await`.\n",
    "You can call asynchronous functions easily in tslab."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Slept 501[ms]\n"
     ]
    }
   ],
   "source": [
    "let sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));\n",
    "const start = Date.now();\n",
    "// Top-level await.\n",
    "await sleep(500);\n",
    "`Slept ${Date.now() - start}[ms]`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Promise { \u001b[36m<pending>\u001b[39m }\n"
     ]
    }
   ],
   "source": [
    "// If you don't `await`, tslab shows `Promise` immediately.\n",
    "sleep(500);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## display\n",
    "\n",
    "To display non-plain text data, use `tslab.display`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import fs from \"fs\";\n",
    "import * as tslab from \"tslab\";"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### display HTML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "Hello <span style=\"color:#007ACC;font-size:x-large\"><b>Type</b>Script</span>!"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "tslab.display.html('Hello <span style=\"color:#007ACC;font-size:x-large\"><b>Type</b>Script</span>!')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### display images"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/jpeg": "/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAc2gAwAEAAAAAQAAARoAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/AABEIARoBzQMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2wBDAAoKCgoKChEKChEYERERGCAYGBgYICggICAgICgxKCgoKCgoMTExMTExMTE7Ozs7OztERERERE1NTU1NTU1NTU3/2wBDAQwNDRQSFCESEiFQNi02UFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFD/3QAEAB3/2gAMAwEAAhEDEQA/APZaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAPJviJNKL21jDEKsZYAH+Ld1+tUNG8c39jth1AG5iHGSf3gH17/j+dWviL/yELb/rkf8A0I153QB9HaZrGn6vF5tjKHx1Xoy/Udf6VqV8xQXE9tKs9u7RuvIZTgivR9F8fumINZXcOnmoOf8AgS9/woA9WoqtaXltfQC5tJFkjboynNWaACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/0PZaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAPIfiL/yELb/rkf8A0I153XonxF/5CFt/1yP/AKEa87oAKKKKAPTfhxLJ5t3Dn5NqNj3yRmvVa8n+HH/Hzd/7ifzNesUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH//0fZaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAPIfiL/yELb/rkf8A0I153XonxF/5CFt/1yP/AKEa87oAKKKKAPSvhx/x83f+4n8zXrFeT/Dj/j5u/wDcT+Zr1igAooooAKKKKACiiigAooooAKKKKACiiigAooooA//S9looooAKKKKACiikJAGTQAtFRRzRTAmJ1cDjKkH+VS0AFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUZooA8h+Iv8AyELb/rkf/QjXndeifEX/AJCFt/1yP/oRrzugAooooA9K+HH/AB83f+4n8zXrFeT/AA4/4+bv/cT+Zr1igAooooAKKKKACiiigAooozQAUUUUAFFFFABRRRQB/9P2WiiigAorO1HVbDSofOvpRGOw6lvoOpryrWvHV7e7oNNBtojxu/5aEfX+H8PzoA9E1nxPpmjApM/mTdok5b8ew/H8q8k1nxTqeskxu3lQH/lknQ/7x6n+XtXNsxYlmOSeSTSUAXbHUb3TZxcWUrROPTofYjoR9a9S0Tx5a3O2DVgIJOnmD7h+vdf5fSvIKKAPqBJEkUPGwZWGQQcgj2NOr550jxFqejN/osmY88xvyp/DsfcV63ovi7TNW2wu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CiiigAooooAimghuIzFOodT2NcjqHht1zJYncP7h6/ge9dnRUyinuTKClueVxzXlhKfLLROOCOn5in3WpXt4oS4kLKO3AH6V6VPa29yMTxq+OmRVVNJ05DuEC/jz/OsvZvZMx9k9kzmPDunyPcC9kBCJnbnuen6V3FYd5rtjZgxxfvHHAVeAPx/wqTT9atL7CZ8uQ/wt3+h71cbLS5cOWPupmxRRWPf61aWOUz5kg/hXt9T2q20tzRtLVmuzKoLMcAdSa5rUPEcMOY7MCRv7x+6P8a5i+1W7vziRsJ2ReB/9erun6BdXWJJ/3Ufv1P0FZObekTB1HLSJlyzXeoTAuWkc8Af0ArotP8NscSX5wP7g6/if8K6az0+1sV226YPdjyT9TVynGn1kVGl1kRwwxW8YihUIo7CpKKK1NgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//Q9looooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAx9Q0W0vsuB5ch/iHf6jvXE3umXent+9XK9mHIr06msqupVwCD1B5BrOUEzKdNPU80/tfUDB9n81tvr3x6Z60WOl3d+2YlwndjwKsLHH/a3l7Rt3dMcflXoiqqgKoAA6AVnGPNuZQjzPVmRYaJaWOHI8yQfxN2+g7VsUUVuklsdKSWiCiiimMKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//9k="
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "tslab.display.jpeg(fs.readFileSync('images/nodejs-new-pantone-black.jpg'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### animation\n",
    "\n",
    "`tslab.newDisplay` creates a new `Display` instance to display and update rich contents."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "progress: 100%"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "{\n",
    "    let display = tslab.newDisplay();\n",
    "    for (let progress = 1; progress <= 100; progress++) {\n",
    "      await sleep(20);\n",
    "      display.text(`progress: ${progress}%`);\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Supported JavaScript/TypeScript language features\n",
    "\n",
    "`tslab` uses `TypeScript 3.7` internally. You can use all of latest JavaScript language features and even the latest features supported from `TypeScript 3.7`.\n",
    "\n",
    "### ES2015 (ES6)\n",
    "\n",
    "Demostrations of selected [ES2015 features](https://babeljs.io/docs/en/learn/)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{ abc: \u001b[33m123\u001b[39m, klm: \u001b[32m'hello'\u001b[39m }\n",
      "{ x: \u001b[33m1\u001b[39m, y: \u001b[33m2\u001b[39m, z: \u001b[33m3\u001b[39m }\n",
      "array = [ \u001b[33m0\u001b[39m, \u001b[33m4\u001b[39m, \u001b[33m16\u001b[39m, \u001b[33m36\u001b[39m, \u001b[33m64\u001b[39m ]\n"
     ]
    }
   ],
   "source": [
    "{\n",
    "    // class\n",
    "    class MyObj {\n",
    "        abc: number;\n",
    "        xyz: string;\n",
    "        constructor(abc: number, xyz: string) {\n",
    "            this.abc = abc;\n",
    "            this.xyz = xyz;\n",
    "        }\n",
    "    }\n",
    "    // const and let\n",
    "    const obj = new MyObj(123, 'hello');\n",
    "    // Destructuring\n",
    "    let {abc, xyz: klm} =  obj;\n",
    "    // Enhanced Object Literals\n",
    "    console.log({abc, klm});\n",
    "    \n",
    "    // Spread\n",
    "    let [x, y, z] = [1, 2, 3];\n",
    "    console.log({x, y, z})\n",
    "    \n",
    "    // Generator and for-of\n",
    "    let array: number[] = [];\n",
    "    for (let e of (function*(n: number) {\n",
    "        for (let i = 0; i < n; i += 2) {\n",
    "            yield i;\n",
    "        }\n",
    "    })(10)) {\n",
    "        array.push(e * e);\n",
    "    }\n",
    "    console.log('array =', array);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### ES2017\n",
    "\n",
    "tslab supports `async` and `await` from ES2017. tslab also supports top-level `await`.\n",
    "You can call asynchronous functions easily in tslab."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Slept 500[ms]\n"
     ]
    }
   ],
   "source": [
    "let fn = async () => {\n",
    "    let sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));\n",
    "    const start = Date.now();\n",
    "    await sleep(500);\n",
    "    return `Slept ${Date.now() - start}[ms]`\n",
    "}\n",
    "await fn();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### ESNext\n",
    "TypeScript supports some advanced JavaScript features."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "obj?.x?.z == \u001b[90mundefined\u001b[39m\n",
      "x ?? y ?? z == \u001b[33m0\u001b[39m\n"
     ]
    }
   ],
   "source": [
    "{\n",
    "    // 1. Optional Chaining\n",
    "    // https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/#optional-chaining\n",
    "    let obj = {x: null};\n",
    "    console.log('obj?.x?.z ==', obj?.x?.z);\n",
    "\n",
    "    // 2. Nullish Coalescing\n",
    "    // https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/#nullish-coalescing\n",
    "    let x = null, y = 0, z = 'hello';\n",
    "    console.log('x ?? y ?? z ==', x ?? y ?? z);\n",
    "}"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "TypeScript",
   "language": "typescript",
   "name": "tslab"
  },
  "language_info": {
   "codemirror_mode": {
    "mode": "typescript",
    "name": "javascript",
    "typescript": true
   },
   "file_extension": ".ts",
   "mimetype": "text/typescript",
   "name": "typescript",
   "version": "3.7.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}