Typescript met JSX project opzetten

Het eerste wat je nodig hebt om een Typescript project op te zetten is NodeJS en een goede editor voor Typescript, zoals VS Code,

Als deze geïnstalleerd zijn, kan je vervolgens via een command-prompt een project-map aanmaken en de node-modules installeren met het commando,

npm install @types/react @types/react-dom react react-dom typescript tsc-watch webpack

Als deze geïnstalleerd zijn kan je vervolgens een tsconfig aanmaken met het commando,

node_modules\.bin\tsc --init

Dit genereerd een bestand tsconfig.json. Om de gecompileerde Typescript werkend te krijgen in een browser moeten er 4 waardes worden aangepast en 1 worden toegevoegd. Aangepast:

rootDir": "./src", => uncommenten
"outDir": "./dist", => uncommenten
"module": "nodenext", => esnext
"jsx": "react-jsx", => react

En de volgende waarde moet worden toegevoegd,

"allowSyntheticDefaultImports": true,

De referentie documentatie voor tsconfig.json is hier te vinden.

Nu dat Typescript is geconfigureerd, kan de Typescript-code en index.html gemaakt worden.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My Demo</title>

    <script src="dist/mytest.bundle.js"></script>
</head>
<body>
    <h1>Welcome to my page</h1>

    <div id="my-container"></div>
</body>
</html>

MyTest.tsx

import React from "react";
import { createRoot } from 'react-dom/client';

function init_page() {
    console.log('init_page');

    let myval : string = 'hellowie';

    let x = <div>
        Test {myval}
    </div>;

    let myc = document.getElementById('my-container');

    if (myc != null) {
        let r = createRoot( myc );
        r.render( x );
    }
}

document.addEventListener('DOMContentLoaded', () => {
    init_page();
});

De gebruikte webpack config ziet er als volgt uit,

webpack.config.js

const path = require("node:path");

module.exports = {
  mode: "development",
  entry: "./dist/MyTest.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "mytest.bundle.js",
  },
};

Om vervolgens de Typescript code te compileren naar javascript kan het volgende commando worden uitgevoerd:

node_modules\.bin\tsc-watch

Om de webpack bundle te genereren het volgende commando:

node_modules\.bin\webpack -w

- Bent u opzoek naar een Php of Java programmeur voor uw website of applicatie? (freelance / detachering)
- Losse tickets, opdrachten, of gehele projecten in de planning?
- Systeembeheer van Linux of Windows Server ?

Dan kom ik graag met u in contact! Meer informatie over mij vindt u hier.