DEV Community

Avinash Maurya
Avinash Maurya

Posted on

Typescript

Yes, you can have a single backend project that includes both TypeScript and JavaScript files. TypeScript is a superset of JavaScript, so any valid JavaScript code is also valid TypeScript. You can gradually migrate parts of your project to TypeScript by renaming or creating new files with .ts extensions and incorporating TypeScript features.

This flexibility allows you to adopt TypeScript incrementally, allowing existing JavaScript code to coexist with TypeScript code within the same project. Keep in mind that if you're using TypeScript-specific features, they will only be applicable to the TypeScript files.

Certainly! Let's consider a simple example of a CRUD (Create, Read, Update, Delete) API using both JavaScript and TypeScript in a Node.js environment. We'll create an endpoint for managing a list of items.

JavaScript Version (app.js):

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const PORT = 3000;

app.use(bodyParser.json());

let items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
];

app.get('/api/items', (req, res) => {
  res.json(items);
});

app.post('/api/items', (req, res) => {
  const newItem = req.body;
  items.push(newItem);
  res.json(newItem);
});

app.put('/api/items/:id', (req, res) => {
  const itemId = parseInt(req.params.id);
  const updatedItem = req.body;

  items = items.map((item) => (item.id === itemId ? updatedItem : item));

  res.json(updatedItem);
});

app.delete('/api/items/:id', (req, res) => {
  const itemId = parseInt(req.params.id);
  items = items.filter((item) => item.id !== itemId);
  res.sendStatus(204);
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

TypeScript Version (app.ts):

import express from 'express';
import bodyParser from 'body-parser';

const app = express();
const PORT = 3000;

app.use(bodyParser.json());

interface Item {
  id: number;
  name: string;
}

let items: Item[] = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
];

app.get('/api/items', (req, res) => {
  res.json(items);
});

app.post('/api/items', (req, res) => {
  const newItem: Item = req.body;
  items.push(newItem);
  res.json(newItem);
});

app.put('/api/items/:id', (req, res) => {
  const itemId = parseInt(req.params.id);
  const updatedItem: Item = req.body;

  items = items.map((item) => (item.id === itemId ? updatedItem : item));

  res.json(updatedItem);
});

app.delete('/api/items/:id', (req, res) => {
  const itemId = parseInt(req.params.id);
  items = items.filter((item) => item.id !== itemId);
  res.sendStatus(204);
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

You can run either the JavaScript version (node app.js) or the TypeScript version (ts-node app.ts) based on your preference. This example demonstrates a basic API with routes for CRUD operations on a list of items.

It sounds like you're considering using Node.js for a JavaScript project and introducing TypeScript for certain controllers. TypeScript is a statically typed superset of JavaScript, offering additional features for type checking. If you have specific questions or need guidance on implementing this, feel free to ask!

Certainly! Let's modify the example to showcase a scenario where some controllers are written in JavaScript (controllers.js) and some in TypeScript (controllers.ts).

JavaScript Controller (controllers.js):

const express = require('express');
const router = express.Router();

router.get('/jsController', (req, res) => {
  res.send('This is a JavaScript controller');
});

module.exports = router;
Enter fullscreen mode Exit fullscreen mode

TypeScript Controller (controllers.ts):

import express from 'express';

const router = express.Router();

router.get('/tsController', (req, res) => {
  res.send('This is a TypeScript controller');
});

export = router;
Enter fullscreen mode Exit fullscreen mode

Main Server File (app.js or app.ts):

const express = require('express');
const bodyParser = require('body-parser');
const jsController = require('./controllers'); // JavaScript controller
import tsController from './controllers'; // TypeScript controller

const app = express();
const PORT = 3000;

app.use(bodyParser.json());

app.use('/api/js', jsController);
app.use('/api/ts', tsController);

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

In this example, the controllers.js file is written in JavaScript, and the controllers.ts file is written in TypeScript. Both controllers are then used in the main server file (app.js or app.ts). This demonstrates how you can seamlessly integrate both JavaScript and TypeScript controllers in a single project.

Top comments (0)