{ "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\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 TypeScript!" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "tslab.display.html('Hello TypeScript!')" ] }, { "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 }