How Typescript Can Power Design Systems

Design Systems are highly popular and beneficial in bridging the gap between design and development. The inclusion of React.js in Design Systems helped introduce the concept of functional programming as it relates to building components for reuse and scale. What happens if we take it a step further? With Typescript, a superset of Javascript that can be used in conjunction with React.js, your Design System can reach a whole new level of efficiency and clarity. By using Typescript in your Design System, you can become more thoughtful about view-layer components with strongly-typed data models -- even style-specific props can be typed, offering visual consistency and ensuring prop purpose. Allowing data to be passed between view-specific components with exportable interfaces makes communicating the intent and limits of your component seamless. Not only do you get to include static type-checking at compile time, but you can use interfaces to describe objects with different properties, make your IDE respond to the code you write, and much more. This talk will explore how UI engineers, from beginner to experienced, can harness the power of Typescript to help enforce better component standards in the code and allow large-scale Javascript projects to succeed. I will additionally include real-life examples of how we're making Typescript work for our Design System at Twitch, and how it's improving designer/developer relationships. By the end of this talk, you will walk away with actionable ideas to implement in your Design Systems codebase!

Comments

Comments are closed.