DEV Community

Bulent Gorkem
Bulent Gorkem

Posted on

Why Typescript?

Why Typescript

Typescript extends JavaScript by adding types at build time.

Benefits

  • ✅ Encode constraints and assumptions, as part of developer intent. Defensive programming: Don't trust any of your inputs. Causes cognitive and performance overhead

  • ✅ Speeds up your development experience by catching errors and providing fixes even
    before you run your code. Some 15% of JavaScript detectable bugs could be prevented according to a research

  • ✅ Easier to refactor code without breaking it significantly. Gives you the confidence to refactor without fear of breaking assumed, implicit contracts.

  • ✅ Improved Developer experience: Navigating, understanding complex large size code is easier. Don't need to drill into source files and read all code implementation. You can go one level higher abstraction: rather than how you look at what the code does

  • ✅ Helps with documentation. Automated API docs generation. More formalized and stable contracts

Cons

  • ❌ Not true static typing, only checks the shape of the object, not its true type.
  • ❌ Paradigm shift for developers coming from non statically typed languages, the learning curve
  • ❌ Adding extra step — transpiling from .ts files to .js / so many options to consider.

App vs Library concerns

App perspective

  • More richness when you work with data. You can discover enumerations you can use, overloads of methods you can call.
  • Better encapsulation tools. Private, protected, public, read-only. Unintended code is hidden away from end-user
  • Improved "major version upgrade" experience, ie. upgrade from Lodash 3 to 4, you get immediate todo list with all those broken code showing typescript checks.

Library perspective

  • Create and maintain public API surface, helps with semantic version guarantees
  • Use enums to allow the only type encoded list of values and support for future compatibility, reserve values for future
  • SemVer (deprecations, breakage)
  • API Docs

Show me some code examples

  • casing/typing errors

plain old .js

let toothBrush = { name:'OracleB', price: 2.99 }

function getProductName(product) {
    console.log(product.Name); //simple case error
}

getProductName(toothBrush)  //undefined

Enter fullscreen mode Exit fullscreen mode

type checking .ts

type Product= { name:string, price: number}; //type is defined here..

let toothBrush = { name:'OracleB', price: 2.99 }

function getProductName(product: Product) {
    console.log(product.Name); // !! will fail at development time
}

getProductName(toothBrush)


Enter fullscreen mode Exit fullscreen mode
  • undefined is not a function

let myFunction;

myFunction('hello'); //Uncaught type error, not defined..

myFunction = (message)=> console.log(message);

Enter fullscreen mode Exit fullscreen mode
  • Accidental type coercion
function addFive(num) {
    return num + 5;
}

let result = addFive('hello') // result = hello5

Enter fullscreen mode Exit fullscreen mode
function addFive(num:number) { ... } // would have fixed this problem in advance.

Enter fullscreen mode Exit fullscreen mode

Myths

It is not going to fix everything, won't fix bad code smells.

❌ No more runtime errors
❌ Code will run faster

Top comments (1)

Collapse
 
king11 profile image
Lakshya Singh

alongwith added advantage of better autocompletion by ide's :))