
Rob Richardson
Mar 24, 2021
Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

#1about 3 minutes
Comparing Vue with other popular SPA frameworks
Vue.js is a SPA framework that prioritizes developer productivity and an easy learning curve compared to Angular and React.
#2about 1 minute
Creating a new Vue project with the Vue CLI
The Vue CLI provides an interactive prompt to scaffold a new project with features like TypeScript, Vue Router, and testing frameworks.
#3about 5 minutes
Understanding the value of TypeScript for code clarity
TypeScript helps answer "did I call it correctly?" by adding optional type hints that prevent common errors and clarify function signatures.
#4about 3 minutes
How to start using TypeScript in a project
Begin using TypeScript by renaming .js files to .ts and adding optional type annotations to functions and variables to express intent.
#5about 3 minutes
Setting up a Vue project with TypeScript enabled
A Vue CLI-generated project includes a tsconfig.json file, and TypeScript is enabled in components by adding lang="ts" to the script tag.
#6about 3 minutes
Integrating the Vuetify UI library with TypeScript
To use a JavaScript library like Vuetify in a TypeScript project, you may need to add its specific type definitions to the project configuration.
#7about 7 minutes
Using type casting for component references
When TypeScript doesn't recognize methods on a component reference, you can cast the reference to a specific type or custom interface for type safety.
#8about 4 minutes
Creating custom type declaration files for JavaScript libraries
For libraries without types, you can create a .d.ts file to manually declare the module and define the functions you use.
#9about 2 minutes
Using DefinitelyTyped for community type definitions
The DefinitelyTyped project provides thousands of community-maintained type declaration packages, installable via npm as @types/package-name.
#10about 5 minutes
Generating declaration files with the TypeScript compiler
The TypeScript compiler (tsc) can automatically generate a basic .d.ts declaration file from a JavaScript file to get you started.
#11about 3 minutes
A prioritized summary of techniques for using JS libraries
A hierarchy of strategies for integrating JavaScript libraries includes using built-in types, DefinitelyTyped, custom declarations, generation, and casting.
#12about 3 minutes
Deciding when to use or avoid TypeScript with Vue
TypeScript is ideal for long-lived projects but may be overkill for prototypes or projects heavily reliant on libraries without type definitions.
Related jobs
Jobs that call for the skills explored in this talk.
22 days ago
Engineering Manager, AdTech (m/f/d)

Redcare Pharmacy
Sevenum, Netherlands
Senior
26 days ago
Lead Full-Stack Engineer

Hubert Burda Media
Intermediate
Senior
2 months ago
Senior Frontend Engineer

Almedia
Berlin, Germany
Senior