How to Migrate a React Project from JavaScript to TypeScript

Table of contents Introduction Why Migrate? Understanding the Benefits Before You Start: Prerequisites Initiating the Migration: Setting Up TypeScript in Your Project Refactoring React Components State Management and Context API Routing and Async Operations Testing in TypeScript Handling Non-TypeScript Packages Best Practices and Common Pitfalls Conclusion Additional Resources Introduction Hey there, fellow developers! It's exciting to see you here, ready to explore the transition from to in our React projects. JavaScript TypeScript Now, if you've worked with JavaScript, you know it's like that old, comfortable pair of shoes - a little worn, sometimes unpredictable, but familiar. TypeScript, however, is like getting a shoe upgrade with custom insoles; it's the same walking experience but with extra support. So, what's all the buzz about TypeScript? Well, it's essentially JavaScript but with a good dose of extra capabilities thrown in, the most significant being type-checking. Imagine coding without those pesky errors appearing out of the blue. That's the kind of peace TypeScript brings to your life. undefined is not a function In this guide, we're walking through the why and the how of integrating TypeScript into your React project. Because it's awesome and we love it, obviously. But also, combining React's component-based approach with TypeScript’s type-checking features makes for a seriously efficient and enjoyable coding experience. Why React? Here's a sneak peek of what adding TypeScript to a project looks like. In a typical JavaScript component, you'd have: // JavaScript way function Greeting({ name }) { return Hello, {name} ; } With TypeScript, we're introducing a way to ensure is always treated as a string: name // TypeScript style type Props = { name: string; };

// You might not catch this typo until runtime const greeting = createGreeting(123); console.log(greeting); // "Hello, 123" - Wait, that's not right! Now, let's see how TypeScript helps: // In TypeScript function createGreeting(name: string): string { return `Hello, ${name}`; }

// TypeScript will flag this immediately - '123' is not a string! const greeting = createGreeting(123); With TypeScript, that innocent-looking bug would've been caught instantly, ensuring that you're aware of the mishap the moment it occurs. This way, the feedback loop is shortened, and you're not left scratching your head looking at strange bugs in your production environment. 2. Improve Code Quality and Understandability TypeScript's enforcement of typing means that any other developer (or even future you) can understand at a glance what kind of data a function expects and what it returns. This clarity makes codebases more readable and self-documenting. Imagine coming across a JavaScript function written by a colleague: function calculateTotal(items) { // ... complicated logic ... } You'd probably need to dig through the function or find where it's used to understand what should be. With TypeScript, it's immediately clear: items type Item = { price: number; quantity: number; };

// Now we know exactly what to expect! function calculateTotal(items: Item[]): number { // ... complicated logic ... } 3. Enhanced Editor Support TypeScript takes the developer experience to a new level by enhancing text editors and IDEs with improved autocompletion, refactoring, and debugging. This integration is possible because TypeScript can share its understanding of your code with your editor. You'll experience this when you find your editor suggesting method names, providing function parameter info, or warning you about incorrect function usage. It's like having a co-pilot who helps navigate through the code with an extra layer of safety. 4. Easier Collaboration In a team environment, TypeScript shines by helping enforce certain standards and structures across the codebase. When multiple developers contribute to a project, TypeScript’s strict rules ensure everyone adheres to the same coding guidelines, making collaboration smoother. It's a common language that speaks 'quality and consistency' across the board. 5. Future-Proofing Your Code JavaScript is evolving, and TypeScript aims to be abreast of the latest features. By using TypeScript, you can start leveraging the next generation of JavaScript features before they hit mainstream adoption, ensuring your project stays modern and cutting-edge. In conclusion, migrating to TypeScript isn't just about catching errors earlier; it’s about a holistic improvement of your coding process. From better team collaboration to future-proofing your projects, TypeScript provides a robust foundation for building reliable, scalable, and maintainable applications. Making the switch might seem daunting at first, but with the benefits laid out above, it’s clear why TypeScript has become a favorite for many developers worldwide. Ready to dive in? Let's proceed! Before You Start: Prerequisites Alright, so you're all geared up to make the switch to TypeScript with your React project? Great decision! But before we dive into the actual process, we need to make sure a few things are in place. Consider this our prep stage, where we get all our tools ready so that the transition process is as smooth as butter. Here's what you need to have ready: 1. Existing React Project First things first, you need an existing React project. This project should be one you're comfortable experimenting with; while the migration process is quite straightforward, you'll want to do this in a space where it's okay to make temporary messes. // Here's a simple React functional component in your project export default function Greeting({ name }) { return Hello, {name}! ; } This component is a good starting point - it's functional, it's clean, and we can see what's going on at a glance. 2. Basic Understanding of TypeScript You don’t need to be a TypeScript guru, but understanding the basics will make this transition a whole lot easier. Know how to define types, interfaces, and know the difference between and . type interface A little homework goes a long way, trust me. // A sneak peek into TypeScript syntax type Props = { name: string; // defining the 'name' expected to be a string };

// Your component in TypeScript would look like this import React, { FC } from 'react';

interface GreetingProps { name: string; }

const Greeting: FC = ({ name }) => { return Hello, {name}! ; }

export default Greeting; We're now being explicit about what expects, making our component more predictable and easier to work with. See the difference? Greeting 3. Node and NPM/Yarn Your development environment should have Node.js installed because we're going to use or for handling our packages. This requirement is a given since you're working with React, but no harm in making sure, right? npm yarn # Check if Node is installed node --version

# Check if npm is installed npm --version

# Or for yarn yarn --version Your terminal should show you the current versions of these tools, confirming they're all set up and ready to go. 4. Code Editor You're going to need a code editor that can handle TypeScript well. Visual Studio Code is a crowd favorite because it has robust TypeScript support built-in, making the development process smoother with intelligent code completion and error highlighting. 5. Version Control This step isn't mandatory, but it's a smart one. Make sure your current project is under version control with git. If anything goes sideways (though we'll try to ensure it doesn't), you can always revert to a previous version without losing sleep. # Check if git is installed git --version

# If not, you need to initialize version control before proceeding git init git add . git commit -m "Pre-TypeScript commit" Having this safety net means you can experiment with confidence, knowing your back is covered. That's about it for our prerequisites! You've got the project, brushed up on some TypeScript, your environment is ready, and your safety net is in place. Now, we're all set to dive into the migration process. Let's get the ball rolling! Initiating the Migration: Setting Up TypeScript in Your Project Refactoring React Components Alright, onto the next phase! We've set the stage with TypeScript, but now we've got to get our hands dirty. It's time to refactor our React components. This step involves a bit more than just changing file extensions; we need to update our component code to utilize TypeScript's features for a more robust, error-free coding experience. Let's dive in! 1. Changing File Extensions First things first, let's rename our component files. This process involves changing the extension from to for files that contain JSX code. .js .tsx Here's how you can do this en masse in your project's source directory from the command line: # For Unix-like shells, navigate to your source folder and run: find . -name "*.js" -exec bash -c 'mv "$0" "${0%.js}.tsx"' {} \;

# If you're using PowerShell (Windows), navigate to your source folder and run: Get-ChildItem -Filter *.js -Recurse | Rename-Item -NewName { $_.Name -replace '\.js$','.tsx' } These commands search for all files in your project's source directory and rename them to . It's like telling your files, "Welcome to the TypeScript world!" .js .tsx 2. Typing Your Components With our files renamed, let's tackle the code. We'll start with a simple functional component in JavaScript: // Before: MyComponent.js import React from 'react';

function MyComponent({ greeting }) { return {greeting}, world! ; } Now, let’s refactor this to use TypeScript: // After: MyComponent.tsx import React, { FC } from 'react';

// Define a type for the component props interface MyComponentProps { greeting: string; }

// Use the 'FC' (Functional Component) generic from React, with our props type const MyComponent: FC = ({ greeting }) => { return {greeting}, world! ; } What did we do here? We defined an interface to describe our component’s props, ensuring type safety. By saying is a string, TypeScript will shout at us if we try to pass, say, a number instead. We also used the type (short for ) from React’s type definitions, making sure TypeScript knows it's a React component. MyComponentProps greeting FC Functional Component 3. Strongly Typing useState and useEffect Let's upgrade our components further by adding types to the states and effects, common features of functional components. Here’s a component with state and an effect: // Before: Counter.js import React, { useState, useEffect } from 'react';

