DEV Community: Travis Sanon

What is TypeScript?

Travis Sanon — Wed, 11 Sep 2019 17:04:14 +0000

Taken from Wikipedia:

"TypeScript is an open-source programming language developed and maintained by Microsoft.

It is a strict syntactical superset of JavaScript, and adds optional static typing to the language."

The word "superset" is something that contains all features of the original, but enhanced to include additional features.

This means that TypeScript is basically JavaScript with some with some extra features (aka: static types) that make JavaScript more pleasurable to work with.

"TypeScript is designed for development of large applications and transcompiles into JavaScript."

The reason why TypeScript is designed for large applications is because JavaScript is a loosely typed language.

A "Loosely typed" language is one that does not require types to be specified. This basically means you can do whatever you want with your expressions.

Let's take a look at this example. Let's use JavaScript to create a greeting variable with a string with a value of "hey".

/* JavaScript */
let greeting = "Hey"

We want the type to only be a string even if the value gets changed. JavaScript knows the value is a string, but it doesn't care.

/* JavaScript */
let greeting = "Hey" // ¯\_(ツ)_/¯

Now let's change the value to a number. JavaScript knows that the greeting value turned into a number, but again, it doesn't care.)

/* JavaScript */
let greeting = "Hey" // ¯\_(ツ)_/¯

greeting = 1 // ¯\_(ツ)_/¯

This basically means JavaScript doesn't care what gets returned. This sucks because you can unintentionally change the value type of something, break your code, and JavaScript will just let it slide.

Now let's use TypeScript to create a variable called greeting and give it a type of string, and make the value the same string.

/* TypeScript */
let greeting: string = "Hey"

Since we set a type, the value of that variable WILL stay that type. The compiler will yell at you if you do otherwise.

/* TypeScript */
let greeting: string = "Hey" // This is a string.

Lets say we try to change this value to a number, TypeScript will raise an error and pretty much say that this is illegal.

/* TypeScript */
let greeting: string = "Hey" // This is a string.

greeting = 1 // Hey, thats illegal.

This is why TypeScript is very helpful, to prevent insanity-inducing errors as your application gets larger.

Summary: TypeScript is a strongly typed JavaScript

(You can also omit semicolons in TypeScript)

Why

So why use TypeScript?

To provide an optional type system for JavaScript. If you don't want to pull your hair with runtime errors as your application gets larger, its very nice to have a language with a type system)
To increase your agility when doing refactoring. The TypeScript compiler will catch errors across your entire codebase whenever you make changes.
Types are documentation. By annotating the code with types, it will always be in sync with how your code is behaving. So now you don't have to comment your code or read through READMEs (or maintain them either).

How

To install TypeScript:

> npm install -g typescript

Lets write some basic JavaScript.

/* index.ts */

let sentence = "Proud cat owner"

function welcomePerson(title) {
  return "Welcome, " + title
}

console.log(welcomePerson(sentence)) // Welcome, Proud cat owner

To compile TypeScript:

> tsc index.ts

The compiled code will look the same as the .ts file, but this was just to showcase that you can write regular JavaScript without any issues.

Basic Types

Now let's take advantage of what TypeScript has to offer.

let sentence = "Proud cat owner"

function welcomePerson(title: string) {
  return "Welcome, " + title
}

console.log(welcomePerson(sentence)) // Welcome, Proud cat owner

So here, we just added a string type annotation to the title argument. This tells us that we want that argument to only be a string, nothing else. If you pass anything other than a string to that argument, the compiler will give you a nice little error.

For example, if I change the value of let sentence into an array:

let sentence = [0, 1, 2]

function welcomePerson(title: string) {
  return "Welcome, " + title
}

console.log(welcomePerson(sentence)) // You did something illegal

I will get a nice little error in the compiler.

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Interfaces

So an interface is pretty much a typed object. An interface defines the properties and its types for a concept.

For example, a person. A person has a name and an age. Both of those properties are related to a person. So let's create a Person interface.

interface Person {
  name: string;
  age: number;
  title: string;
}

Now by creating this interface, We now have all the properties that we need for a concept, along with their types. It can be used as a static (or dynamic?) type for our person parameter in function welcomePerson(), and we can access any property that we need from the interface.

I will now create an object that will define me, based off of the properties in the Person interface.

interface Person {
  name: string;
  age: number;
  title: string;
}

let travis = {
  name: "Travis",
  age: 22,
  title: "Proud cat owner",
}

Finally, we will:

Remove let sentence
Set the type of our person parameter to be Person (our interface) in function welcomePerson()
Pass in let travis as an argument for the function welcomePerson
Use person.title to target the title property in the parameter's object

interface Person {
  name: string;
  age: number;
  title: string;
}

let travis = {
  name: "Travis",
  age: 22,
  title: "Proud cat owner",
}

function welcomePerson(person: Person) {
  return "Welcome, " + person.title
}

console.log(welcomePerson(travis)) // Welcome, Proud cat owner

Stay Hungry, Stay Foolish 🙏

ES6 Basics: The Difference Between Var, Let, and Const

Travis Sanon — Fri, 06 Sep 2019 23:47:47 +0000

The Differences

var - The scope of “var” is limited to the “function” in which it's defined. If it's defined outside of any function, the scope of the variable is global scope.

Lexical Scope: Function
Can be re-assigned
Initialization: undefined

let - The scope of “let” is limited to the “block” defined by curly braces.

Lexical Scope: Block
Can be re-assigned
Initialization: none

const - The scope of “const” is the same as "let". Additionally, a variable defined with const can't be re-assigned.

Lexical Scope: Block
Cannot be re-assigned (can be mutated )
Initialization: none

Variable Declarations

You can intentionally declare your variables within a specific scope.

We can do it within global scope:

var x
console.log(x) // undefined

// (When a `var` gets declared without a value, it defaults to `undefined`)

We can do it within function scope:

function marco() {
  var x
  console.log(x)
}

marco() // undefined

And we can do it within block scope:

function marco() {
  if (true) {
    var x
    console.log(x)
  }
}

marco() // undefined

If we declare var x in both the global scope and a function's scope, everything is fine.

var x = "outside"

function marco() {
  var x = "inside"
  console.log(x) // "inside"
}

marco()
console.log(x) // "outside"

But what if we change the var x declaration inside the function into a re-assignment?

var x = "outside"

function marco() {
  x = "inside"
  console.log(x) // "inside"
}

marco()
console.log(x) // "inside"

oops.

var x outside of the function will get overwritten by the re-assignment inside the function if we remove var from the inside variable. We need to specify that x is supposed to be scoped only in function marco(), or else this will happen.

Function Scope

In JavaScript, you limit the scope of a variable by defining it within a function. This is called function scope.

function marco() {
  var text = "it works"
  console.log(text) // "it works"
}

marco()
console.log(text) // nothing 🤷‍♀

Since var is function scope, it only respects its scope when it's within a function. So that means the following will also work:

function marco() {
  var text = "it works"
  if (true) {
    var text = "no it doesn't"
  }
  console.log(text) // no it doesn't
}

marco()

Thats no good.

I created an if statement inside the function, added a var with the same name as the previous one and accidentally re-assigned its value. An obvious solution would be to use a different variable name, but lets use a better solution to avoid this situation all-together.

Block Scope

Unlike var, let & const are block scoped.

That means as long as the variable is created within a set of curly braces, it's scope will be limited to the block of code within those curly braces. This applies to functions, for loops, if statements, switch statements, and so on.

function marco() {
  let text = "it works"
  if (true) {
    let text = "let is neat!"
    console.log(text) // let is neat!
  }
  console.log(text) // it works
}

marco()

Hey, thats pretty good. We can create multiple variables within a function block without any issues. No accidental re-assignments, no confusion. You should still practice proper naming conventions though. Try not to name two variables the same name if they're in the same function scope.

Thou Shall Not Re-Assign

const will not let you re-assign variables.

const marco = "polo"

marco = "solo" // Hey, thats illegal

It isn't entirely immutable though. You can mutate variables declared with const.

Array Mutation

const arr = [1]

arr.push(2)

console.log(arr) // [1, 2]

Object Mutation

const obj = {
  saying: "marco",
}

obj.saying = "polo"

console.log(obj.saying) // polo

Let & Const Hoisting

All three types of variables (var, let and const) are hoisted. Hoisting means that variables are moved to the top of their scope before the code executes.

Note: All variables are "hoisted"

Unlike var, let and const declarations are not initialized to anything.

var is initialized to undefined.

console.log(a) // undefined
console.log(b) // Error: That's Illegal

var a = 0
let b = 0

Note how the logs do not output what were inside the variables we declared. Heres how the interpreter executed it:

var a
let b

console.log(a) // undefined
console.log(b) // Error: That's Illegal

a = 0
b = 0

The interpreter hoisted the variable declarations to the top of the scope, but the variable was not assigned to 0 yet until the interpreter got to that point.

Using let and const are nice because if you get into a situation where you call a variable before you declared it, you would get a clear Uncaught ReferenceError: b is not defined, instead of a silent undefined.

Stay Hungry, Stay Foolish 🙏