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.

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

๐Ÿ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay