Exploring the TypeScript-first architecture of modern frameworks

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

TypeScript goes beyond annotating syntax. We’ll explore how modern frameworks leverage type-safety at the project-level to empower better architecture, greater stability, and higher velocities.

This talk has been presented at TypeScript Congress 2023, check out the latest edition of this JavaScript Conference.

FAQ

The speaker of the talk is Lydia Helle.

The main frameworks discussed in the talk are Expo with Expo Router and Next.js with the App Router.

Expo Router is a file-based router for native apps and web apps, allowing easy navigation between screens and routes while reusing components on Android, iOS, and web.

You can quick-start an Expo Router project using the command 'npx create-expo-app' and using the template tab for an easier setup.

The setup command for initializing a new Next.js project is 'npx create-next-app-latest'.

TypeScript enables type-safe routing in both Expo and Next.js, enhancing developer productivity and app stability by ensuring the correctness of route references.

Expo supports type-safe routing by using the bundler's file watcher to automatically create route declarations and dynamically generate TypeScript types for every detected route.

You should enable 'experimental.typedRoutes' in your Next.js config file to use type-safe routing.

Next.js will automatically throw an error if you import useState in a component that hasn't been marked with the 'useClient' directive.

TypeScript in Next.js helps with accessibility by requiring that the 'alt' attribute is set on image components, ensuring that your web application is more inclusive.

Lydia Hallie
Lydia Hallie
25 min
21 Sep, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hi, everyone. Today, I'll be showing you some of the features that modern frameworks implement or frameworks that leverage Typescript implement to improve the developer and user experience. I'll cover some of the features that Expo with Expo Router and Next.js with the AppRouter implements. Let's talk about setting up TypeScript in both Expo and Next.js. Both frameworks provide a TypeScript-first development experience. The most important feature is type safe routing, which enhances developer productivity and app stability. Frameworks provide a built-in link component for link generation. It reduces the risk of typos and throws type errors when linking to non-existent routes. In Expo, enable the .typed experiment and import the link component from the exporouter package. Expo supports static and dynamic routes, and throws errors for incorrect parameters. ExpoRouter provides hooks like UseSegments and UseRouter for more control. In Next.js, enable typedRoutes in the next config file. We can import the link component from the next link package and restart the dev server after updating the next config file. Next.js automatically generates route definitions and includes the type file in the TS config. Autocompletion is available for the href attribute, which can be a string or dynamic value. Next.js provides hooks like use router for static navigation and router.push to prevent redirection to broken routes. Catch all routes in type safe routing pose a challenge for enforcing type safety on the href attribute. TypeScript may not throw an error for routes that may be broken or lead to unwanted pages. Keep this in mind when working with catch all routes. Before a production build, route types should be in place to ensure accurate type definitions. Generating routes is an ongoing task that needs to happen at the right moment to avoid build-time errors. When implemented correctly, type-safe routes can elevate the developer experience by preventing broken links or dysfunctional routes. In Next.js, server components and client components have different limitations. Next.js provides automatic error checking for importing useState in server components and enforces the useClientDirective to prevent using client-related code in the wrong places. Next.js also ensures type safety by throwing errors for invalid segment config options and requiring the alt attribute for image components to improve accessibility. Config files in Expo and Next.js have different approaches to incorporating TypeScript, with Expo using the TS node require hook and Next.js supporting type checking through jsdoc in the config JS file. By enabling type-safe routing, we catch potential issues at compile time, ensuring robust routes and unbroken links. Many other frameworks and tools leverage TypeScript to empower developers and deliver error-free experiences to users.

1. Introduction to TypeScript in Next.js and Expo

Short description:

Hi, everyone. Today, I'll be showing you some of the features that modern frameworks implement or frameworks that leverage Typescript implement to improve the developer and user experience. I'll cover some of the features that Expo with Expo Router and Next.js with the AppRouter implements. Let's talk about setting up TypeScript in both Expo and Next.js. Both frameworks provide a TypeScript-first development experience. The most important feature is type safe routing, which enhances developer productivity and app stability.

Hi, everyone. I'm Lydia Helle and today I'll be showing you some of the features that modern frameworks implement or frameworks that leverage Typescript implement to not only improve the developer experience, but also the user experience. And I'm sure that you've heard of these features before, you may have used them. So this is kind of just to remind you that they exist to give them some appreciation. And maybe you haven't used them before, in which case I hope that this talk will be valuable.

So for this talk, I'll cover some of the features that Expo with Expo Router and Next.js with the AppRouter implements. Of course, there are other frameworks that implement Typescript as well and leverage similar features. I'll mention them in the end, but for now I'll just want to focus on Next.js and Expo. So before I dive into the TypeScript part of Next.js and Expo, I just wanted to quickly introduce Expo Router, if you haven't heard of it before, which is likely if you aren't really interested in native development. But Expo Router is a file-based router for native apps and for web apps. So we can use it to easily navigate between screens and routes and reuse components on Android, iOS and web. So it brings that file system routing that we may be used to on the web to all platforms. If you haven't used it before, I highly recommend just kind of reading through the documentation. You can quick-start an Expo Router project using the mpx create-expo-app command. I highly recommend using that template tab because then everything is already installed and it's just much easier to get started with it. I'll just assume that you've heard of Next.js already, which we can initialize using mpx create-next-app-latest. For this talk though, I'll focus on Next.js 13 and mainly the app router. Of course, if you're still using the pages router, which is completely fine. We also have a lot of TypeScript support there, but for now I'll just be focusing on the app router.

Let's talk about setting up TypeScript in both Expo and Next.js. Both Next.js and Expo provide a TypeScript-first development experience for building your React application. In Expo, starting Expo Router through that setup command I just mentioned, which again, I highly recommend, it automatically ships with TypeScript already installed and configured so we can just utilize all the features right away. In Next.js, when initializing a new project through the setup commands, it'll ask you whether you like to use TypeScript as the first question, and it's yes by default, so just click yes. So both frameworks have a very TypeScript-first approach. Of course also, both Next.js and Expo allow you to quickly implement TypeScript or add support for TypeScript by simply converting a file from JS to TypeScript or to TS, and this will automatically install all the necessary dependencies and configure your project so that you can use TypeScript right away in an already existing project.

Now the most important part, let's talk about the features that we get from having TypeScript enabled and set up. The most important one is type safe routing. So type safe routing enhances the developer productivity and generally your apps stability by ensuring the correctness of the route references throughout your entire application because traditionally developers had to explicitly define route paths and associate them with specific views or components, and this system of course works, this is how we've always done it, but is very susceptible to human error because the developer can easily mistype a path leading to broken links or if you're migrating routes or renaming them, it's pretty easy to accidentally miss some of the anchor tags that are still linking to that old route and that would have created a bunch of broken links. And this is where TypeScript and the concept of type safe routing comes into play because TypeScript that supports this will scan your project's file system and dynamically generates TypeScript types for every detected route. And this creates a type-safe environment based on the current state of your application every time you update it.

2. Link Component and Routing in Expo and Next.js

Short description:

Frameworks provide a built-in link component for link generation. It reduces the risk of typos and throws type errors when linking to non-existent routes. In Expo, enable the .typed experiment and import the link component from the exporouter package. Expo supports static and dynamic routes, and throws errors for incorrect parameters. ExpoRouter provides hooks like UseSegments and UseRouter for more control. In Next.js, enable typedRoutes in the next config file.

And to make the system even more developer-friendly, frameworks usually provide a built-in link component that is designed for link generation. And this component has an href attribute that uses these types that we generated in the previous step based on the file system. And your IDE can use this for autosuggestion, autofill, which reduces the risk of typos even more. And most importantly, if a developer attempts to link to a route that doesn't exist, it'll throw that type error during the build process.

So let's see how we can use this in Expo first. So in Expo we can utilize this by first ensuring that the experiment's .typed is enabled. And after we've done that, we can import the link component from the exporouter package. For the sake of this demo, I'll just create a few more routes, which we can do by creating a new file with the name of the route. So for example, contact and route.

So now when we use the link component with the href attribute, you initially won't see the types because we had to start the dev server. Because Expo uses the bundler's file watcher to automatically create route declarations, which we can see in this auto-generated expo types file. So you can see like static routes, dynamic routes, all that. And you can also see that Expo automatically included this file in the ts-config. So TypeScript knows to watch this file when we're using that link component. So now back to the link component, you'll see that we get the autocompleted routes. Change a route name, for example, about to team, you will instantly see that type error. So this is super useful. And we can either just see it in our IDE. Or, of course, when you're running that dev server, if you have many files, and you won't easily catch it in your editor. Expo also supports dynamic routes. So let's just quickly create one using brackets. So now when we're using the link component to link to a dynamic route, Expo would also throw an error if you're accidentally linking to a dynamic route with an incorrect parameter. For example, ID here should have been or lowercase ID here should have been ID. So that's also very useful. And additionally, ExpoRouter also comes with some hooks like UseSegments and UseRouter that allow you to get even more control over that routing behavior. So if we use the router from UseRouter, it could, for example, say like router.push, they also utilize the types that were just generated. So you can always be assured that your routes are correct even when redirecting or pushing all that kind of stuff.

Now it's in Next.js. Next.js provides a similar approach. So to enable types of routing, make sure that the experimental.typedRoutes is set to true in your next config file.

3. Importing Link Component and Next.js Routing

Short description:

We can import the link component from the next link package and restart the dev server after updating the next config file. Next.js automatically generates route definitions and includes the type file in the TS config. Autocompletion is available for the href attribute, which can be a string or dynamic value. Next.js provides hooks like use router for static navigation and router.push to prevent redirection to broken routes.

And then we can again import the link component this time from the next link package. And since we updated the next config file, we'll just have to restart the dev server, which will now again, scan our file system to automatically generate these route definitions in the next type file.

You can see here, it looks pretty similar to what we just saw. We have the static routes, dynamic routes, all that. And Next.js automatically includes this type file in the include field in your TS config. So again, Tadascript knows where to look. So we again get the autocompletion in the href attribute and the href can again be a string or this dynamic value.

For Next.js, we just have to import the route type from Next if we are using a dynamic value like this. And Next.js also comes with some hooks for static navigation. Also like use router. So we can use router.push and it'll show all the routes again. Yeah. To make sure that we don't redirect to a broken route.

4. Challenges with Catch All Routes

Short description:

Catch all routes in type safe routing pose a challenge for enforcing type safety on the href attribute. TypeScript may not throw an error for routes that may be broken or lead to unwanted pages. Keep this in mind when working with catch all routes.

One of the kind of downsides or more of like an edge case, I guess, or stuff to keep in mind is catch all routes. Because in essence, a catch all route is a kind of a wildcard mechanism. You know, it validates and matches any given routes. And this is a challenge for type safe routing, because if any route is deemed valid, how do you enforce type safety on the href attribute? So, you know, TypeScript gets a bit blindsided in those situations. Because it doesn't know whether a particular route corresponds to a dynamic page or not. So, now, we can essentially type any route. And it may be broken or it may lead to a page where we don't want people to go. TypeScript won't throw that error. So, it makes sense. And it is expected behavior. But just make sure. Like, keep that in mind that this might happen.

5. Importance of Route Types and Next.js Features

Short description:

Before a production build, route types should be in place to ensure accurate type definitions. Generating routes is an ongoing task that needs to happen at the right moment to avoid build-time errors. When implemented correctly, type-safe routes can elevate the developer experience by preventing broken links or dysfunctional routes. The next section will cover additional TypeScript features in Next.js that relate to rendering and data-fetching paradigms.

Another important thing to remember, and this is more for authors, but it's when types get generated. Because before a production build is triggered, which in most development environments happens in CI, the route types should already be in place. Because that helps ensure that the production build has access to the latest routes and most accurate type definitions.

So, generating routes isn't just like a one-off task. It kind of happens continuously. And it needs to happen at the right moment. Otherwise, you keep running into these type errors at build time.

So, to kind of sum up the type save route part, when implemented and managed correctly, it can really elevate the developer experience. Because despite developer's best efforts, sometimes we just need that safeguard mechanism to ensure that we don't inadvertently introduce broken links or dysfunctional routes.

So, the next section will be on just Next.js. Because Next.js also comes with additional TypeScript features that relate to the new rendering paradigms, data-fetching paradigms. And I'll be covering the ones that are currently supported. But just so you know, more features will be added in the future to enhance the developer experience even further.

