How to Typescripting (Part 2)

Beginner guide for you to know about the basic syntax with typescript

What is Variable ?

A variable is a named space in the memory of your computer that stores values. in other words it acts as a container that hold a value in a program, so imagine it looks like a box containing things.

illustration of variable looks like

Variable declaration in Typescript

Declaring a variable in Typescript is putting a colon (:) after the variable name, so the structures to declaring the variable will be look like below

• Declaring a variable with the value and the data type in one statement.

var [variable-name]: [data-type] = value;
var message: string = "hello world";

• Declaring a variable with the data type

//this variable will be set to undefined
var [variable-name]: [data-type];
var message: string;

• Declaring a variable with the value

//this type will be set to the data type of assigned value
var [variable-name] = value;
var message = "hello world";

• Declaring a variable without value and type

//this type will be set to any and the value will be set to undefined
var [variable-name];
var message;

Data types in Typescript

Data types represents to check the validity of values that will be assigned to, before they being stored or manipulated in the program. This thing ensures that the code behaviour will become as expected. In other words, data types acts as a label container.

Illustration of variable data type looks

List of Typescript data types

list of data types

User defined types vs Built in types

Built in types are fundamental data types that defined by the programming language it self and they are independent components, on the other hand User defined types are created / defined by the user and composed of Built in types

User defined types example:

interface IUser {
  fullName: string;
  email: string;
  phoneNumber: string;
  isActive: boolean;
  amountMoney: number;
}
let user: IUser = {
  fullName: "John",
  email: "John@yyy.com",
  phoneNumber: "08123123123",
  isActive: true,
  amountMoney: 1000000,
}

Seems confusing for now, right ? Dont worry about it I’ll explain you about User defined types later 😅. For now, let’s focus in the Built in types.

1. String: it represents a sequence of characters, which means a string value either a sentece or a word. String value must be opened and closed with quoation mark (‘), double quoation mark (“) or backtick mark (`).

var fullName: string = 'John';
var fullName: string = "John";
var fullName: string = `John`;

2. Number: it represents a whole number (integer number) or a decimal number

var value: number = 1;
var value: number = 100;
var value: number = 1.58;

3. Boolean: it represents logical values between true and false

var isActive: boolean = true;
var isActive: boolean = false;

4. Void: it represents a non returning any value in function, so it means assume you create a function that will not return anything at all.

function(): void {
  //do something in here
}
var checkData: void = () => {
  //do something in here
}

5. Null: it represents an intentional empty value

var data = null;

6. Undefined: it represents an uninitialized, so it means we do not stored any value to a variable at all.

var data; //undefined

There’s something interesting between null and undefined. Undefined and null looks similiar but in fundamentally they are different. Undefined means a variable has been declared but not defined yet. Null is an assigned value which means nothing / empty.

💡 There’s many documentation recommend us to use null instead undefined if you create a variable that means nothing intentionally.

💡 before dive into typescript variable syntax ill explain a bit about console.log(). it used for print variable name in terminal or your browser.

console.log([variable-name]);
let name = "john";
console.log(name); // will print john

Typescript Variable Syntax

There are 3 variable syntax that we can use to create a variable.

1. Var: is already exists in ES5 (older javascript version) but there are some issues using var. Var scope is global (available to call in a whole file.ts) when a var variable declared outside a function, but if a var variable declared inside a function it only accessible within that function.

var a = "hi world";
function testFunction() { // this is the function scope
  var b = "hello world";
  console.log(b); //will print hello world
  console.log(a); //will print hi world
} // this is the function scope
console.log(b); //error: b is not defined

Var variable can be redeclared and re-assign / updated

var a = "test";
var a = "test";

and this works too.

var a = "test";
a = "test";

💡 in javascript / typescript code will be executed from the top of scope to the bottom of scope (executed from line 1 — until the bottom line), so it means your code will be executed sequentially.

💡 Hoisting is a JavaScript/Typescript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that if we do this:

console.log(a);
var a = "test"

the code above will be execute like this

var a;
console.log(a); // a is undefined
a = "test"

Var problem:

var value = "test";
var times = 4;

if (times > 3) { // block scope
  var value = "abc"; 
} // block scope
    
console.log(value) // "abc" not "test"

this problem will lead you to many bugs if you are not carefully write a var variable

2. Let: let is now preferred to create a variable rather than var because let solve some var issues. Let is a block scope, a block scope is a code bounded by curly braces symbol ({}).

let times = 4;
if (times > 3) { // block scope
  let value = "test";
  console.log(value);// "test"
} // block scope
console.log(value) // value is not defined

the var problem that being solved with let:

let value = "abc";
let times = 4;
if (times > 3) { // block scope
  let value = "test";
  console.log(value);// "test"
} // block scope
console.log(value) // "abc"

Let variable can be re-assign / updated but not re-declared

let a = "test";
let a = "test123"; // this will trigger an error in your terminal
let a = "test";
a = "test123"; // this will work

3. Const: variable means it is a constant value which mean you can’t re-assign or update the const variable value

const a = "test";
a = "test" // this will trigger an error

or this code below

const a = "test";
const a = "test"; // this will trigger an error

Beginner guide for write a simple code

Steps:

1. Open your visual studio code
2. Create new file with any file name you prefer (filename.ts) and save it
3. Write code below

simple typescript code

4. compile and execute it

💡 Make sure your current terminal folder path in the same folder path of your saved code when you compile with tsc and execute it with node (use cd command in your terminal/cmder to move around inside your computer folder/directory).

the result will be look like this

compile and execute result

This is the end of the explanation and the tutorial. Don’t worry too much for now as long as your code runs without any error.

ℹ️ I would like to recommend you to see more details in this site https://www.typescriptlang.org/ 😄