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.
Comments