6. TypeScript Support and Config Files in Next.js

Short description:

In Next.js, server components and client components have different limitations. Next.js provides automatic error checking for importing useState in server components and enforces the useClientDirective to prevent using client-related code in the wrong places. Next.js also ensures type safety by throwing errors for invalid segment config options and requiring the alt attribute for image components to improve accessibility. Config files in Expo and Next.js have different approaches to incorporating TypeScript, with Expo using the TS node require hook and Next.js supporting type checking through jsdoc in the config JS file.

The first one is related to the server components and client components. I won't explain what server components and client components are. If you aren't sure, I highly recommend you read the docs to kind of understand what they are. But long story short, we can't always use like we can't use lifecycle hooks or any client related code in server components.

So, first Next.js will automatically throw an error if you're importing useState in a component that hasn't been marked with the useClientDirective. And this is incredibly useful because we can't use hooks like useState or useEffect or anything that should be on the client and server components. So in most cases, you probably just forgot to make that component and client components. So this helps to ensure that we aren't forgetting that, which is pretty easy to do. And additionally, Next.js will also throw a type error if you've used the useClientDirective anywhere but on the top of your file. Like it'll tell you move it to the top of the file. And this is an easy one to forget or overlook. So having that additional type safety helps to avoid these confusing bugs that may have let us so many hours trying to debug such an easy thing.

Next.js also throws an error if the or if you have invalid values for the segment config options. So route segment options allow you to configure the behavior of a page, a layout, or a route handler by exporting variables. And those variables can only have specific values, as you can see here. So Next.js helps ensure that you're setting these exported variables to values that are actually valid, which is also very useful. Next.js TypeScript support also helps with accessibility, for example by requiring that the alt attribute is set on image components. And this means that whenever we use that image components, TypeScript will remind you to set the alt which is, you know, essential for screen readers and just overall web accessibility. It's often something that's overlooked by developers. So having this little nudge just helps to ensure that, you know, your web application is more inclusive by default.

And lastly, a small but important one is config files. So config files must be a JavaScript file as it doesn't get parsed by Babel or TypeScript. And the way that both Expo and Next.js handle this is a bit different. So in Expo to use TypeScript in their config files like webpack metro or app, you can use the TS node require hook, and you first have to install that. And this allows you to import a TypeScript file in the JS config file. So, for example, we can create one TypeScript at config.ts. We can import the Expo config type and then we can just write our config like we want to and it'll like auto deplete everything and then we can import this file in the app config JS using TS node. So now we still have a valid config file, but we also have that additional type safety at the cost of having an additional file, but that may be worth it. Now in Next.js, so Next.js' config JS allows you to add some type checking in your IDE using jsdoc. It's this like import line that you see here.

7. TypeScript Benefits and Conclusion

Short description:

By enabling type-safe routing, we catch potential issues at compile time, ensuring robust routes and unbroken links. Many other frameworks and tools leverage TypeScript to empower developers and deliver error-free experiences to users.

You may have seen before also in other frameworks or other tools. So now when we import it at the top of our file, we also have type safety. So this doesn't require an additional file, but it uses jsdoc.

So to wrap up this brief overview, we've just seen how Xfo and Next.js use TypeScript to improve the developer experience, which in turn also improves the user experience. And by enabling, you know, type safe routing, we can catch potential issues at compile time, ensuring our routes are robust, our links aren't broken, our applications are more resilient to human error.

Of course, there are many other frameworks and tools that leverage TypeScript offer similar features. To me, it just shows how the developer ecosystem is evolving towards a future where, you know, developers are empowered by their tools and we can deliver type error-free experiences to our users. So thank you for joining me today. I hope it was helpful. And have fun coding.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
React's Most Useful Types
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
Top Content
Watch video: React's Most Useful Types
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Mastering advanced concepts in TypeScript
React Summit US 2023React Summit US 2023
132 min
Mastering advanced concepts in TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.
Deep TypeScript Tips & Tricks
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Top Content
Featured Workshop
Josh Goldberg
Josh Goldberg
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced 2022React Advanced 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.