5. diel - TypeScript

V minulom diele som ukazoval, čo môžem vďaka stavu hry docieliť. V tomto diele ukážem, ako spojím jednotlivé súbory do jedného kompaktného celku.

Nadstavby JavaScriptu

Zatiaľ som všetky javascriptové súbory pridával priamo do index.html pomocou tagu nové výhody, pretože musíte zvoliť jeho nižšiu verziu a vzdať sa niektorých jeho funkcií. Druhá veľká nevýhoda písanie JS kodu priamo je tá, že vzniká veľké množstvo súborov, ktoré musíte ručne a značne neelegantná pridávať do súboru index.html.

Obe tieto nenýhody rieši nadstavby JS, ktoré sa do VanillaJS transpilují. Existuje veľa nadstavieb napr. CoffeeScript, Babel + Flow, ja budem ďalej používať TypeScript.

TypeScript

Oproti bežnému JavaScriptu má TypeScript niekoľko veľkých výhod:

• Poskytuje typovú kontrolu a tým zabraňuje potenciálnym chybám.
• Možno v ňom využitý všetky výhody JavaScriptu z jeho ES6 verzie.
• Pomocou importov a exportov umožňuje prepojiť jednotlivé súbory do uceleného projektu.

Ak by sme hru, čo máme prepísali do TypeScriptu, vyzeral 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é súbory si môžeš stiahnuť pod článkom.

Pre TypeScript transpilátor vyrobím konfiguračný súbor tsconfig.json.

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

Create-React-app

Tieto súbory sa musia previesť do JavaScriptu k tomu slúži TypeScript transpilátor. Následne sa súbory spojí do jedného. Na to sa obvykle používa nástroj WebPack. Je však celkom zložité nakonfigurovať a nastaviť všetko tak, aby hladko fungovalo. Preto sa často používajú predpripravené projekty. Vzhľadom k tomu, že v ďalšom článku budem používať knižnicu React, použijem na výrobu predpripraveného projektu nástroj create-react-app.

Pre spustenie tohto nástroja potrebujem mať nainštalovaný Node.js. Keď mám nainštalovaný Node nainštalujem create-react-app. Potom si otvorím príkazový riadok v priečinku, kde chcem projekt mať a spustím:

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

Tým sa mi vytvorí jednoduchý predpripravený projekt. Skladá sa z niekoľkých dôležitých súčastí:

• Zložka src obsahuje všetky zdrojové kódy projektu, okrem súboru index.html.
• Súboru src / index.tsx sa WebPack chytí a ďalej ho spája s ďalšími súbormi, ktoré má importované.
• Zložka public obsahuje všetko, čo nie je potreba transpilovat.
• Súbor public / index.html
• Súbor package.json uchováva rôzne informácie o projekte a hlavne zoznam balíčkov, ktoré sa v projekte využívajú.
• Zložka node_modules obsahuje jednotlivé balíčky, ktoré sa inštalujú pomocou nástroja NPM alebo Yarn. Sem sa inštaluje to, čo je popísané v package.json. Táto zložka sa necommituje do git repozitára, pretože ju možno kedykoľvek vytvoriť pomocou príkazu "NPM install" alebo "priadze install".

TypeScriptové súbory is konfiguráciou umiestnim do zložky src a do

v súbore index.html pridám canvas, ako som to urobil v "prvom článku". Do súboru index.html už nebudem pridávať každý javascriptový súbor zvlášť, ale iba jeden, ktorý mi WebPack automaticky vytvorí spojením mojich TypeScriptových súborov a nainštalovaných node_modules.

Rozrobenú hru si môžeš stiahnuť pod článkom, alebo ísť do Git repozitára, kde nájdeš najnovšiu verziu zdrojových kódov. Alebo si ju rovno môžeš vyskúšať na webappgames.git­hub.io/web-game. V ďalšom diele ukážem, ako vytvorím užívateľské rozhranie pomocou React a Material UI.