typescript in der praxis - entwicklertag.de...was gezeigt wird! erkenntnisse aus der praxis...
TRANSCRIPT
![Page 1: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/1.jpg)
TypeScript in der PraxisLivecodingJohannes Dienst
![Page 2: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/2.jpg)
Was nicht gezeigt wird!Endlose DownloadsFunktionale Magie
Schlaue Abkürzungen
![Page 3: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/3.jpg)
Was gezeigt wird!Erkenntnisse aus der PraxisAufsetzen eines Workflows
Vorteile von TypeScript(Hoffentlich!) live
![Page 4: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/4.jpg)
TypeScript$> npm install -- save-dev typescript
![Page 5: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/5.jpg)
Deklarationsdateien$> npm install --save-dev @types/jquery
![Page 6: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/6.jpg)
src/tsconfig.json$> ./../node_modules/typescript/bin/tsc --init message TS6071: Successfully created a tsconfig.json file.
![Page 7: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/7.jpg)
tsconfig.json (2){ "compilerOptions ": { "module": "commonjs" , "target": "es5", "noImplicitAny ": false, "sourceMap": false, "rootDir": ".", "outDir": "./../build" , "removeComments ": true }, "compileOnSave ": false, "moduleResolution ": "node", "exclude": [ "node_modules" ] }
![Page 8: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/8.jpg)
package.json - TypeScript Tasks"deploy:tsc" : "./node_modules/typescript/bin/tsc -p ./src" , "watch:tsc" : "nodemon --verbose -w src/ --on-change-only -d 1 -e ts --exec \" npm run deploy:tsc\
![Page 9: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/9.jpg)
TypeScript Kompilieren$> npm run deploy:tsc
> superherorelations@ 1.0.0 deploy:tsc /home/jdienst/git/SuperheroRelations > ./node_modules/ typescript /bin/tsc -p ./src
![Page 10: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/10.jpg)
TypeScript Watch Job$> npm run watch:tsc
> superherorelations@ 1.0.0 watch:tsc /home/jdienst/git/ SuperheroRelations > nodemon --verbose -w src/ --on-change-only -d 1 -e ts --exec "npm run deploy:tsc"
[nodemon] 1.11.0 [nodemon] to restart at any time, enter `rs` [nodemon] ignoring: /home/jdienst/git/ SuperheroRelations /.git/**/* .nyc_output .sass-cache bower_components coverage /home/jdienst/git/ SuperheroRelations /node_modules /**/* [nodemon] watching: /home/jdienst/git/ SuperheroRelations /src/**/* [nodemon] watching extensions: ts [nodemon] child pid: 10695 [nodemon] watching 8 files
![Page 11: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/11.jpg)
src/routes/base_route.tsanlegen
export class BaseRoute { constructor (){}; }
![Page 12: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/12.jpg)
Datenbank- hero_db.json{ "heros" : [ { "id": 1, "name": "Arrow" }, { "id": 2, "name": "Flash" }, { "id": 3, "name": "Batman" }, { "id": 4, "name": "Superman" } ] }
![Page 13: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/13.jpg)
src/hero_db.ts - Modell alsInterfaces
interface Hero { id: number; name: string; }
interface HeroDB { heros: Array; }
![Page 14: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/14.jpg)
HeroRoute -src/routes/hero_route.ts
/// <reference path="./../hero_db.ts" /> const data: HerosDB = require("./../../hero_db.json" );
![Page 15: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/15.jpg)
import {Request, Response, Router, NextFunction} from "express"; import {BaseRoute} from "./base_route" ;
![Page 16: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/16.jpg)
export class HeroRoute extends BaseRoute { constructor() { super(); } }
![Page 17: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/17.jpg)
public static create(router: Router ) { let routes = new HeroRoute();
router.get("/heros", routes.list ); }
private list(req, res: Response, next ) { res.status( 200).json(data); }
![Page 18: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/18.jpg)
server.tsimport {HeroRoute} from "./routes/hero_route" ;
![Page 19: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/19.jpg)
server.ts - routes()HeroRoute.create (router);
![Page 20: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/20.jpg)
index.ts - Startpunktfunction getAsync() { console.log("getAsync" ); }
async function getAsyncExp () { console.log("getAsyncExp" ); }
$( document ).ready(function() { console.log("ready!");
$("#get_async" ).on("click", getAsync); $("#async_await" ).on("click", getAsyncExp); });
![Page 21: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/21.jpg)
Generisches getAsyncfunction getAsync<T>(): Promise<T>: { return Promise.resolve( $.getJSON( "http://localhost:8089/heros" ) ); }
![Page 22: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/22.jpg)
Generisches getAsync -Verwendung
$("#get_async" ).on("click", () => { getAsync<HerosDB>(). then(appendHeros); } );
![Page 23: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/23.jpg)
appendHeros - StringTemplating
function appendHeros(herosDB: HerosDB) { let tableBody = $("table tbody" ); tableBody.find( "tr").remove(); herosDB.heros. forEach( (hero) => { tableBody.append( `<tr><td>${hero.id} </td><td>${hero.name} </td></tr>` ) } ); }
![Page 24: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/24.jpg)
webpack - Tasks"deploy:webpack" : "./node_modules/webpack/bin/webpack.js build/index.js build/index_bundle.js""watch:webpack" : "nodemon --verbose -w build/index.js --on-change-only -d 1 --exec \"
![Page 25: TypeScript in der Praxis - entwicklertag.de...Was gezeigt wird! Erkenntnisse aus der Praxis Aufsetzen eines Workflows Vorteile von TypeScript (Hoffentlich!) live](https://reader033.vdocuments.pub/reader033/viewer/2022060517/604a19283ab953467d69956c/html5/thumbnails/25.jpg)
async/awaitasync function getAsyncExp () { let herosDB = await getAsync<HerosDB>(); appendHeros(herosDB); }