{"id":3595,"date":"2021-02-11T20:23:40","date_gmt":"2021-02-11T20:23:40","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3595"},"modified":"2021-02-11T23:14:44","modified_gmt":"2021-02-11T23:14:44","slug":"making-friends-out-of-typescript-and-vue-developers","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers","title":{"rendered":"Making friends out of TypeScript and Vue Developers"},"content":{"rendered":"<p>Here at Ionic, we&#8217;re big fans of TypeScript. Back when we were working on Ionic Framework 2.0, we made the move to go all in on TypeScript and haven&#8217;t looked back. When we shipped Ionic React, we made sure it used TypeScript out of the box and wrote about <a href=\"https:\/\/ionicframework.com\/blog\/how-to-use-typescript-in-react\/\">how to use TypeScript in a React app<\/a>. Now with <a href=\"https:\/\/ionicframework.com\/vue\">Ionic Vue<\/a>, we&#8217;ve made the same choice to go all in on TypeScript and ship all our starter Vue projects with it. But we started to notice something interesting with the Vue Community: a bit of hesitation and in some cases a full on rejection of TypeScript. What&#8217;s the deal?<\/p>\n<p><!--more--><\/p>\n<p>I did a <em>very scientific<\/em> poll and asked Vue developers if they were using Vue 3 and not using TypeScript, what was the reason. Thanks to all who replied!<br \/>\nOf the replies I got, the most common trend was that folks thought TypeScript was:<\/p>\n<ul>\n<li>Too much work to configure<\/li>\n<li>Didn&#8217;t &#8220;feel&#8221; like a good match<\/li>\n<li>Just not for them<\/li>\n<\/ul>\n<p>Now personal preference is one thing, but there are some technical assumptions being made that might be a result of bad experiences with older releases of TypeScript. So let&#8217;s actually look at what working with TypeScript in Vue project <em>actually<\/em> is like and the benefits you get by pairing Vue with TypeScript.<\/p>\n<h2>Types, what are they anyways?<\/h2>\n<p>Before we dive into the Vue parts, let&#8217;s just set a baseline. TypeScript is a superset of JavaScript that provides types. So any valid JavaScript is also valid TypeScript. For instance, if we have this bit of code:<\/p>\n<pre><code class=\"language-javascript\">const items = [0, 1, 2, 3]\n<\/code><\/pre>\n<p>We could load this in a JavaScript or TypeScript file without any issues. Where it gets fun is when you start to add the type information to this. We could add a type annotation that just tells TypeScript what <em>kind<\/em> of variable <code>items<\/code> is.<\/p>\n<pre><code class=\"language-typescript\">const items: number[] = [0, 1, 2, 3]\n<\/code><\/pre>\n<p>This is telling TypeScript that <code>items<\/code> is an Array (the <code>[]<\/code> part) and that it can only accept numbers. Why do we need this? Doesn&#8217;t JavaScript already understand this type of information?<\/p>\n<p>JavaScript already has a loose sense of types, but it&#8217;s not strict. Meaning that we could have our variable accept anything; strings, objects, other arrays, etc. The problem here is that when we start to build out our apps, having things be this dynamic can lead to various runtime errors or just general confusion about what kind of data we&#8217;re working with.<\/p>\n<p>But by utilizing types, we can make sure that we&#8217;re writing safe apps and can understand our code (even months later). To make this adoption event more approachable, TypeScript will auto-infer the types for us, so we often don&#8217;t even need to supply types if we&#8217;re setting the value right away. So our array example from before can drop the type annotation and be closer to regular JavaScript.<\/p>\n<p>The basic types we deal with are <code>number<\/code>, <code>strings<\/code>, <code>boolean<\/code>, <code>[]<\/code>(array), and <code>{}<\/code> (object). With these base types, we can provide TypeScript with all the information it needs to fully understand our code. There&#8217;s a lot more information regarding TypeScript that can be found on the <a href=\"https:\/\/www.typescriptlang.org\">official website<\/a>.<\/p>\n<h2>Types in Vue<\/h2>\n<p>With the basic understanding of what types are, how do we get TypeScript working in our Vue project? Well if we&#8217;re using the Vue CLI for your project (which you should be), you can run this command from you terminal:<\/p>\n<pre><code class=\"language-bash\">vue add typescript\n<\/code><\/pre>\n<p>This will kick off a Vue CLI plugin that gets our project setup for TypeScript. You&#8217;ll be prompted with a few questions along the way as well<\/p>\n<pre><code class=\"language-bash\">? Use class-style component syntax? No\n? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes\n? Convert all .js files to .ts? No\n? Allow .js files to be compiled? Yes\n? Skip type checking of all declaration files (recommended for apps)? Yes\n<\/code><\/pre>\n<p>These prompts (with my answers included) will help you configure your project with TypeScript.<\/p>\n<p>Two prompts I do want to call out are the &#8220;Convert .js to .ts&#8221; and &#8220;Allow .js files to be compiled&#8221;. If you&#8217;re migrating from an older project or have a lot of code that you do not want to migrate to just yet, these options are your best friends. These give you the benefits of TypeScript (compile time error checking and type information) without having to go all in on TypeScript.<\/p>\n<h2>Why Types in Vue?<\/h2>\n<p>So why would we want types in Vue? Well if having type-safe code and no runtime errors aren&#8217;t enough to convince you, what about a better understanding of Vue components? For me, this was one of the biggest reasons I opt for TypeScript when working with Vue. Take this basic <code>HelloWorld<\/code> component:<\/p>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;h1&gt;Hello World&lt;\/h1&gt;\n    &lt;button @click=&quot;logVal()&quot;&gt;Click Here&lt;\/button&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n  export default {\n    name: &quot;HelloWorld&quot;,\n    methods: {\n      logVal(){\n    console.log(&quot;Hello from method&quot;)\n      }\n    }\n  }\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>When I was first learning Vue, I was constantly forgetting the syntax for methods, props, etc. As someone who came from Angular and React, the syntax was confusing and took a bit to learn. Even typing this right now, I had to look up and verify I did it correctly! TypeScript provides a way to resolve all of that and make understanding Vue components straight forward.<\/p>\n<p>First we import <code>defineComponent<\/code> from <code>vue<\/code>. This is essentially an empty function, but provides the type information we need to understand our component.<\/p>\n<pre><code class=\"language-typescript\">import { defineComponent } from &#039;vue&#039;;\n<\/code><\/pre>\n<p>Next, we can just wrap our component in this <code>defineComponent<\/code> function.<\/p>\n<pre><code class=\"language-typescript\">export default defineComponent({\n  name: &quot;HelloWorld&quot;,\n  methods: {\n    logVal(){\n      console.log(&quot;Hello from method&quot;)\n    }\n  }\n});\n<\/code><\/pre>\n<p>Once done, we can automatically start getting type information in our editor for our components.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1358\" height=\"309\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM.png\" alt=\"\" class=\"aligncenter size-full wp-image-3597 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM.png 1358w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM-300x68.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM-1024x233.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM-768x175.png 768w\" data-sizes=\"auto, (max-width: 1358px) 100vw, 1358px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1358px; --smush-placeholder-aspect-ratio: 1358\/309;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1358\" height=\"309\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM.png\" alt=\"\" class=\"aligncenter size-full wp-image-3597\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM.png 1358w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM-300x68.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM-1024x233.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-08-at-3.47.18-PM-768x175.png 768w\" sizes=\"auto, (max-width: 1358px) 100vw, 1358px\" \/><\/noscript><\/p>\n<p>&#8220;Ok Mike, are you serious about that?&#8221; While trivial, this can be a big feature for people just starting to learn Vue. It&#8217;s essentially having the Vue docs right in your editor. You know exactly how <code>methods<\/code> should be declared and what life cycle hooks are part of your components.<\/p>\n<p>For more advanced use cases, like working with Vuex, TypeScript should almost be required. Being able to provide the expected values and types in your state management really just streamlines the whole process. The Vuex team has provided some <a href=\"https:\/\/next.vuex.vuejs.org\/guide\/typescript-support.html#typing-usestore-composition-function\">great docs here<\/a> for how to type your store and some best practices, plus I&#8217;ll be following this post up with some more material in the coming weeks.<\/p>\n<h2>Revisiting TypeScript<\/h2>\n<p>There are a lot of benefits to using TypeScript in your Vue app. But it is true, not everyone may need it. If you&#8217;re not using the Vue CLI or do not have a build process, using TypeScript can be a bit too much. But these cases are very few, especially when building apps, like with Ionic Vue. So if you&#8217;re working with Vue 3, try it out with TypeScript enabled. With the latest defaults in the Vue CLI, you&#8217;ll be able to build your apps faster and without any runtime errors!<\/p>\n<ul>\n<li><a href=\"https:\/\/www.typescriptlang.org\">TypeScript Website<\/a><\/li>\n<li><a href=\"https:\/\/v3.vuejs.org\/guide\/typescript-support.html#typescript-support\">Vue TypeScript docs<\/a><\/li>\n<li><a href=\"https:\/\/next.vuex.vuejs.org\/guide\/typescript-support.html\">Vuex TypeScript docs<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Here at Ionic, we&#8217;re big fans of TypeScript. Back when we were working on Ionic Framework 2.0, we made the move to go all in on TypeScript and haven&#8217;t looked back. When we shipped Ionic React, we made sure it used TypeScript out of the box and wrote about how to use TypeScript in a [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":3596,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"29","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"497196","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/making-friends-out-of-typescript-and-vue-developers\/204655","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[123,124],"tags":[197,32,147],"class_list":["post-3595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-perspectives","category-tutorials","tag-ionic-vue","tag-typescript","tag-vue"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Making friends out of TypeScript and Vue Developers - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making friends out of TypeScript and Vue Developers\" \/>\n<meta property=\"og:description\" content=\"Here at Ionic, we&#8217;re big fans of TypeScript. Back when we were working on Ionic Framework 2.0, we made the move to go all in on TypeScript and haven&#8217;t looked back. When we shipped Ionic React, we made sure it used TypeScript out of the box and wrote about how to use TypeScript in a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-11T20:23:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-11T23:14:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Making friends out of TypeScript and Vue Developers\",\"datePublished\":\"2021-02-11T20:23:40+00:00\",\"dateModified\":\"2021-02-11T23:14:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers\"},\"wordCount\":1079,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png\",\"keywords\":[\"Ionic Vue\",\"TypeScript\",\"Vue\"],\"articleSection\":[\"Perspectives\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers\",\"url\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers\",\"name\":\"Making friends out of TypeScript and Vue Developers - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png\",\"datePublished\":\"2021-02-11T20:23:40+00:00\",\"dateModified\":\"2021-02-11T23:14:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png\",\"width\":1600,\"height\":880,\"caption\":\"A header image for the blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Making friends out of TypeScript and Vue Developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Making friends out of TypeScript and Vue Developers - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers","og_locale":"en_US","og_type":"article","og_title":"Making friends out of TypeScript and Vue Developers","og_description":"Here at Ionic, we&#8217;re big fans of TypeScript. Back when we were working on Ionic Framework 2.0, we made the move to go all in on TypeScript and haven&#8217;t looked back. When we shipped Ionic React, we made sure it used TypeScript out of the box and wrote about how to use TypeScript in a [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers","og_site_name":"Ionic Blog","article_published_time":"2021-02-11T20:23:40+00:00","article_modified_time":"2021-02-11T23:14:44+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png","type":"image\/png"}],"author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Making friends out of TypeScript and Vue Developers","datePublished":"2021-02-11T20:23:40+00:00","dateModified":"2021-02-11T23:14:44+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers"},"wordCount":1079,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png","keywords":["Ionic Vue","TypeScript","Vue"],"articleSection":["Perspectives","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers","url":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers","name":"Making friends out of TypeScript and Vue Developers - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png","datePublished":"2021-02-11T20:23:40+00:00","dateModified":"2021-02-11T23:14:44+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png","width":1600,"height":880,"caption":"A header image for the blog"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/making-friends-out-of-typescript-and-vue-developers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Making friends out of TypeScript and Vue Developers"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/02\/typescript-vue-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3595"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3595\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3596"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}