ReactFoo-VueDay Hyderabad edition

React and Vue for performance engineering and front-end development

Attend

Vue.js and TypeScript: Working Together like Peanut Butter and Jelly

Submitted by Rob Richardson (@robrich) on May 10, 2020

Duration of the session: 35 mins full talk Status: Submitted

Abstract

Have you struggled to get TypeScript and Vue to play well together? Me too. Vue is a fantastic SPA framework, and TypeScript is a great way for catching errors faster. Together, they can boost your productivity. Join us as we peel back the layers of TypeScript and look at the tricks of the trade to get them playing well together. You’ll leave with a solid methodology and code samples to get started with Vue + TypeScript.

Outline

Vue has a gentle learning curve, and TypeScript makes it easy to catch syntax errors quickly. They weren’t designed to go togther, but they work surprisingly well. We examine how they work well, and gotchas we’d hit when pulling JavaScript modules into a TypeScript project. With each gotcha, we identify a strategy for overcoming it. These strategies include creating types, creating type description files (.d.ts), using type description files from npm, and generating .d.ts files. Though any and ts-comment are also solutions, we’ll merely note they exist, and highlight their downsides. Users leave with a solid understanding of how to get Vue+TypeScript to work really well together.

Requirements

none

Speaker bio

Rob Richardson is a software craftsman building web properties in ASP.NET and Node, React and Vue. He’s a Microsoft MVP, published author, frequent speaker at conferences, user groups, and community events, and a diligent teacher and student of high quality software development. You can find this and other talks on https://robrich.org/presentations and follow him on twitter at @rob_rich.

Links

Slides

https://robrich.org/slides/vue-and-typescript-like-peanut-butter-and-jelly/#/

Preview video

https://robrich.org/filters/video/

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}