Svelte supports TypeScript, because that’s what friends do

A Bad Week for: Regis Philbin fans, The Angular Team

A Good Week for: Taylor Swift fans, Svelte, TypeScript, Vue

---

Svelte supports TypeScript, because that’s what friends do

Too far?

The people asked… and the Svelte Gods answered. After countless requests (and a lot of random, independent TS tools), Svelte officially announced full support for TypeScript last week.

What? You haven’t learned Svelte yet? Wow. I bet you also enjoy having a balanced, fulfilling life while spending quality time with your friends and family on nights and weekends rather than constantly feeling like you’ll never know enough and you have to keep up with every single thing in the JavaScript ecosystem so you can write a newsletter every Monday that gracefully straddles the line between current pop culture, humor, and technical relevancy.

If that’s you, here’s a quick overview on Svelte’s two main selling points:

1. Smaller, faster apps: Svelte is technically a JavaScript compiler and not a framework, which means it compiles all your code to vanilla JS at build time with less dependencies and no virtual DOM. In theory, this allows Svelte to be lighter and faster.

2. Simple syntax: One of Svelte’s “explicit goals” is to reduce the amount of code you have to write and to make that code easily readable. This example component in Svelte, React, and Vue gives a basic idea of how Svelte does that.

What does “official TypeScript support” actually look like?

Remember those random, independent TypeScript tools we mentioned earlier? Most of those were simply absorbed into the Svelte organization and will now be maintained by a group of people with “common goals” for the Svelte ecosystem going forward (#SvelteGang).

For more detail, let’s go #STTA (straight to the announcement):

• You can use TypeScript inside your script blocks by adding the lang="ts" attribute
• Components with TypeScript can be type-checked with the svelte-check command
• You get autocompletion hints and type-checking as you’re writing components, even in expressions inside markup
• TypeScript files understand the Svelte component API — no more red squiggles when you import a .svelte file into a .ts module

The Bottom Line

TypeScript support should unlock a larger potential user base for Svelte, particularly among dev teams building larger apps that are using TypeScript more and more. It also means that if you’re a big TypeScript fan, you might be running out of excuses to not give Svelte a try.

---

Vue 3 hits the RC

Vue devs waiting patiently for V3

Let’s go back… to September 2018:

Elon Musk had just tanked Tesla’s stock price after smoking weed on the Joe Rogan Podcast and Evan You announced plans for Vue 3 at the Vue.js conference in London.

A lot has changed since then. Tesla stock has gone up 6x (wtf)and… we’re still waiting for Vue 3.

But it’s almost here! Last week, Evan announced that Vue 3 was in RC, and the team doesn’t expect any major changes before the public release in the next few weeks.

Knowing that, here are 3 big highlights to expect from Vue 3:

• Composition API: An alternate, optional syntax for writing larger components, reusing code across components, and using TypeScript.

• Teleport: A new component that provides native support for portals and simplifies working with elements like modals and popups without the need for ugly workarounds.

• Fragments: Like React, Vue 3 now has official support for fragments (AKA multi-root node components).

The Bottom Line

Vue is loved by the developers who use it, but it’s also not as widely used as frameworks like Angular and React, particularly in large enterprise applications (don’t @ me). The new features in v3 seem like they will offer more of the functionality that React provides, while still preserving Vue’s unique versatility. It will be interesting to see if this eventually leads to increased adoption of Vue at larger companies.

Congratulations to Evan and all the contributors on this big release!

---

Cool Bits

1. Tyler wrote a gentle introduction to Webpack because he wants to help you conquer your Webpack fears. Gently.

2. Lea Verou wrote about importing non-ESM libraries in ES modules.

3. James re-created Minesweeper using 100% HTML and CSS (zero JavaScript) for fun I guess? Who hurt you, James?

4. Dr. Axel (still the best DJ name of all time) wrote about three different approaches for eliminating duplicate objects from Arrays.

5. Calvin will walk you through how to build Instagram with TypeScript, Node, Express, and Vue with this 5-part tutorial series.

6. Alejandro built a slick flexible guitar component in React. You get extra points if you can program it to play “Through Fire and Flames” on Expert Mode in Guitar Hero.

7. TK wants to help you build a better mental model for thinking in TypeScript with this in-depth article.

8. Karan wants to help you spend less time setting up boilerplate, so he made theGraphQL first full-stack starter kit with Node, React, and TypeScript.

---

Worthless JS knowledge

Have you ever wondered how you’d create your own implementation of Array in JavaScript? No? Oh, well this is awkward.

function array () {
  let arr = Object.create(array.prototype)

  Object.defineProperty(arr, 'length', {
    value: 0,
    enumerable: false,
    writable: true,
  })

  for (key in arguments) {
    arr[key] = arguments[key]
    arr.length += 1
  }

  return arr
}

array.prototype.push = function (element) {
  this[this.length] = element
  this.length++
  return this.length
}

array.prototype.pop = function () {
  this.length--
  const elementToRemove = this[this.length]
  delete this[this.length]
  return elementToRemove
}

array.prototype.filter = function (cb) {
  let result = array()

  for (let index in this) {
    if (this.hasOwnProperty(index)) {
      const element = this[index]

      if (cb(element, index)) {
        result.push(element)
      }
    }
  }

  return result
}

If you’re curious or confused by the code, we wrote about it here.

---