Chat Application with TypeScript


Creating a chat application with TypeScript is a common example of building a real-time application. In this guide, we'll create a simple chat application using TypeScript, HTML, and the library for real-time communication.


Before you begin, make sure you have the following prerequisites:

  • Node.js: You can download it from
  • Visual Studio Code (or your preferred code editor)

Creating a Basic Chat Application

Let's create a basic example of a chat application using TypeScript and

Step 1: Set Up Your Project

Create a new directory for your project and navigate to it in your terminal:

mkdir chat-app
cd chat-app

Step 2: Initialize a Node.js Project

Initialize a Node.js project and answer the prompts. You can use the default settings for most prompts:

npm init

Step 3: Install Dependencies

Install the required dependencies, including TypeScript, Express, and

npm install typescript express @types/ @types/express --save

Step 4: Create TypeScript Configuration

Create a TypeScript configuration file (tsconfig.json) in your project directory:

"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true

Step 5: Create Your Server

Create a TypeScript file (e.g., server.ts) to set up your server and WebSocket communication:

// server.ts
import express from 'express';
import http from 'http';
import { Server } from '';
const app = express();
const server = http.createServer(app);
const io = new Server(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
io.on('connection', (socket) => {
console.log('A user connected'); socket.on('chat message', (msg) => {
io.emit('chat message', msg);
socket.on('disconnect', () => {
console.log('User disconnected');
server.listen(3000, () => {
console.log('Listening on *:3000');

Step 6: Create an HTML File

Create an HTML file (index.html) for the chat application:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Application</title>
<script src="/"></script>
const socket = io();
const form = document.getElementById('form');
const input = document.getElementById('input');
const chat = document.getElementById('chat');

form.addEventListener('submit', (e) => {
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';

socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
<ul id="chat"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>

Step 7: Build and Run the Project

Compile your TypeScript code into JavaScript using the TypeScript Compiler (tsc):

npx tsc

Start your server:

node ./dist/server.js

Open the chat application in your web browser. Multiple users can connect and send real-time messages to each other.


Building a chat application with TypeScript and allows for real-time communication between clients. This example demonstrates a simple chat application, but real-time web applications can include various features such as notifications, collaborative editing, and more. TypeScript helps maintain code quality and provides type safety for these complex applications.