Javascript is disabled which is ok, but some features may not work properly. TypeScript: A beginner's guide with emojis πŸ€— TypeScript: A beginner’s guide with emojis πŸ€— | Fredy.dev A blog about programming

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

Posted on December 7, 2022.

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; // πŸ“¦

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

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";             // πŸ“ƒ

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

There are typed arrays

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

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

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

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

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

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] );                 //  🟦

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

Twitter