VueConf US 2018

Talks

1. State of Vue

Evan You

2. How We Do Vue At GitLab

Jacob Schatz

3. Vue in Motion

Rachel Nabors

4. Testing Vue apps

Edd Yerburgh

5. Serverless Functions and Vue.js

Sarah Drasner

6. vue-rx

John Lindquist

7. Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

8. 7 secret patterns Vue consultants don't want you to know

Chris Fritz

9. Agile Design Systems in Vue

Miriam Suzanne

10. Vue & TypeScript: Up and Running

Daniel Rosenwasser

11. A React Point of Vue

Divya Sasidharan

12. Vue & SSR: The best practices

Sebastien Chopin

13. A Short Synopsis of Vue Storybook

Peter Finn

14. Prototyping with Vue Single File Component

Pine Wu

15. 5 Libraries You Should Know About

Adam Jahr

16. Update an Existing Application to Vue

Michael Bennett

17. Vue and Vuex for Complex Application State

Patrick Seda

18. Top 5 Must-Have UI Animation Patterns

Rachel Nabors

19. The Dream: A Full Rewrite

Seth White

20. Start Your Own Vue.js Meetup

Ben Hong

21. Reusability - Is It Worth It?

Shelton Clinard

22. Reactivity - Learning by Accident

Jeff Schenck

23. Quick Publishing of Redistributable SFC on NPM

Mike Dodge

24. OverVue of Vuetify.js

CJ

25. Ionic and Vue

Mike Hartington

26. Dynamic Store Modules with Vuex

Adam Bradford

27. Build a MiniFlix Clone with Vue Contest

Dan Zeitman

28. Beyond HTML with Vue

Eduardo San Martin Morote

29. Vue with AWS Lambda

Matt Biilmann

30. 40 Hour Plan For UX Proficiency

Jacob Covey

31. Code Splitting Patterns with Vue

Sean Thomas Larkin
Notify me when new talks are available.

Vue & TypeScript: Up and Running

Vue & TypeScript: Up and Running

Daniel Rosenwasser

Daniel is a Program Manager at Microsoft working on the TypeScript language and compiler. TypeScript is JavaScript plus types, specifically static types. In JavaScript all your values already have types, though you may not specify them. Specifying static types helps you recognize bugs and undesirable behavior in your code. Using TypeScript with a tool like VSCode also gets you a ton additional features to help you write less buggy code.

If I want to try TypeScript, in any JavaScript file I can add // @ts-check to see if it identifies problems with my code. I can also start specifying types in JSdoc.

To start seeing the benefit, Daniel showed the following code snippet, and how TypeScript helps you find the error before runtime.

As you can see, TypeScript identifies the problem, that there are missing double quotes in the props.

Previously the solution to using TypeScript with Vue was to used decorators. However, this isn’t the case anymore. TypeScript has evolved a great deal, and recently shipped 2.8. Now all you need to make this Vue code TypeScript compatible is to change it from:

to:

TypeScript is now a part of the new 3.X version of the Vue CLI, making it super simple to bake into your next project. Vetur, created by Pine Wu, is an extension which gives you Vue Tooling for VSCode. To use TypeScript in your Vue files the syntax is easy:

What all is necessary to use TypeScript in your Vue app with .vue files?

  • Use an up-to-date version of TypeScript & Vue
  • Use --strict TypeScript settings
  • Use Vetur for editing .vue files
  • Use Vue.extend with the object API
  • Annotate computed methods

The best way to get started with TypeScript in your project is to just add it from the new version of the Vue CLI: