Scribd
Upload
7 views62 pages

02 Typescript Variables Overview

The document provides an overview of TypeScript variables, including basic types such as boolean, number, string, and any. It explains how to define variables using the 'let' keyword and highlights TypeScript's strong typing system, which enforces type safety. Additionally, it covers displaying output and using template strings for easier string concatenation.

Uploaded by

montadhr.social
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views62 pages

02 Typescript Variables Overview

The document provides an overview of TypeScript variables, including basic types such as boolean, number, string, and any. It explains how to define variables using the 'let' keyword and highlights TypeScript's strong typing system, which enforces type safety. Additionally, it covers displaying output and using template strings for easier string concatenation.

Uploaded by

montadhr.social
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 62

TypeScript Variables

Basic Types

www.luv2code.com © luv2code LLC


Basic Types
Type Description

www.luv2code.com © luv2code LLC


Basic Types
Type Description

boolean true/false values

www.luv2code.com © luv2code LLC


Basic Types
Type Description

boolean true/false values

number Supports integer and floating point numbers

www.luv2code.com © luv2code LLC


Basic Types
Type Description

boolean true/false values

number Supports integer and floating point numbers

string Text data. Enclosed in single or double quotes

www.luv2code.com © luv2code LLC


Basic Types
Type Description

boolean true/false values

number Supports integer and floating point numbers

string Text data. Enclosed in single or double quotes

any Supports "any" datatype assignment

www.luv2code.com © luv2code LLC


Basic Types
Type Description

boolean true/false values

number Supports integer and floating point numbers

string Text data. Enclosed in single or double quotes

any Supports "any" datatype assignment

Others … See details at www.typescriptlang.org

www.luv2code.com © luv2code LLC


Define Variables

www.luv2code.com © luv2code LLC


Define Variables
Syntax

let <variableName>: <type> = <initial value>;

www.luv2code.com © luv2code LLC


Define Variables
Syntax

let <variableName>: <type> = <initial value>;

Example

let found: boolean = true;

www.luv2code.com © luv2code LLC


Define Variables
Syntax

let <variableName>: <type> = <initial value>;

Example

let found: boolean = true;

www.luv2code.com © luv2code LLC


Define Variables
Syntax

let <variableName>: <type> = <initial value>;

Example

let found: boolean = true;

www.luv2code.com © luv2code LLC


Define Variables
Syntax

let <variableName>: <type> = <initial value>;

Example

let found: boolean = true;

www.luv2code.com © luv2code LLC


Examples

www.luv2code.com © luv2code LLC


Examples

let found: boolean = true;

www.luv2code.com © luv2code LLC


Examples true or false

let found: boolean = true;

www.luv2code.com © luv2code LLC


Examples

let found: boolean = true;

let grade: number = 88.6;

www.luv2code.com © luv2code LLC


Examples

let found: boolean = true; 73


64.5
let grade: number = 88.6; 100

www.luv2code.com © luv2code LLC


Examples

let found: boolean = true;

let grade: number = 88.6;

let firstName: string = "Anup";

www.luv2code.com © luv2code LLC


Examples

let found: boolean = true;

let grade: number = 88.6;

let firstName: string = "Anup";

let lastName: string = 'Kumar';

www.luv2code.com © luv2code LLC


Examples

let found: boolean = true;


Double-quotes
let grade: number = 88.6;

let firstName: string = "Anup";

let lastName: string = 'Kumar';

www.luv2code.com © luv2code LLC


Examples

let found: boolean = true;


Double-quotes
let grade: number = 88.6;

let firstName: string = "Anup";

let lastName: string = 'Kumar';

Single-quotes

www.luv2code.com © luv2code LLC


TypeScript: "let" keyword

www.luv2code.com © luv2code LLC


TypeScript: "let" keyword
• We are using the new TypeScript let keyword for variable declarations

www.luv2code.com © luv2code LLC


TypeScript: "let" keyword
• We are using the new TypeScript let keyword for variable declarations

• As opposed to using traditional JavaScript var keyword

www.luv2code.com © luv2code LLC


TypeScript: "let" keyword
• We are using the new TypeScript let keyword for variable declarations

• As opposed to using traditional JavaScript var keyword

• The JavaScript var keyword had a number of gotchas and pitfalls

www.luv2code.com © luv2code LLC


TypeScript: "let" keyword
• We are using the new TypeScript let keyword for variable declarations

• As opposed to using traditional JavaScript var keyword

• The JavaScript var keyword had a number of gotchas and pitfalls

• Scoping, capturing, shadowing etc

www.luv2code.com © luv2code LLC


TypeScript: "let" keyword
• We are using the new TypeScript let keyword for variable declarations

• As opposed to using traditional JavaScript var keyword

• The JavaScript var keyword had a number of gotchas and pitfalls

• Scoping, capturing, shadowing etc

• The new TypeScript let keyword helps to eliminate those issues

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

// this is okay ... we can assign to different values

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

// this is okay ... we can assign to different values

found = false;

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

// this is okay ... we can assign to different values

found = false;

This is ok

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

// this is okay ... we can assign to different values

found = false;
grade = 99;
firstName = 'Eric'; This is ok

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

