#typescript

Subscribe
Did you know that TypeScript lets you write JavaScript the way you really want to? Explore the variety of Typescript courses we compiled from our speakers and collaborators and find out what you can do with this language and how it improves the development experience.
Frictionless Development With Unified Type System
JSNation 2024JSNation 2024
113 min
Frictionless Development With Unified Type System
Featured Workshop
Ejiro Asiuwhu
Ejiro Asiuwhu
Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana!
Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into:
- Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.
Building Your Own Custom Type System
React Summit 2024React Summit 2024
38 min
Building Your Own Custom Type System
Featured Workshop
Kunal Dubey
Kunal Dubey
I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side. 
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.
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.
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.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Stop Writing Your Routes
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced Conference 2022React Advanced Conference 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.
TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
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.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024React Summit 2024
22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.
Types Beyond TypeScript
React Summit 2024React Summit 2024
31 min
Types Beyond TypeScript
This Talk explores the concept of types and their significance in software development, particularly in relation to TypeScript. It discusses the limitations and advantages of TypeScript compared to other tools like Flow and Ezno. The Talk emphasizes the role of types in bridging system boundaries and improving code quality. It also highlights the importance of type-checked linting and the future of ESLint. Additionally, the Talk mentions the benefits of faster and easier linting with projects like Biome and OXC, and recommends books for further learning.
JSR – Next Generation JavaScript Registry
JSNation 2024JSNation 2024
6 min
JSR – Next Generation JavaScript Registry
JSR is a new JavaScript registry that supports TypeScript and offers additional features like GitHub Action integration, provenance attestations, and documentation generation. It provides a simple website with package search, documentation, and a gamified score. The process of publishing a new package in JSR involves creating a JSR.json file with package details and exports, using MPX JSR publish to publish the package, and approving authorization in the browser. However, documentation for the package is not automatically generated and needs to be manually added.
Dive Into Advanced TypeScript
JSNation 2024JSNation 2024
30 min
Dive Into Advanced TypeScript
Today's Talk discusses TypeScript and its relationship with JavaScript, emphasizing the importance of studying JavaScript first. The Talk explores type guards, runtime type checking, and the use of the 'never' type to handle errors and ensure type safety. It also delves into alternative solutions for type handling, branded types, and schema-based validation using Zod. The Talk concludes with advice on migrating to TypeScript and the need for beginner-friendly documentation and strictness in code.
Mastering Node.js Test Runner
Node Congress 2024Node Congress 2024
117 min
Mastering Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky.You will learn how to use Node.js test runner to its full potential.We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.
Declarative Infrastructure: Rethinking Cloud Native for JS
DevOps.js Conf 2024DevOps.js Conf 2024
29 min
Declarative Infrastructure: Rethinking Cloud Native for JS
Workshop
André Eriksson
André Eriksson
In this talk we uncover what Declarative Infrastructure means, and how it can work in TypeScript to naturally express higher-level distributed systems concepts (such as backend services, API calls, database queries, Pub/Sub messaging, caching and more), through the power of static analysis and code generation.The outcome is a fully reimagined DevOps process, with automatic infrastructure provisioning and built-in observability, that deploys straight to your own cloud.
Table of contents:- Introduction- Evolution of backend development, from servers to today's cloud-native world powered by DevOps and GitOps- What is Cloud Native, and how do we build modern backend applications? (Showing a microservices architecture powered by Express.js and Terraform)- What is Declarative Infrastructure? What does the space look like?- What problems does it solve compared to traditional DevOps practices?- How does it relate to Terraform/AWS CDK for infrastructure provisioning?- What are the downsides?- Building a Cloud Native backend with Declarative Infrastructure
Generating TypeScript with TypeScript
DevOps.js Conf 2024DevOps.js Conf 2024
8 min
Generating TypeScript with TypeScript
This talk discusses how TypeScript definitions are automatically generated for CloudFlare workers using runtime type information. The encoding and transformation of type information is explained, with runtime API types being encoded in C++ and further processed in TypeScript. The process of improving type definitions and achieving compatibility is also covered, including fixing problems with iterators and using human input to improve developer ergonomics. The talk concludes with a plan to build Types as a Service, a Cloudflare worker that dynamically generates NPM packages containing TypeScript definition files.
Type System React
React Day Berlin 2023React Day Berlin 2023
21 min
Type System React
Watch video: Type System React
This Talk is about implementing a limited subset of the type equivalent of React, specifically its JSX engine, in the TypeScript type system with no runtime code. The speaker demonstrates how to use TypeScript features like constrained types and template literal strings to infer and render JSX elements in the type system. They also show how to render headings and children using a utility called 'render component'. The Talk concludes with additional resources for learning TypeScript and related topics.
Trees aren't just Foliage: ASTs and Practical Usage
React Summit US 2023React Summit US 2023
9 min
Trees aren't just Foliage: ASTs and Practical Usage
Watch video: Trees aren't just Foliage: ASTs and Practical Usage
ASTs, or abstract syntax trees, are used by popular tools like Babel, TypeScript, ESlint, and Prettier to improve the developer experience. They have various use cases including compiling and code analysis. Editor tooling and writing tools can be enhanced using ASTs, with examples including formatting with Prettier, type annotations in JetBrains editors, and code mods for framework upgrades. Ts-morph is a useful tool for code transformations, while Tree Sitter is a portable tool that supports many languages and can be used to build IDEs or text editors in the browser.
Type-Safe Style Systems: The Future of CSS
React Summit US 2023React Summit US 2023
22 min
Type-Safe Style Systems: The Future of CSS
Watch video: Type-Safe Style Systems: The Future of CSS
This Talk explores the evolution of CSS and the development of style systems in software engineering. It discusses the limitations of CSS and the need for frameworks, pre-processors, and JavaScript to enhance styling capabilities. The Talk highlights different approaches to CSS styling, including libraries like Tailwind and Chakra UI. It also introduces innovative style systems like Vanilla Extract and Rainbow Sprinkles, which offer optimized CSS classes and type safety. The speaker emphasizes the importance of design systems and encourages developers to explore and consider the strengths and weaknesses of different style systems.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Watch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Zod === TypeScript, but at Runtime in Your React Applications
React Advanced Conference 2023React Advanced Conference 2023
20 min
Zod === TypeScript, but at Runtime in Your React Applications
Watch video: Zod === TypeScript, but at Runtime in Your React Applications
Zotter is a powerful tool for working with TypeScript in React applications, providing a simple schema concept for validation. It allows you to convert Zod schemas into TypeScript types and check if objects match the schema. Zod can be used for validation and contract enforcement, ensuring data consistency and preventing issues. It can also be used in React applications to create a validation layer and prevent code from running with incorrect data. The speaker encourages questions and provides contact information for further discussion.
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
TypeScript Survival Guide: Life-Saving Tips and Techniques
TypeScript Congress 2023TypeScript Congress 2023
7 min
TypeScript Survival Guide: Life-Saving Tips and Techniques
Hello, I'm Lucas, a software engineer at Klarna in Sweden. I will be sharing my best tips and tricks with TypeScript. One useful tool is tsconfig-basis, which eliminates the need for copying and pasting the same tsconfig file. Rendered types in TypeScript are powerful for handling different types of strings, and type guards and assertion functions make them even more useful. Enums in TypeScript can be number, string, or const, each with its own advantages and limitations. Lastly, there are new features in PS 5.2 like 'using' for resource disposal and 'unknown' for data protection, as well as a case conversion utility type for interfaces.
Are the (module) types wrong?
TypeScript Congress 2023TypeScript Congress 2023
30 min
Are the (module) types wrong?
This Talk discusses module system complexities and terminology, TypeScript and Node disagreements, and fixing TypeScript errors with the Helmet package. It also explores module resolution and type disagreements, challenges with TypeScript and Node support, and the need for improvements in popular packages.
The Potential of Higher-Kinded Types for Library Semantics
TypeScript Congress 2023TypeScript Congress 2023
8 min
The Potential of Higher-Kinded Types for Library Semantics
The Talk discusses the potential of higher kind of types (HKTs) for library semantics, enabling better inference and type-level operations. It explains how HKTs can be created in TypeScript by exploiting function types as a function of object attributes. This allows for the creation of composable functional utilities with intelligent type inference and a chaining interface that computes type-level results. Overall, the Talk highlights the benefits and possibilities of using HKTs in software development.
Replacing Shell Scripts with Cross-Platform TypeScript
TypeScript Congress 2023TypeScript Congress 2023
8 min
Replacing Shell Scripts with Cross-Platform TypeScript
The speaker discusses the benefits of replacing shell scripts with TypeScript, highlighting the limitations of shell scripts and the advantages of TypeScript such as cross-platform compatibility and better tooling. Deno is presented as the ideal platform for single file scripting, with its built-in support for TypeScript, automatic dependency installation, and sandboxing. The dax library is mentioned as a useful tool for scripting, providing a cross-platform shell and other APIs. Overall, the Talk emphasizes the power and flexibility of using TypeScript and Deno for scripting purposes.
Unlocking TypeScript's Potential: Exploring the Power of Ecosystem Tooling
TypeScript Congress 2023TypeScript Congress 2023
12 min
Unlocking TypeScript's Potential: Exploring the Power of Ecosystem Tooling
Today's Talk explores the world of TypeScript ecosystem tooling, discussing essential tools for project setup, including package managers and project scaffolding. It also covers code analysis, testing, and deployment in TypeScript, as well as best practices for maintaining high-quality code. The Talk emphasizes the importance of intelligent code editors, code formatters, and linters in ensuring code quality. It also highlights the significance of codebase maintainability and following TypeScript best practices for efficient and scalable code.
Migrating TypeScript to Modules: The Fine Details
TypeScript Congress 2023TypeScript Congress 2023
26 min
Migrating TypeScript to Modules: The Fine Details
This Talk discusses TypeScript's migration to modules, the challenges faced, and the automation used for the migration. The TS Morph library and git are used for code transformation and managing changes. The final step involves converting TS dotted names to named imports. The migration to ESBuild brings benefits like faster development loop and improved import organization in TypeScript.
Enhanced AST Static Analysis with Typescript Language Server
TypeScript Congress 2023TypeScript Congress 2023
12 min
Enhanced AST Static Analysis with Typescript Language Server
Today's Talk discusses enhancing static code analysis using TypeScript language server and abstract syntax tree (AST). TypeScript can help with static analysis by providing types based on function signatures. By integrating TSMorph into a Babel plugin, we can check types for specific nodes in the abstract syntax tree. Enhancements to static analysis include checking console.log arguments and removing unnecessary expressions. TypeScript's type information can be used to compile CSS and extract it into a separate stylesheet, enabling better compilation and build time performance.
Running TypeScript in WebAssembly on the Cloud
TypeScript Congress 2023TypeScript Congress 2023
10 min
Running TypeScript in WebAssembly on the Cloud
Today's Talk discusses running TypeScript in WebAssembly on the cloud using Fermion's WebAssembly runtime. Fermion provides a serverless environment called Spin that allows for easy serverless application development in multiple languages. The process of creating a TypeScript serverless app with Spin involves installing Spin, creating a new app using the HTTP TS template, and testing it on localhost. To deploy the app, the 'spin deploy' command is used, and Fermi on cloud handles routing and makes the app accessible through a public URL.
Generating types without climbing a tree
TypeScript Congress 2023TypeScript Congress 2023
30 min
Generating types without climbing a tree
This talk explores the challenges and benefits of generating types for APIs. The speaker discusses the need for a better client experience and the popularity of generating clients. They also explain the use of OpenAPI for generating REST API clients and the use of Cold Block Writer for code generation. The talk covers the process of defining types for parameters and responses, generating the client and request, and using the generated client. The speaker also touches on validation in production and the initial challenges with TypeScript.
Generating Typed Code
TypeScript Congress 2023TypeScript Congress 2023
22 min
Generating Typed Code
Today, I'm going to be talking about how type generation helped reduce bugs and improve our developer experience at Rollbar. The Monolith tech stack is built primarily on Python Pyramid, a web framework that's similar to Django, Ruby on Rails, or Express. To address debugging, performance, and code navigation challenges, we migrated to a tech stack that includes TypeScript, Next.js, GraphQL, and React Query. Codegen is used to generate TypeScript code on both the server and client side, enhancing debugging, performance, and code navigation.
Let's Make a Generic Inference Algorithm
TypeScript Congress 2023TypeScript Congress 2023
25 min
Let's Make a Generic Inference Algorithm
Top Content
Hello, welcome to Let's Make an Inference Algorithm. Today, I'll give you a high-level overview of how TypeScript's generic inference process works. We'll explore different possibilities like 'any,' 'unknown,' or 'number.' The algorithm for inferring type arguments collects candidates and picks the first one, ensuring the best correct answer. The concept of the best common supertype is used to determine the best candidate. Context sensitivity is addressed in the algorithm, allowing for optimal behavior.
The Lies We Tell Ourselves Using TypeScript
TypeScript Congress 2023TypeScript Congress 2023
28 min
The Lies We Tell Ourselves Using TypeScript
The Talk discusses the limitations of TypeScript and the lies we tell ourselves about its type safety. It explores examples of unsafe operations and bending the type system using keywords like type assertion and function is dice. The Talk also covers catching syntax errors, type mismatches, and the complexity of conditional types and generics. It emphasizes the importance of understanding TypeScript's limitations and making well-informed decisions as software engineers.
From Theory to Practice: harnessing Typescript for successful Atomic Design implementation
TypeScript Congress 2023TypeScript Congress 2023
27 min
From Theory to Practice: harnessing Typescript for successful Atomic Design implementation
Leveraging TypeScript and Atomic Design can solve code structure conundrums and achieve readability, efficiency, and flexibility. TypeScript offers benefits like intelligent refactoring, improved on-boarding, and fewer bugs. Typescript makes you think differently and opens doors for what you can do. Real-world challenges and considerations can be exacerbated when using TypeScript with atomic design. Avoid over-engineering and code depth, and stay close to the product to maintain codebase alignment.
How TypeScript is integrated in your editor
TypeScript Congress 2023TypeScript Congress 2023
18 min
How TypeScript is integrated in your editor
Today's Talk explores TypeScript integration and refactoring, code action handling, the TypeScript server and refactoring process, bug reporting, and the TypeScript protocol and LSP. The Talk discusses how TypeScript is integrated into editors, the role of code action providers, and the communication between the client and server. It also highlights the two-stage process of code actions and the importance of bug reporting. Additionally, it mentions the TypeScript protocol and how it allows for language-specific extensions. LSP is mentioned as a powerful extensibility solution used by various languages.
How to make our CLIs safer with types?
TypeScript Congress 2023TypeScript Congress 2023
29 min
How to make our CLIs safer with types?
This talk explores the challenges of building CLIs and introduces a fully typed CLI framework built with TypeScript. It discusses the complexities and pitfalls of CLI implementation and the benefits of using decorators for metadata and logic. The talk also covers type inference challenges and presents a third way of assigning annotations as decorators. It highlights the integration of Tpanion, Zod, and ClipAnion for type checking and format validation. Finally, it mentions other CLI frameworks like ClipAllian, Common.js, and Oclif that offer similar functionality.
Faster TypeScript builds with --isolatedDeclarations
TypeScript Congress 2023TypeScript Congress 2023
24 min
Faster TypeScript builds with --isolatedDeclarations
Top Content
This talk discusses the performance issues in TypeScript builds and introduces a new feature called isolated declarations. By running the compiler in parallel and using isolated modules, significant performance gains can be achieved. Isolated declarations improve build speed, compatibility with other tools, and require developers to write types in code. This feature has the potential to further increase performance and may be available in TypeScript soon.
Using TypeScript with Key/Value Databases
TypeScript Congress 2023TypeScript Congress 2023
31 min
Using TypeScript with Key/Value Databases
Key-value databases are optimized for high availability and partition tolerance, making them ideal for storing non-relational data structures. They prioritize speed and high availability over consistency, making them suitable for simple data models or one-to-one mappings. However, they have limited query capabilities compared to relational databases. Some available options for key-value databases include DynamoDB, CloudFlare Worker KV, Redis, and FoundationDB. Using key-value databases in TypeScript requires addressing challenges such as serialization, deserialization, secondary indexes, relationships, and validation. The Talk includes a demonstration of an application that showcases the use of secondary indexes and the implementation of a key-value database in Deno or Redis.
ArkType: Bringing TypeScript to Runtime
TypeScript Congress 2023TypeScript Congress 2023
21 min
ArkType: Bringing TypeScript to Runtime
This Talk discusses the concept of runtime validation in TypeScript and how it bridges the gap between TypeScript's expressiveness and runtime capabilities. The speaker explains the evolution of top-down parsing and the shift-reduced parser that made runtime validation possible. The benefits of runtime validation in terms of flexibility, scalability, and efficiency are highlighted. The integration of validation and the type system is emphasized, along with the enhanced validation capabilities and new features offered by the Archetype framework.
Infer multiple things at once with reverse mapped types
TypeScript Congress 2023TypeScript Congress 2023
26 min
Infer multiple things at once with reverse mapped types
Top Content
Mateusz Kruzynski introduces reverse map types and demonstrates their use in transforming object types. He discusses how reverse map types can be used for inference and to provide contextual types for parameter types. He also shows how reverse map types can be used to extend an entity and bind event listeners. In the context of state machines, he explains how reverse map types can be utilized to strongly type the initial property and create hierarchical state machines. However, there are limitations to be aware of, such as inferring a single thing per object property or tuple element.
Exploring the TypeScript-first architecture of modern frameworks
TypeScript Congress 2023TypeScript Congress 2023
25 min
Exploring the TypeScript-first architecture of modern frameworks
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.
Taming Language Models through TypeScript
TypeScript Congress 2023TypeScript Congress 2023
26 min
Taming Language Models through TypeScript
TypeChat is an open-source library that uses TypeScript types to guide and validate responses from language models. It allows for the creation of complex responses and provides a way to repair errors in the model. TypeChat programs enable better flow of data and the ability to refer to individual steps. The math example demonstrates the use of a program translator and metaprogramming techniques for type safety. Language models trained on both code and prose perform well in this context.
What is "TC39: Type Annotations" aka the Types as Comments proposal
TypeScript Congress 2023TypeScript Congress 2023
27 min
What is "TC39: Type Annotations" aka the Types as Comments proposal
The TC59 Type Annotations proposal, also known as Types with Comments, introduces the ability to run typed code in JavaScript. It aims to bring TypeScript back into JavaScript and create a separation between type system and runtime. TypeScript's popularity is on par with JavaScript, raising concerns about the influence of Microsoft. The proposal progresses by addressing runtime interaction and token soup in type specifications. Research, community involvement, and quantifying the effects of supporting this comment style are important goals.
7 TypeScript Patterns You Should Be Using
React Summit 2023React Summit 2023
19 min
7 TypeScript Patterns You Should Be Using
Top Content
Watch video: 7 TypeScript Patterns You Should Be Using
This Talk introduces 7 essential TypeScript patterns for React development, including children, spreading props, either-or, generic components, and context. The speaker demonstrates various implementations and provides examples using a fictional dog grooming salon application. Other interesting ideas include using omit and make required types, creating components with either-or interfaces, and using generics, memorization, and context in React. The speaker also introduces the Recontextual library for context management.
Zod === Typescript, but at Runtime in Your React Applications
React Summit 2023React Summit 2023
8 min
Zod === Typescript, but at Runtime in Your React Applications
Watch video: Zod === Typescript, but at Runtime in Your React Applications
Today's Talk discusses how Zod, an NPM library, can guarantee the TypeSystem at runtime, providing all the benefits of TypeScript. Zod's parse method allows for checking if objects match the schema, creating a validation layer between applications and APIs. By combining TypeScript with Zod, developers can ensure type safety at both runtime and build time, preventing code execution with incorrect data and improving the user experience.
Woah! Can TypeScript Do That?
JSNation 2023JSNation 2023
41 min
Woah! Can TypeScript Do That?
Today's talk covers advanced concepts of TypeScript including type guards, generics, utility types, and conditional types. These concepts enhance the developer experience and improve code quality by ensuring type safety and reducing errors. The talk also explores the use of generics to make components more generic and reusable. Additionally, it discusses the power of custom utility types and the infer keyword in creating flexible and precise type definitions. TypeScript's string templates are highlighted as a tool for enforcing restrictions on values like margins in CSS. Overall, the talk provides valuable insights into leveraging TypeScript's advanced features for more robust and maintainable software development.
Apache Kafka Simply Explained With TypeScript Examples
JSNation 2023JSNation 2023
27 min
Apache Kafka Simply Explained With TypeScript Examples
Top Content
Apache Kafka is a distributed, scalable, and high-throughput event streaming platform that plays a key role in event-driven architecture. It allows for the division of monolithic applications into independent microservices for scalability and maintainability. Producers and consumers are the key components in Kafka, allowing for a decoupled system. Kafka's replication and persistent storage capabilities set it apart from alternatives like Redis and RabbitMQ. Kafka provides easy access to real-time data and simplifies real-time data handling.
Type-safe bindings for Node.js with Rust and WebAssembly
Node Congress 2023Node Congress 2023
22 min
Type-safe bindings for Node.js with Rust and WebAssembly
This Talk explores TypeScript bindings for NodeJS with Rust and WebAssembly, providing an alternative approach for creating native NodeJS modules and automatically generating types. It delves into the use of WebAssembly and Rust for TypeScript modules, showcasing how Rust functions can be defined and imported using the wasm.bindgen library. The Talk also highlights the challenges of string conversion between Rust and JavaScript, the limitations of supporting Rust data types in JavaScript, and the seamless integration of Rust functions into TypeScript apps using tspy. It concludes with the recommendation of TSFI for type-safe bindings and showcases its usage in a TypeScript-based full-text search engine with WebAssembly support.
Parse, Don’t Validate
Node Congress 2023Node Congress 2023
26 min
Parse, Don’t Validate
Evgeny Poberezkin
Jason Green
2 authors
Hello. We're going to talk today about JavaScript and how to ensure data correctness. JSON can be wasteful and has security issues, but Fastify tackles these challenges. JTD is better than JSON Schema for most API use cases, as it has a more strict structure and avoids debugging issues. Jason demonstrates how to validate data with JTD and TypeScript, ensuring data validity and improving performance. The approach of parsing JSON directly to the application type and serializing a specific type improves security and reliability.
Roll you own JavaScript runtime
Node Congress 2023Node Congress 2023
21 min
Roll you own JavaScript runtime
This Talk introduces Deno, a custom JavaScript runtime similar to Node.js, and discusses the benefits of using a custom runtime. It explores the process of building a custom runtime with Deno in Rust, including the integration with Cargo and the ability to mix and match crates and APIs. The Talk also covers the implementation of the setTimeout function in both Run.js and Runtime.js, and provides examples of how to fix errors and implement additional functions. Overall, the Talk highlights the flexibility and possibilities of creating custom runtimes with Deno.
Statically Detecting React App Bugs with TypeScript and ESLint
React Day Berlin 2022React Day Berlin 2022
21 min
Statically Detecting React App Bugs with TypeScript and ESLint
This Talk explores static analysis tooling for JavaScript and TypeScript, focusing on detecting bugs with TypeScript and ESLint. The importance of type checking and extending recommended rules is emphasized. The Talk also delves into specific ESLint rules and provides code samples to demonstrate their usage. The insights provided by ESLint powered by TypeScript are highlighted. Floating promises and misused promises are discussed, along with recommendations for handling exceptions and resources. The Talk concludes by offering resources and support for further exploration and development.
Remixing Your Stack in a Monorepo Workspace
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
Remixing Your Stack in a Monorepo Workspace
Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.
Crash Course into TypeScript for content from headless CMS
React Summit 2022React Summit 2022
98 min
Crash Course into TypeScript for content from headless CMS
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:- Generate strongly typed models and structure for the fetched content.- Use the content in components- Resolve content from rich text fields into React components- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production
You will learn:- How to work with content from headless CMS- How content model can be leveraged to generate TS types and what benefits it brings to your project- How not to use string literals for content in code anymore- How to do rich text resolution into React components- How to minimize or avoid content-related issues before hitting production
Advanced TypeScript types for fun and reliability
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
Maurice de Beijer
Maurice de Beijer
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. 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.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced
How to build distributed systems in TypeScript
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to build distributed systems in TypeScript
This Talk discusses building distributed systems in TypeScript, focusing on an e-commerce store and implementing a create order endpoint. It covers handling retry and error cases, saving order state, handling crashes and duplicate orders, and the process order function and architecture. The Talk also introduces Temporal, a durable code execution framework that simplifies fault-tolerant software development.
How to properly handle URL slug changes in Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
Top Content
This Talk explains how to handle URL slug changes in Next.js by using the getStaticPaths and getStaticProps methods. It covers implementing redirects and provides a solution to eliminate the need for editors to perform additional steps. The approach involves tracking URL slug changes and issuing proper redirects. The speaker encourages the audience to reach out with any questions or experiences with handling URL slugs.
Alternatives to TypeScript
TypeScript Congress 2022TypeScript Congress 2022
8 min
Alternatives to TypeScript
This Talk explores alternatives to TypeScript such as Clojure, Flow, and Hagel, highlighting their unique features and syntax. Flow and Hagel make finer distinctions between types and prioritize safety. TypeScript offers quick fixes for inferring types. Hagel aims for fewer type annotations and increased safety. These alternatives can provide insights and understanding of TypeScript.
Type Safety at Runtime in Typescript
TypeScript Congress 2022TypeScript Congress 2022
8 min
Type Safety at Runtime in Typescript
TypeScript does not have runtime type checking, but there are libraries available for runtime type validation. ZAD is a popular runtime type validation library in the React ecosystem, offering schema primitives for specific validations on primitive types and support for complex data like objects and arrays. ZAD also provides methods for parsing values and handling successful or failed parsing with error objects.
TypeScript and the Database: Who Owns the Types?
TypeScript Congress 2022TypeScript Congress 2022
27 min
TypeScript and the Database: Who Owns the Types?
Top Content
The Talk discusses the use of TypeScript and SQL together in software development. It explores different approaches, such as using an ORM like TypeORM or a schema generator like pg2ts. Query builders like connects JS and tools like PGTyped are also discussed. The benefits and trade-offs of using TypeScript and SQL are highlighted, emphasizing the importance of finding a middle ground approach.
Onboarding React Developers to Typescript
TypeScript Congress 2022TypeScript Congress 2022
19 min
Onboarding React Developers to Typescript
Today's Talk discusses best practices for onboarding React developers to TypeScript, including pain points faced by engineers, principles for effective onboarding, and a workshop format. The workshop covers function type expressions, annotating React functional components, and the return type of React functional components. The session emphasizes creating a safe space for hands-on practice and gradually exposing engineers to TypeScript concepts. Overall, the Talk aims to improve onboarding experiences for React developers learning TypeScript.
Understanding types as sets
TypeScript Congress 2022TypeScript Congress 2022
21 min
Understanding types as sets
This Talk explores the concept of types and their relationship to variables in TypeScript, including primitive types, special types, and literal types. It also delves into unions and intersections of types, their canonical form, and their effect on sets of values. The Talk discusses object types, their defined members, and the behavior of access property checks. It highlights how unions and intersections can be used with objects and how they are reduced to a canonical form. The importance of base types in TypeScript and how they allow variables to hold instances of any subtype is also emphasized.
TypeScript for Library Authors: Harnessing the Power of TypeScript for DX
TypeScript Congress 2022TypeScript Congress 2022
25 min
TypeScript for Library Authors: Harnessing the Power of TypeScript for DX
TypeScript for library authors offers benefits for both internal and external use, improving code quality and providing accurate understanding of libraries. Documentation and examples should be in code to provide up-to-date information. Testing types alongside unit tests ensures accurate typing. Managing changes and exposing types requires careful versioning. Deep integration of types improves usability. Using a map in TypeScript allows for simpler implementation and customization. Leveraging types in libraries can generate code based on user access. TypeScript integration with Nuxt provides support and type declarations.
Plug-in architecture: how TypeScript let us paint-by-numbers
TypeScript Congress 2022TypeScript Congress 2022
15 min
Plug-in architecture: how TypeScript let us paint-by-numbers
When faced with challenges in supporting multiple package managers and keeping up with growth, implementing a plugin architecture can help. Extending a CLI for source control management systems like GitHub and GitLab can be done using TypeScript and Oclef CLI. TypeScript errors can be resolved by adding missing properties and implementing required functions for plugins. Supporting multiple repositories by following TypeScript errors and having the right setup can reduce time to production and onboarding. Plugin architecture with TypeScript can be a valuable tool for faster development and onboarding onto repositories.
Lessons from Maintaining TypeScript Libraries
TypeScript Congress 2022TypeScript Congress 2022
30 min
Lessons from Maintaining TypeScript Libraries
Top Content
Mark Erickson, a Senior Frontend Engineer at Replay, discusses JavaScript libraries and their support for TypeScript, including migration, versioning, and debugging. He also explores the challenges of supporting multiple TypeScript versions and designing APIs for use with TypeScript. Additionally, he shares advanced Redux type tricks and insights into maintaining a TypeScript library. The poll results reveal the widespread usage of TypeScript among developers, with many gradually migrating their codebases. Lastly, he provides tips for upgrading TypeScript and verifying functionality.
Writing Universal Modules for Deno, Node and the Browser
Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
Luca Casonato
Luca Casonato
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.
Full-stack & typesafe React (+Native) apps with tRPC.io
React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Top Content
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.
How Typed is Your Framework?
React Advanced Conference 2021React Advanced Conference 2021
25 min
How Typed is Your Framework?
Today's Talk focused on the importance of TypeScript in preventing runtime errors and its integration with popular frameworks like Vue.js, Angular, and React. TypeScript provides error assistance and typing boundaries between components, ensuring correct usage. It also allows for the creation of generic components, leveraging TypeScript generics to define contracts between unknown properties. The Talk highlighted the use of TypeScript in various scenarios, such as working with React Node, and provided resources for further learning and exploration.
Infrastructure as Code for React Application on AWS Written in TypeScript
React Advanced Conference 2021React Advanced Conference 2021
30 min
Infrastructure as Code for React Application on AWS Written in TypeScript
This Talk covers infrastructure as code using Terraform and CDK. The speaker demonstrates how to build infrastructure for a React application, including an S3 bucket and connecting to a real domain. They also discuss configuring cache behavior, CloudFront, and remote backends. TypeScript is highlighted as a powerful language for infrastructure as code, and the importance of automation and well-documented code for global-scale infrastructures is emphasized.
Zero-runtime CSS-in-TypeScript with vanilla-extract
React Finland 2021React Finland 2021
29 min
Zero-runtime CSS-in-TypeScript with vanilla-extract
Can we have themeable CSS-in-TypeScript without the runtime cost? In this talk we'll have a quick look at how this can be achieved with vanilla-extract.
Building Serverless Applications on AWS with TypeScript
Node Congress 2021Node Congress 2021
245 min
Building Serverless Applications on AWS with TypeScript
Workshop
Slobodan Stojanović
Slobodan Stojanović
This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application.
Table of contents:        - How to set up a serverless project with TypeScript and CDK        - How to write a testable Lambda function with hexagonal architecture        - How to connect a function to a DynamoDB table        - How to create a serverless API        - How to debug and test a serverless function        - How to organize and grow a serverless application


Materials referred to in the workshop:
https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w
DynamoDB blog Alex DeBrie: https://www.dynamodbguide.com/
Excellent book for the DynamoDB: https://www.dynamodbbook.com/
https://slobodan.me/workshops/nodecongress/prerequisites.html
The Next Generation of GraphQL and TypeScript
GraphQL Galaxy 2020GraphQL Galaxy 2020
22 min
The Next Generation of GraphQL and TypeScript
The CTO of the Guild discusses the importance of keeping the GraphQL schema and TypeScript code in sync. They introduce GraphQL Cogen, a tool that generates TypeScript types and code to improve developer experience and type safety. The tool also generates ready-to-use React hooks based on Apollo Client and supports multiple languages and integration with various tools. They also discuss the introduction of Type Document Node, which generates a document node from GraphQL operations. They mention the new string manipulation features in TypeScript 4.1 and the ability to parse GraphQL type definitions with a lexer. They express the need for community help to overcome limitations in TypeScript with parsing complex and multiline strings.
Safely Handling Dynamic Data with TypeScript
Node Congress 2021Node Congress 2021
29 min
Safely Handling Dynamic Data with TypeScript
Top Content
This Talk discusses the safe handling of dynamic data with TypeScript using JSON Schema and TypeBox. Fastify, a web framework, allows developers to validate incoming data using JSON schema, providing type safety and error handling. TypeBox is a powerful library that allows developers to define JSON schemas and derive static types in TypeScript. The combination of JSON schema, TypeBox, and Fastify provides powerful tools for type safety and validation of dynamic data.
How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
JSNation Live 2020JSNation Live 2020
33 min
How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
TypeScript's influence in the JavaScript ecosystem and its alignment with JavaScript's goals and principles. TypeScript's impact on the industry and its popularity among JavaScript programmers. The goal of TypeScript to innovate in types without introducing new concepts to JavaScript. The challenges of running TypeScript on other people's code and making it a native browser language. TypeScript's compatibility with JavaScript and its aim to be a thin layer on top of JavaScript. The efforts to improve support for JS and JS docs and the pain points of transitioning to TypeScript. The accessibility work in TypeScript and the absence of real competitors in the market.
Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK
React Summit 2020React Summit 2020
25 min
Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK
This Talk provides an introduction to JavaScript and React, as well as insights into building real-time serverless GraphQL APIs with TypeScript, AppSync, and CDK. It covers the concepts of GraphQL schema, data sources, and resolvers, as well as the use of GraphQL subscriptions for real-time communication. The Talk also highlights the features of AppSync and CDK for building APIs and infrastructure. It concludes with a demonstration of creating an API with CDK and AppSync, including the creation of Lambda functions and DynamoDB tables.
TypeScript + React = ❤️
React Summit 2020React Summit 2020
30 min
TypeScript + React = ❤️
Welcome to TypeScript plus React equals love. TypeScript features can prevent bugs in React apps. TypeScript gives confidence to remove unused props. TypeScript ensures accurate prop definitions and prevents laziness. TypeScript provides type safety and advanced patterns for better developer experience. TypeScript is a good candidate for projects, especially larger ones.
Stories and Strategies from Converting to TypeScript
React Summit Remote Edition 2021React Summit Remote Edition 2021
20 min
Stories and Strategies from Converting to TypeScript
This Talk discusses the process of converting to TypeScript at CodeCademy. It emphasizes the importance of encouraging adoption and knowledge sharing within the team. The Talk also highlights the seamless integration of TypeScript into the existing infrastructure and build system. The strategy for converting to TypeScript involved using dedicated pull requests and automated tools. The speaker shares tips on automating changes, setting up a styling guide, and celebrating victories. Resources for learning TypeScript are also mentioned.