Skip to content
See Sanity in action 👀 Join us for a live product demo + Q&A →
Sanity
Get started
  • Sanity Studio - Flexible editing environment
  • Content Lake - Real-time database
  • Developer experience - Tooling you love
  • Structured content - The philosophy behind Sanity
  • Review changes - View edits & rollback instantly
  • Image pipeline - On-demand transformations
  • E-commerce - Better shopping experiences
  • Marketing sites - Control your story
  • Products & services - Innovate and automate
  • Mobile apps - Content backend for every OS
  • Aether - Unique digital shopping experience
  • Morning Brew - Omnichannel media distribution
  • InVision - Delivering exceptional customer experiences
  • DataStax - Personalization for global audience
  • React
  • Gatsby
  • Next
  • Nuxt
  • Eleventy
  • Netlify
  • Vercel
  • Algolia
  • Documentation
  • Reference
  • Guides
  • Resource library
  • Headless CMS
  • Tools & plugins
  • Project showcase
  • Schemas & snippets
  • Agency partners
  • Technology partners
  • Get support
  • Share your work
  • 5 Disadvantages Of Wordpress That Are Holding You Back
EnterprisePricing
Contact salesLog inGet started

Typescript 101

  • TypeScript 101: What is it and why should you use it?
  • TypeScript vs. JavaScript: 7 Key Differences

Categorized in

  • Composable architecture
  1. Resources
  2. Composable architecture
  3. Typescript 101

Last updated February 4th 2023

TypeScript vs. JavaScript: 7 Key Differences

  • Joe Holmes

    Software Developer and Technical Writer

From the outside, TypeScript can seem like a riddle wrapped in an enigma.

Although it’s not quite a separate programming language from JavaScript,  the learning curve can seem just as steep. The promise of Typescript is to make development easier, but it also increases the amount of code you have to write, and that code must pass stricter error checking. What gives?

In this article, we'll clear up the differences between TypeScript and JavaScript and illuminate the best use cases for each.

What are the differences between TypeScript and JavaScript?

TypeScriptJavaScript
Less problems and bugs in productionLess error messages in development
Better autocomplete from type definitionsLess fully-featured IDE experience
Write more codeWrite less code
Easily predict how your code will runMore surprises
Higher learning curveLower learning curve
CompiledInterpreted
Trans-compiled, meaning it can compile to any type of JS, including ES5 and ES6Cannot be trans-compiled and is written in only one version

Static vs dynamic languages

One constant tension in the world of programming is between statically-typed and dynamically-typed languages. To understand the difference between TypeScript and JavaScript, let’s first clear up the differences between these two programming paradigms.

Static languages: more early errors, but the code is safe

A static language requires you to declare the data type of variables when you define them. For instance, say I wanted to define the variable x as the number 24. In a static language, I would tell the computer, "This variable x, where I plan to store some numbers, currently equals 24."

The computer would then consider x a number-storage variable. 24 could eventually change to 4, 240, or -7, but it would always remain a number. If we wanted to change x into the name "Jill," however, the language would throw up an error and the program would refuse to run.

Static languages are safe to work with. If you ran a business and suddenly charged "Jill" dollars to someone's bank account, you'd be in trouble. Static-typed languages prevent these sorts of errors long before they happen. Examples of common static languages include Java, C++, and Rust.

Dynamic languages: easier to write, but more errors later on

A dynamic language, on the other hand, optimizes for speed and ease of use. Dynamically-typed languages let you pass any type of data to a variable. You don't need to describe a value before you start using it. For example, take the following line of Python, a popular dynamically-typed language:

def add(x):
  return x + 5

The code's author probably intended numbers to be passed to the add function. If we’d added 2, we'd get 7 back, if we’d added 4, we’d get 9, and the program would work as intended. So long as the function always receives numbers, everything is fine. If we wanted to publish the program to the wider world, we could deploy it and run it on anyone's computer.

But what happens when someone passes "dog" as the value of x? "dog" + 5 might confuse the computer and return an error message. Or maybe it returns the unfortunate string "dog5." Either way, the ambiguity is of no use to anyone.

