🚀 [Feature Request] - Conversion of Javascript code to Typescript code in server & src modules

[prabh1234assla]

Describe the feature

I will be migrating our current Vanilla JavaScript codebase to a type-checked TypeScript codebase. This involves setting up TypeScript, gradually converting JavaScript files to TypeScript, and adding type annotations to ensure robustness. The process includes refactoring code for simplicity and adherence to best practices, running comprehensive tests to validate functionality, and updating documentation. This transition aims to improve code quality, readability, and maintainability, ultimately enhancing the efficiency and reliability of our development process.

It should be implemented because

Why Ts and why not pure vanilla js?

TypeScript stands out from vanilla JavaScript with its outstanding features like static typing, interfaces, enums, generics, union types, type guards, and decorators. These features collectively enhance code quality, readability, and maintainability, while also significantly reducing the occurrence of bugs and errors. By providing a more structured and expressive way to write code, TypeScript empowers developers to build complex applications with confidence, offering a smoother development experience and facilitating collaboration within teams.

Additional context

Here is how I will handle my js to ts conversion

1. Install TypeScript: I will begin by installing TypeScript globally using npm or yarn. npm install -g typescript

2. Rename Files: Change the file extensions of all JavaScript files to TypeScript files. For JSX files, I will change the extension to .tsx.

3. Enable TypeScript Configuration: If project doesn't have a tsconfig.json file, I will create one using the following command: tsc --init

4. Start Converting: Begin converting my JavaScript code to TypeScript by following these steps:

• Static Typing: Add type annotations for variables, function parameters, and return types to enhance code reliability.

let firstName: string = 'John';
let age: number = 30;

function add(a: number, b: number): number {
  return a + b;
}

• Interfaces: Define interfaces to describe the structure of objects, promoting code clarity and maintainability.

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

let person: Person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

• Clean Class Design: When converting existing JavaScript classes to TypeScript, refactor them to adhere to clean and object-oriented design principles, ensuring the new TypeScript codebase is more organized and maintainable.

• Enums: Replace constants with enums to improve code readability and maintainability.

enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Green;
console.log(c); // Output: 1

• Generics: Utilize generics for writing reusable code that can work with a variety of types, enhancing code flexibility and scalability.

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>('hello');
console.log(output); // Output: hello

• Union Types: Specify that a variable can have one of several possible types, enhancing code flexibility.

let value: string | number;
value = 'hello';
console.log(value); // Output: hello
value = 42;
console.log(value); // Output: 42

• Type Guards: Narrow down the type of a variable within a block of code, ensuring type-safe operations.

function printName(name: string | string[]): void {
  if (typeof name === 'string') {
    console.log(name.toUpperCase());
  } else {
    console.log(name.join(', '));
  }
}

printName('John'); // Output: JOHN
printName(['John', 'Doe']); // Output: John, Doe

• Type Inference: Allow TypeScript to infer the type of a variable based on its value, reducing the need for explicit type annotations.

let x = 3; // TypeScript infers that x is of type number
console.log(x); // Output: 3

• Optional Chaining: Safely access nested properties without worrying about null or undefined values, preventing runtime errors.

interface Person {
  firstName: string;
  lastName?: string;
}

let person: Person = {
  firstName: 'John',
};

console.log(person.lastName?.toUpperCase()); // Output: undefined

• Decorators: Add metadata to classes and their members to enhance code functionality without modifying the original code, commonly used in frameworks like Angular, but if needed I can add this to the current project.

@sealed
class BugReport {
  type = "report";
  title: string;

  constructor(t: string) {
    this.title = t;
  }
}

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

When @sealed is executed, it will seal both the constructor and its prototype, and will therefore prevent any further functionality from being added to or removed from this class during runtime by accessing BugReport.prototype or by defining properties on BugReport itself.

Additional things I will consider While converting the Js codebase to Ts codebase :

1. Resolve Compilation Errors: As I convert your code, TypeScript might raise compilation errors due to type inconsistencies or other issues. I will make sure to address these errors one by one by refining your type annotations and ensuring compatibility with TypeScript's type system.

2. Incremental Adoption: If the codebase is extensive, I will consider adopting TypeScript incrementally. I will start by converting individual modules or components and gradually expand the TypeScript coverage across the project.

3. Testing and Validation: Test the TypeScript code thoroughly to ensure it behaves as expected. Use TypeScript's type system to catch errors early in the development process, reducing the likelihood of runtime issues.

4. Continuous Integration: Integrate TypeScript conversion into continuous integration pipeline to ensure that new changes adhere to TypeScript standards and do not introduce regressions.

5. Documentation and Training: Update project documentation to familiarize team members with TypeScript features.

Would you like to work on this issue?

Yes

[github-actions[bot]]

Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.

[asr2003]

@prabh1234assla This needs contribution from lot of contributors to completely migrate to TypeScript. It will work as parent issue. Will decide the approach soon to tackle this issue and comeback to this

[prabh1234assla]

I can easily convert the full codebase to Ts. Just give me a chance.

I've successfully utilized TypeScript across projects integrating React-Three/Fiber, React-Three/drei, Three.js and React Spring into Next.js for immersive 3D websites, implemented WebRTC and sockets in TypeScript codebases, and built scalable solutions with Gatsby, GraphQL, and TypeScript, all with a focus on robustness and efficiency. I think I have required know-how on how to handle the TypeScript codebases.

You can check my github for the same.

[asr2003]

Okay raise an issue of incorporating initial changes of introducing eslintric.json , tsconfig etc...changes that setups ready to go migration

[asr2003]

It seems there are only few files to change. Ok assigning

[prabh1234assla]

I have done all changes. And I raised a PR for same. One check was not working. Namely VERCEL FAILED TO DEPLOY ON PREVIEW. He rejected PR. Help me in removing that issue so that I can raise and merge PR again.

[prabh1234assla]

@urstrulynishkarsh please assign me this issue and Why you closed my PR i need answers. Please respond sir.

[urstrulynishkarsh]

Please wait dear for ui updation currently our team wokring on frotend

On Sat, 25 May 2024 at 10:57 PM, Prabhdeep Singh Assla < @.***> wrote:

@urstrulynishkarsh https://github.com/urstrulynishkarsh please assign me this issue and Why you closed my PR i need answers. Please respond sir.

— Reply to this email directly, view it on GitHub https://github.com/urstrulynishkarsh/ReactChat/issues/150#issuecomment-2131368273, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXH6TTXIVSIIQI6G7A527MTZEDCXDAVCNFSM6AAAAABIB2CZ6WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZRGM3DQMRXGM . You are receiving this because you were mentioned.Message ID: @.***>

[anshulsoni4]

@urstrulynishkarsh please assign me this issue and Why you closed my PR i need answers. Please respond sir.

pls check your files again