DEV Community

Cover image for TypeScript: A beginner's guide with emojis πŸ€—
Fredy Sandoval
Fredy Sandoval

Posted on

4

TypeScript: A beginner's guide with emojis πŸ€—

Is basically telling what type something is.

For example let say we have a box,
and we want to tell people to only put eggs in the box.

let myBox; // πŸ“¦
Enter fullscreen mode Exit fullscreen mode

In real life we would put a sticker in the box saying "only eggs
please πŸ“„", in TypeScript we do the same, we add a "type" saying what something is and only accepts.

  Variable           Type            value
β”Œβ”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”     β”Œβ”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”      β”Œβ”€β”€β”€β”΄β”€β”€β”€β”
let myBox_πŸ“¦  :  onlyEggs_πŸ“„   =   "πŸ₯šπŸ₯šπŸ₯š";
               ↑                ↑
               Separator        Assignment operator
Enter fullscreen mode Exit fullscreen mode

There are 3 basic types in TypeScript

let isDone: boolean = false;              // πŸ˜€ or 😟

let lines: number   = 42;                 // 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣...

let name: string    = "John";             // πŸ“ƒ
Enter fullscreen mode Exit fullscreen mode

When it's impossible to know, there is the "Any" type

let notSure: any = 4;                     // πŸ€·β€β™‚οΈ Not sure

notSure = "I'm a string";                 // I can change it later

notSure = false;                         // maybe a boolean
Enter fullscreen mode Exit fullscreen mode

There are typed arrays

let list: number[] = [1, 2, 3];

// or with emojis:
        Only chickens please!
              β”Œβ”€β”΄β”€β” 
let chickens: πŸ”[] = [🐣,🐀,πŸ₯,πŸ“];
Enter fullscreen mode Exit fullscreen mode

Alternatively you can use Array which It's same as Type[]

let list: Array<number> = [1, 2, 3];

// or with emojis
let listOfChickens: Array<πŸ”> = [🐣,🐀,πŸ₯,πŸ“];
Enter fullscreen mode Exit fullscreen mode

Enumerations also known as enums:

enum Square { Red, Green, Blue };         // πŸŸ₯, 🟩, 🟦

// This can be understood better by seeing what Enumerations 
// are compiled to in JavaScript:
Square = { 
           0       :   'Red', 
           1       :   'Green', 
           2       :   'Blue', 
           Red     :    0, 
           Green   :    1, 
           Blue    :    2,
          };

// Now that you know is just an object, 
// you can access it by name or number.
console.log( Square.Green );              //  🟩
console.log( Square[2] );                 //  πŸŸ₯ 

// or in a more complex way
let c: Square = Square.Blue;
console.log( Square[c] );                 //  🟦
Enter fullscreen mode Exit fullscreen mode

Please Comment if you want to see more content like this!
πŸ‘‡ Follow me on Twitter

Twitter

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay