Generate Client JavaScript from TypeScript
Video Lecture
Description
Create client.ts in src/client
| class Client {
private socket: SocketIOClient.Socket
constructor() {
this.socket = io();
}
}
const client = new Client();
|
Install the socketio-client types
| 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
Or update npm dev script to concurrently generate changes
| "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>
|