function Counter() { const [count, setCount] = useState(0);

useEffect(() => { document.title = `You clicked ${count} times`; });

return ( You clicked {count} times

setCount(count + 1)}> Click me ); } Let's sprinkle some TypeScript magic on this: // After: Counter.tsx import React, { useState, useEffect, FC } from 'react';

const Counter: FC = () => { // Declare the 'count' state variable with TypeScript const [count, setCount] = useState (0);

useEffect(() => { document.title = `You clicked ${count} times`; });

return ( You clicked {count} times

setCount(prevCount => prevCount + 1)}> Click me ); } In our refactored component, we explicitly told TypeScript to expect a for our state. number count This detail prevents pesky bugs where we might accidentally end up with a string, object, or heaven forbid, instead of our expected number. null And there we go! We've successfully refactored our React components to use TypeScript. By explicitly typing our components, states, and props, we're creating a more predictable and easy-to-maintain codebase. We're not just coding; we're crafting a masterpiece with the precision it deserves. Next up, we'll dig deeper into more complex scenarios and how TypeScript comes to our rescue! State Management and Context API Now, let's get into the nitty-gritty of state management in React with TypeScript. If you've used the Context API in a JavaScript project, you know it's a powerful feature for passing data through the component tree without having to manually pass props down at every level. In TypeScript, we get the added benefit of strict typing, which makes our context data even more robust and predictable. Ready to jump in? Let's go! 1. Creating a Typed Context First, we're going to create a new context with TypeScript. This context will ensure that any default value, provider value, or consumer component matches our expected type. Here's how you'd define a basic context in JavaScript: // Before: DataContext.js import React, { createContext, useState } from 'react';

export const DataContext = createContext();

export const DataProvider = ({ children }) => { const [data, setData] = useState(null);

return ( {children} ); }; Now, let's type this context using TypeScript: // After: DataContext.tsx import React, { createContext, useState, FC, ReactNode } from 'react';

// First, we define a type for our context's state interface DataContextState { data: any; // Tip: Replace 'any' with the expected type of 'data' setData: (data: any) => void; // And here too, replace 'any' with the actual expected type }

// We ensure our createContext() call is typed with the above interface export const DataContext = createContext (undefined);

// Now, let's create a provider component export const DataProvider: FC = ({ children }) => { const [data, setData] = useState (null); // Again, consider replacing 'any' with your actual data type

// The context provider now expects a value that matches 'DataContextState' return ( {children} ); }; What we've done here is create a TypeScript interface, , which strictly types our context data. We've also typed the function and the component, ensuring that everything from the state variables to the context values aligns with our defined types. DataContextState createContext DataProvider 2. Using the Typed Context Now that we have our typed , let's see how we can utilize it within a component. DataContext We'll need to use the hook, and here's how that's done: useContext // ComponentUsingContext.tsx import React, { useContext, FC } from 'react'; import { DataContext } from './DataContext';

const ComponentUsingContext: FC = () => { // Here we're telling TypeScript to expect 'DataContextState' from our context const { data, setData } = useContext(DataContext) ?? {};

// This function would update the context state, triggering re-renders in consuming components const handleUpdateData = () => { const newData = { message: "Hello, TypeScript!" }; // This should match the structure of your data type setData(newData); };

return ( {JSON.stringify(data, null, 2)} Update Data ); }; In , we're accessing the context and expecting TypeScript to validate that the value aligns with . Our function demonstrates how you might update shared state—any components consuming would re-render with the new data when is called. ComponentUsingContext DataContextState handleUpdateData DataContext setData By using TypeScript with the Context API, we gain confidence that our shared state management is consistent across the application. The compiler catches any discrepancies between what our context provides and what our components expect. This synergy makes our code more reliable and our development process smoother, allowing us to avoid entire categories of bugs that we might otherwise encounter. Keep up the good work, and remember, a little typing now saves a lot of debugging later! Routing and Async Operations Testing in TypeScript > Now that we've seen how TypeScript improves various aspects of our React application, it's time to talk about another critical area: testing. is fundamental in ensuring our app works as expected, and TypeScript can make our tests more reliable and efficient. Let's dig into how TypeScript plays a role in testing, particularly in a React project. Testing 1. Setting the Stage for Testing Before we get into the code, make sure you have the necessary libraries installed for testing in a React project. Here's a quick setup with Jest and React Testing Library, widely used together for testing React applications: npm install --save-dev jest @types/jest @testing-library/react @testing-library/jest-dom These libraries provide a robust environment for writing unit and integration tests. Now, let's consider a real-world scenario for clarity. 2. Real-World Testing Scenario: User Greeting Component Imagine we have a simple component in our app that greets users based on the time of day. It's a functional component that takes the user's name as a prop and the current time as a state. Here's what our component might look like: UserGreeting // UserGreeting.tsx import React, { FC, useState, useEffect } from 'react';