// this is okay ... we can assign to different values

found = false;
grade = 99;
firstName = 'Eric'; This is ok
lastName = 'Noh';

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed
let found: boolean = true;
let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed
let found: boolean = true;
let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

// this will generate compilation errors ...

found = 0;
grade = "A";

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed
let found: boolean = true;
let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

// this will generate compilation errors ...

found = 0;
grade = "A";
Type mismatch

www.luv2code.com © luv2code LLC


TypeScript is Strongly Typed
let found: boolean = true;
let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

// this will generate compilation errors ...

found = 0;
grade = "A";
firstName = false; Type mismatch
lastName = 2099;

www.luv2code.com © luv2code LLC


Type: any

www.luv2code.com © luv2code LLC


Type: any

let myData: any = 50.0;

www.luv2code.com © luv2code LLC


Type: any

let myData: any = 50.0;

// we can assign different values of any type

www.luv2code.com © luv2code LLC


Type: any

let myData: any = 50.0;

// we can assign different values of any type

myData = false;
myData = 'Eric';
myData = 19;

www.luv2code.com © luv2code LLC


Type: any

let myData: any = 50.0;

// we can assign different values of any type

myData = false;
myData = 'Eric';
myData = 19; This is ok
But be careful …
you lose type-safety

www.luv2code.com © luv2code LLC


Displaying Output
File: sample-types.ts

www.luv2code.com © luv2code LLC


Displaying Output
File: sample-types.ts

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log(found);
console.log("The grade is " + grade);
console.log("Hi " + firstName + " " + lastName);

www.luv2code.com © luv2code LLC


Displaying Output
File: sample-types.ts

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log(found);
console.log("The grade is " + grade);
console.log("Hi " + firstName + " " + lastName);

www.luv2code.com © luv2code LLC


Displaying Output
File: sample-types.ts true
The grade is 88.6
let found: boolean = true; Hi Anup Kumar
let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log(found);
console.log("The grade is " + grade);
console.log("Hi " + firstName + " " + lastName);

www.luv2code.com © luv2code LLC


Run the App

www.luv2code.com © luv2code LLC


Run the App
File: sample-types.ts

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log(found);
console.log("The grade is " + grade);

console.log("Hi " + firstName + " " + lastName);

www.luv2code.com © luv2code LLC


Run the App Compile code using: tsc

File: sample-types.ts

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';
C:\> tsc sample-types.ts
console.log(found);
console.log("The grade is " + grade);

console.log("Hi " + firstName + " " + lastName);

www.luv2code.com © luv2code LLC


Run the App Compile code using: tsc Remember, tsc
generates a .js file
File: sample-types.ts

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';
C:\> tsc sample-types.ts
console.log(found);
console.log("The grade is " + grade);

console.log("Hi " + firstName + " " + lastName);

www.luv2code.com © luv2code LLC


Run the App Compile code using: tsc Remember, tsc
generates a .js file
File: sample-types.ts

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';
C:\> tsc sample-types.ts
console.log(found);
console.log("The grade is " + grade); C:\> node sample-types.js
console.log("Hi " + firstName + " " + lastName);

Run code using: node

www.luv2code.com © luv2code LLC


Run the App Compile code using: tsc Remember, tsc
generates a .js file
File: sample-types.ts

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';
C:\> tsc sample-types.ts
console.log(found);
console.log("The grade is " + grade); C:\> node sample-types.js
console.log("Hi " + firstName + " " + lastName);

Run code using: node Run the .js file

www.luv2code.com © luv2code LLC


Run the App
File: sample-types.ts

let found: boolean = true;


let grade: number = 88.6;
let firstName: string = "Anup";
let lastName: string = 'Kumar';
C:\> tsc sample-types.ts
console.log(found);
console.log("The grade is " + grade); C:\> node sample-types.js
console.log("Hi " + firstName + " " + lastName);
true
The grade is 88.6
Hi Anup Kumar

www.luv2code.com © luv2code LLC


Template Strings

www.luv2code.com © luv2code LLC


Template Strings
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log("Hi " + firstName + " " + lastName);

www.luv2code.com © luv2code LLC


Template Strings Concatenation could
become clunky
for long strings
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log("Hi " + firstName + " " + lastName);

www.luv2code.com © luv2code LLC


Template Strings Concatenation could
become clunky
for long strings
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log("Hi " + firstName + " " + lastName);

console.log(`Hi ${firstName} ${lastName}`);

www.luv2code.com © luv2code LLC


Template Strings Concatenation could
become clunky
for long strings
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log("Hi " + firstName + " " + lastName);

Use backticks: `
console.log(`Hi ${firstName} ${lastName}`); Reference variables with ${..}

www.luv2code.com © luv2code LLC


Template Strings Concatenation could
become clunky
for long strings
let firstName: string = "Anup";
let lastName: string = 'Kumar';

console.log("Hi " + firstName + " " + lastName);

Use backticks: `
console.log(`Hi ${firstName} ${lastName}`); Reference variables with ${..}

Useful for long strings with a lot of concatenation

www.luv2code.com © luv2code LLC

You might also like