Generate Client JavaScript from TypeScript

Video Lecture

Generate Client JavaScript from TypeScript Generate Client JavaScript from TypeScript Generate Client JavaScript from TypeScript

Description

Create client.ts in src/client

1
2
3
4
5
6
7
8
9
class Client {
    private socket: SocketIOClient.Socket

    constructor() {
        this.socket = io();
    }
}

const client = new Client();

Install the socketio-client types

1
npm install @types/socket.io-client

Note

In the videos i've targeted ES3 and module commonjs for the browser. I now recommend using the below client tsconfig.json that targets ES6 and ES6 modules.

create tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "../../dist/client/",
    "baseUrl": ".",
    "paths": {},
    "moduleResolution": "node",
    "strict": true
  },
  "include": [
    "**/*.ts"
  ]
}

You can manually recompile using

1
tsc -p ./src/client -w

Or update npm dev script to concurrently generate changes

1
"dev" : "concurrently -k \"tsc -p ./src/server -w\" \"tsc -p ./src/client -w\" \"nodemon ./dist/server/server.js\"",

Update html to use the new client.js

dist/client/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>

<head>
    <title>TypeScript Socket.IO Course</title>
</head>

<body>
    <script src="socket.io/socket.io.js"></script>
    <script src="client.js"></script>
</body>

</html>