interface UserGreetingProps { name: string; }

const UserGreeting: FC = ({ name }) => { const [currentHour, setCurrentHour] = useState(new Date().getHours()); const [greeting, setGreeting] = useState('');

useEffect(() => { // Determine the time of day and set the appropriate greeting if (currentHour < 12) { setGreeting('Good morning'); } else if (currentHour < 18) { setGreeting('Good afternoon'); } else { setGreeting('Good evening'); } }, [currentHour]);

return ( {greeting}, {name}! ); }

export default UserGreeting; Now, we need to write tests to ensure our component behaves as expected under different conditions. Our test cases will confirm that the appropriate greeting is displayed based on the time of day. Here's how we can write these tests using Jest and React Testing Library: // UserGreeting.test.tsx import React from 'react'; import { render, screen } from '@testing-library/react'; import UserGreeting from './UserGreeting';

describe('UserGreeting Component', () => { // Mock date for consistent testing const originalDate = Date;

beforeAll(() => { const mockDate = new Date(2023, 10, 17, 14); // 2:00 PM global.Date = jest.fn(() => mockDate) as any; });

afterAll(() => { global.Date = originalDate; // Restore original Date object });

it('displays the correct greeting for the afternoon', () => { render( );

// Assert the greeting based on the mocked time of day expect(screen.getByText('Good afternoon, Jordan!')).toBeInTheDocument(); });

// Additional tests would repeat this process for other times of day, // ensuring our component behaves consistently. }); In this script, we're rendering our component with a set time (mocked to be 2:00 PM) and checking if it outputs "Good afternoon" as expected. We can write more tests for other times of day (morning, evening) to ensure our component is fully covered. Through TypeScript, we make sure that the props we pass to our components in our tests match the types expected. This way, we avoid running into issues with incorrect props that could lead to false negatives in our tests, ensuring that our tests are robust and reliable. Using TypeScript in testing helps catch issues early in the development process, making our apps more robust and maintainable. It's a win-win situation! Remember, consistent and comprehensive testing is a hallmark of high-quality software development. Keep it up! Handling Non-TypeScript Packages Alright, let's tackle an area that often trips up folks when shifting over to TypeScript in a React project: dealing with JavaScript libraries and packages that aren't written in TypeScript. It's a common scenario; you've got your TypeScript project up and running, and then you install a third-party package, only to find your TypeScript compiler complaining. Don't worry; there are solutions. 1. Encountering the Problem Here's a typical scenario: you're trying to use a package that doesn't have TypeScript support out of the box, and the TypeScript compiler starts throwing errors like "Could not find a declaration file for module 'module-name'." Sound familiar? This issue arises because TypeScript relies on type definitions to understand the structure of libraries and packages. If these type definitions are missing, TypeScript gets a bit lost. But fear not, we've got strategies to handle this. 2. Using DefinitelyTyped One of the first things you can do is check if the community has provided type definitions for the package via DefinitelyTyped. DefinitelyTyped is a massive repository of type definitions maintained by the community. Here's how you would check and use types from DefinitelyTyped: Search for type definitions for your package by trying to install them using npm. Type definitions on DefinitelyTyped are usually prefixed with . @types/ npm install @types/package-name For instance, if you were using the library, you would run: lodash npm install @types/lodash After installing, you don't need to import the types anywhere in your project explicitly. TypeScript will automatically detect and use them, allowing you to import and use libraries as usual, and get autocompletion and type-checking. But what if there's no type definition available on DefinitelyTyped? 3. Crafting Your Own Declaration File If DefinitelyTyped doesn't have the type definitions you need, it's time to create a custom declaration file. While this approach requires more effort, it ensures your TypeScript project works smoothly with the JavaScript library. Here's a simplified version of what you might do: Create a new file with a extension within your project's source (or ) directory. This could be something like . .d.ts types declarations.d.ts In this file, you'll want to declare the module and potentially outline the basic structure you expect from the library. For instance: // This is a simplistic type declaration file for a hypothetical package.

// We declare the module so TypeScript recognizes it. declare module 'name-of-untyped-package' {

// Below, we're declaring a very basic structure. It's saying // there's a function we're expecting to exist, which returns any. // Ideally, you'd want to flesh this out with more specific types // if you know them or as you learn more about the library. export function functionName(arg: any): any;

// You can continue to define the shapes of other functions or variables // you expect to exist within the package. The more detailed you are here, // the more helpful your type checking will be. } This homemade declaration file won't be as comprehensive as a full set of type definitions, but it tells TypeScript, "Trust me, I know this module exists, and it provides these functions/variables." From here, you can build out more detailed definitions as needed. Remember, dealing with non-TypeScript packages can be a bit of a hurdle, but these strategies ensure your TypeScript project remains robust and enjoys the type safety and predictability we're after. It's all about that confidence in your codebase! Best Practices and Common Pitfalls Switching to TypeScript in your React project isn't just about changing file extensions and adding type annotations. It's also about adapting your mindset and development practices to make the most of what TypeScript offers while avoiding common stumbling blocks. So, let's discuss some best practices and common pitfalls you might encounter during this journey. 1. Best Practices 1.1 Lean on Type Inference While it might be tempting to annotate everything, one of TypeScript's strengths is its type inference. It's often unnecessary to add explicit types to every piece of your code. // Instead of this: let x: number = 0;

// You can rely on type inference: let x = 0; // TypeScript knows this is a number Over-annotating can make your code verbose without adding value. Trust TypeScript to infer types where it can. 1.2 Embrace Utility Types Utility types provide flexible ways to handle types in various scenarios. They can save you a lot of effort and make your type handling more efficient. // Example of using Partial to make all properties in an object optional function updateProfile(data: Partial ) { // function implementation }

// Now you can pass only the parts of UserProfile you need to update updateProfile({ username: "newUserName" }); // This is valid , , , and other utility types can be incredibly handy. Partial Readonly Pick 1.3 Use Enums for Known Sets of Constants When you have a property that can only take specific values, using can make your intent clear while providing validation on those values. enum enum UserRole { Admin = 'ADMIN', User = 'USER', Guest = 'GUEST', }

// Now UserRole can only be one of the values defined in the enum function assignRole(role: UserRole) { // function implementation } 1.4 Prefer Interfaces for Object Structure Definition While and can often be used interchangeably, using for defining the structure of objects or classes makes your code more readable and provides better error messages. type interface interface interface UserProfile { username: string; email: string; // More properties... } 2. Common Pitfalls 2.1 Overusing any Using negates the benefits of TypeScript by bypassing type checking. While it might seem like a quick fix, it makes your code less safe and predictable. any // Try to avoid this: let userData: any = fetchData();

// Instead, define a type for the data you expect: let userData: UserProfile = fetchData(); 2.2 Ignoring Compiler Warnings TypeScript's compiler warnings are there to help you. Ignoring these can lead to the same kinds of bugs and issues you're trying to avoid by using TypeScript. 2.3 Getting Lost in Complex Types Sometimes, in an attempt to make types precise, developers create incredibly complex type definitions that are hard to understand and maintain. If your types are getting convoluted, it might be time to simplify or refactor your code. 2.4 Forgetting Third-Party Library Types If you're using third-party libraries, always check if there are existing TypeScript types on DefinitelyTyped. Not doing so can mean missing out on type safety features for these libraries. In conclusion, adopting TypeScript is more than just using a new syntax; it's about adopting new practices that help avoid errors, make code more readable, and improve maintenance. Avoid common traps, and remember, the goal is to write cleaner, more reliable, and more maintainable code! Conclusion Well, folks, we've reached the end of our TypeScript migration journey. It's been quite a ride, hasn't it? We started with the big question of "why" and delved into the nitty-gritty of actually shifting a React project from JavaScript to TypeScript. From setting up your TypeScript environment to refactoring components, managing states, handling routes, and even dealing with those pesky non-TypeScript packages, we've covered a lot of ground. Reflecting on this journey, it's clear that migrating to TypeScript isn't a mere 'search-and-replace' of files with . It's a strategic move that involves learning new conventions, understanding types deeply, and, most importantly, changing the way we think about our code's reliability and consistency. .js .tsx Here are a few takeaways as we wrap up: : TypeScript has introduced a safety layer to our project, catching errors before they wreak havoc at runtime. This safety net, once you get used to it, is a game-changer in terms of confidence in your code and overall development speed. Safety Net : With types, our code now communicates more explicitly. Whether it's you revisiting your code or a new team member trying to understand your component structures, TypeScript serves as an additional documentation layer. Clearer Communication : Scared of refactoring? Well, TypeScript has your back. With types ensuring contracts within your code, many potential errors are caught during refactoring phases, making the process less daunting. Refactoring Confidence : Embracing TypeScript opens doors to a thriving ecosystem. From typed libraries on DefinitelyTyped to endless support on community forums and more streamlined third-party package integration, you're in good company. Community and Ecosystem : Yes, TypeScript introduces a learning curve. There were probably moments of frustration, confusions around types and interfaces, or wrestling with the compiler. But, look back at your journey and you'll see how much more you understand your code and its behavior now. Learning Curve Remember, the transition to TypeScript is not a sprint; it's a marathon. There might be a few hurdles initially, but the long-term gains in code quality, predictability, and maintainability are well worth the effort. As you continue your development journey, keep exploring, learning, and sharing your experiences with TypeScript. Every challenge is an opportunity to learn. Your future self (and your team) will thank you for the robust, type-safe, and significantly more maintainable codebase you're cultivating today. Thank you for joining me in this exploration of TypeScript with React. Keep coding, keep improving, and, most importantly, enjoy the process! Stay Connected If you enjoyed this article and want to explore more about web development, feel free to connect with me on various platforms: dev.to hackernoon.com hashnode.com twitter.com Your feedback and questions are always welcome. Keep learning, coding, and creating amazing web applications. Happy coding! Additional Resources Even though our guide has come to an end, your adventure with TypeScript doesn't stop here. The world of TypeScript is vast, with a plethora of resources to explore, learn from, and contribute to. Below are some valuable resources that can help reinforce your understanding and keep you updated in the TypeScript community. : There's no better place to explore TypeScript than its . It's packed with detailed documentation, examples, and explanations on various features. TypeScript Official Documentation official website : When working with third-party libraries, is a lifesaver. It’s a massive repository of high-quality TypeScript type definitions. DefinitelyTyped DefinitelyTyped : This comprehensive caters specifically to React developers transitioning to TypeScript, covering common patterns and practices. React TypeScript Cheatsheet cheatsheet : An excellent online book that offers a detailed exploration of TypeScript. explains the nitty-gritty of TypeScript with a focus on practical scenarios. TypeScript Deep Dive Deep Dive : Engage with the community and stay up-to-date with the latest developments in TypeScript by visiting the . TypeScript GitHub Repository official TypeScript GitHub repository : The TypeScript tag on is a hub of common (and uncommon) queries and nuanced use-cases encountered by developers worldwide. It's a gold mine of practical insights. Stack Overflow Stack Overflow : A curated newsletter, delivers the latest articles, tips, and resources straight to your inbox. TypeScript Weekly TypeScript Weekly : Communities on platforms like and various Discord channels host vibrant discussions, news, and problem-solving threads related to TypeScript. Reddit and Discord Channels Reddit’s r/typescript : For announcements, deep dives, and tutorials from the TypeScript team, check out the . Official TypeScript Blog official blog : Interactive learning experiences through platforms like , , and provide hands-on TypeScript courses. Online Coding Platforms Codecademy freeCodeCamp Scrimba Remember, communities thrive on participation. Don't hesitate to ask questions, contribute answers, or share your solutions and experiences. The collective wisdom of community forums, official documentation, and continuous practice will guide you toward TypeScript mastery. Happy coding!