Lekce 5 - TypeScript

V minulém díle, Zpět a Vpřed, jsem ukazoval, co můžu díky stavu hry docílit.

V tomto díle ukáži, jak spojím jednotlivé soubory do jednoho kompaktního celku.

Nadstavby JavaScriptu

Zatím jsem všechny javascriptové soubory přidával přímo do index.html pomocí tagu nové výhody, protože musíte zvolit jeho nižší verzi a vzdát se některých jeho funkcí. Druhá velká nevýhoda psaní JS kodu přímo je ta, že vzniká velké množství souborů, které musíte ručně a značně neelegantně přidávat do souboru index.html.

Obě tyto nevýhody řeší nadstavby JS, které se do VanillaJS transpilují. Existuje mnoho nadstaveb např. CoffeeScript, Babel+Flow, já budu dále používat TypeScript.

TypeScript

Oproti běžnému JavaScriptu má TypeScript několik velkých výhod:

• Poskytuje typovou kontrolu a tím zabraňuje potenciálním chybám.
• Lze v něm využit všechny výhody JavaScriptu z jeho ES6 verze.
• Pomocí importů a exportů umožňuje propojit jednotlivé soubory do uceleného projektu.

Pokud bychom hru, co máme přepsali do TypeScriptu, vypadal by index.tsx takto:

import './style/index.css';
import * as BABYLON from 'babylonjs';
import * as React from "react";
import * as ReactDOM from "react-dom";
import {createStore} from 'redux';
import createStateFromUri from './state-uri/create-state-from-uri';
import createTitleFromState from './state-uri/create-title-from-state';
import createUriFromState from './state-uri/create-uri-from-state';
import createScene from './scene/create-scene';
import updateScene from './scene/update-scene';
import {stateReducer} from './redux-reducers/state-reducer';
import {wrapReducer} from './tools/wrap-reducer';

const store = createStore(wrapReducer(stateReducer), createStateFromUri(document.location.toString()));
const root = document.getElementById("root");
const canvas = document.getElementById("scene") as HTMLCanvasElement;
const engine = new BABYLON.Engine(canvas, true);
const scene = createScene(canvas, engine, store);
engine.runRenderLoop(function () {
    scene.render();
});
window.addEventListener("resize", function () {
    engine.resize();
});

function render() {
    updateScene(scene, store.getState());
}
store.subscribe(()=> {
    const state = store.getState() as any;
    if (state.lastAction.type !== 'CHANGE_STATE') {
        const uri = createUriFromState(state);
        const title = createTitleFromState(state);
        document.title = title;
        history.pushState({}, title, uri);
    }
});


store.subscribe(render);
render();

window.onpopstate = function () {
    const state = createStateFromUri(document.location.toString());
    store.dispatch({type:'CHANGE_STATE',state});
};

Ostatní soubory si můžeš stáhnout pod článkem.

Pro TypeScript transpilátor vyrobím konfigurační soubor tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "jsx": "react"
  }
}

create-react-app

Tyto soubory se musí převést do JavaScriptu k tomu slouží TypeScript transpilátor. Následně se soubory spojí do jednoho. Na to se obvykle používá nástroj WebPack. Je ovšem docela složité nakonfigurovat a nastavit vše tak, aby hladce fungovalo. Proto se často používají předpřipravené projekty. Vzhledem k tomu, že v dalším článku budu používat knihovnu React, použiji k výrobě předpřipraveného projektu nástroj create-react-app.

Pro spuštění tohoto nástroje potřebuji mít nainstalovaný Node.js. Když mám nainstalovaný Node nainstaluji create-react-app. Potom si otevřu příkazový řádek ve složce, kde chci projekt mít a spustím:

create-react-app web-game --scripts-version=react-scripts-ts

Tím se mi vytvoří jednoduchý předpřipravený projekt. Skládá se z několika důležitých součástí:

• Složka src obsahuje všechny zdrojové kódy projektu, kromě souboru index.html.
• Souboru src/index.tsx se WebPack chytí a dále ho spojuje s dalšími soubory, které má importované.
• Složka public obsahuje vše, co není potřeba transpilovat.
• Soubor public/index.html
• Soubor package.json uchovává různé informace o projektu a hlavně seznam balíčků, které se v projektu využívají.
• Složka node_modules obsahuje jednotlivé balíčky, které se instalují pomocí nástroje npm nebo Yarn. Sem se instaluje to, co je popsáno v package.json. Tato složka se necommituje do git repozitáře, protože ji lze kdykoliv vytvořit pomocí příkazu npm install nebo yarn install.

TypeScriptové soubory i s konfigurací umístím do složky src/ a do <body> v souboru index.html přidám canvas, jak jsem to udělal v "prvním článku".

Do souboru index.html už nebudu přidávat každý JavaScriptový soubor zvlášť, ale pouze jeden, který mi WebPack automaticky vytvoří spojením mých TypeScriptových souborů a nainstalovaných node_modules.

Rozdělanou hru si můžeš stáhnout pod článkem, nebo jít do Git repozitáře, kde najdeš nejnovější verzi zdrojových kódů. Nebo si ji rovnou můžeš vyzkoušet na webappgames.git­hub.io/web-game.

V dalším díle, Uživatelské rozhraní, ukáži, jak vytvořím uživatelské rozhraní pomocí Reactu a Material UI.