While a statically-typed language would alert you to that error the first time you tried to execute the code, a dynamically-typed language would only show an error the first time it encountered a non-number as the argument to the add function.

JS is dynamic and TS is static

This is the core difference between JavaScript and TypeScript. While JavaScript is dynamically-typed, TypeScript is a statically-typed superset of JavaScript, which means it offers strict static typing as an option but will allow dynamic typing, as well. As a result, TypeScript code is safer  but a little trickier to write, resulting in more errors earlier in development. The language you use depends on the project you want to execute and the type of code you like to write.

What TypeScript looks like

What does it mean that TypeScript is a superset of JavaScript? TypeScript only adds features to the JavaScript language; it does not restrict or change JavaScript itself. By writing a .ts file instead of a .js one, you can use TypeScript's type features to create safer, more literate code as you see fit, but you're always free to write vanilla JavaScript within it.

So while in JavaScript you might define the string myString with:

let myString = "this is js"

TypeScript would allow you to define the type of that variable with:

let myString: string = "this is ts"

If you ever tried to reassign the value with myString = 42, TypeScript would warn you that you were making a mistake while JavaScript would let you continue.

It's important to note that TypeScript allows you to define all sorts of types beyond simple variables. You can define more complex data types like arrays, objects, and functions, and you can even define the specific shape of an object in advance using interfaces.

Defining complex data structures when they're first assigned means complex code is much easier to understand and maintain over time, since each data structure comes with its own description of its intended use.

Functions can also only accept certain types, and frameworks and specific npm packages can come with type definitions that drastically lower the learning curve for new tools (since your autocomplete can recommend the external libraries' syntax.)

When to use TypeScript vs JavaScript?

It might be a good idea to set up TypeScript in your project if you are working on a large project with a big team. If you are using external libraries and frameworks that offer type definitions, which can make writing your code much easier. JavaScript may be a better choice if you want to write a quick script or personal project.

It might be a good idea to set up TypeScript in your project if you:

  • are working on a large project with a big team, where errors are more common and safety is paramount.
  • are using external libraries and frameworks that offer type definitions, which can make writing your code much easier.
  • have the time to learn TypeScript and write it.

JavaScript might be a better choice if you:

  • are writing a quick script or personal project and don't want to write much code.
  • value the ability to quickly build out a project over maintaining it and preventing errors in the long term.
  • never learned TypeScript and don't have time to do so.

As you might imagine, learning TypeScript requires a non-trivial time commitment. However, many developers claim that it saves them time in the long run by preventing tedious debugging and enabling better autocomplete in their code editors, enabling them to write code faster. TypeScript is so well-loved it made it to the #2 position in StackOverflow's survey of most loved programming languages, and coders find it pairs well with a variety of frameworks.

It’s worth taking the time to experiment with TypeScript and gain some familiarity. Many web development jobs will expect some experience with TypeScript, and because it's a superset of JavaScript, you don't have to learn everything in it all at once.

Sanity: all the TypeScript you want (including none!)

TypeScript has played a central role in Sanity's development ever since Sanity's codebase migrated to TypeScript in 2019. With robust type definitions for the Sanity Studio, you can take advantage of TypeScript's powerful features to design a fully decoupled content platform with structured content. Give it a try–with or without JavaScript's powerful, type-safe superset.

Try it out on Sanity
Previous
TypeScript 101: What is it and why should you use it?

Page content

  • What are the differences between TypeScript and JavaScript?
  • Static vs dynamic languages
    • Static languages: more early errors, but the code is safe
    • Dynamic languages: easier to write, but more errors later on
    • JS is dynamic and TS is static
  • What TypeScript looks like
  • When to use TypeScript vs JavaScript?

Platform

Structured ContentDeveloper experienceContent LakeSanity StudioSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

Documentation
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
Resource library
  • Agency partners
  • Technology partners
  • Blog Template
  • Personal Website Template
  • Developer Portfolio Templates
  • All Templates
Case Studies
  • Headless CMS
  • What is an API CMS
  • Static Sites 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • What is a DXP?
  • Typescript 101
  • Content as a Service
  • Ecommerce SEO
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServiceAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023