TypeScript Basics

What is TypeScript?

www.luv2code.com © luv2code LLC

What is TypeScript?
• Language developed by Microsoft in 2012

www.luv2code.com © luv2code LLC

What is TypeScript?
• Language developed by Microsoft in 2012

• Free and open-source

www.luv2code.com © luv2code LLC

What is TypeScript?
• Language developed by Microsoft in 2012

• Free and open-source

• Provides static typing support to JavaScript

www.luv2code.com © luv2code LLC

What is TypeScript?
• Language developed by Microsoft in 2012

• Free and open-source

• Provides static typing support to JavaScript

• Helps with IDE support: code completion and debugging

www.luv2code.com © luv2code LLC

What is TypeScript?
• Language developed by Microsoft in 2012

• Free and open-source

• Provides static typing support to JavaScript

• Helps with IDE support: code completion and debugging

• Add support for object-oriented programming

www.luv2code.com © luv2code LLC

What is TypeScript?
• Language developed by Microsoft in 2012

• Free and open-source

• Provides static typing support to JavaScript

• Helps with IDE support: code completion and debugging

• Add support for object-oriented programming

• Classes, objects, inheritance, interfaces, etc …

www.luv2code.com © luv2code LLC

What is TypeScript?
• Language developed by Microsoft in 2012

• Free and open-source

www.typescriptlang.org

• Provides static typing support to JavaScript

• Helps with IDE support: code completion and debugging

• Add support for object-oriented programming

• Classes, objects, inheritance, interfaces, etc …

www.luv2code.com © luv2code LLC

Angular Development

www.luv2code.com © luv2code LLC

Angular Development
• For Angular development, we can develop using various languages

www.luv2code.com © luv2code LLC

Angular Development
• For Angular development, we can develop using various languages

• JavaScript: extremely popular programming language

www.luv2code.com © luv2code LLC

Angular Development
• For Angular development, we can develop using various languages

• JavaScript: extremely popular programming language

• ECMAScript: standardized version of JavaScript (ES6, ES9, …)

www.luv2code.com © luv2code LLC

Angular Development
• For Angular development, we can develop using various languages

• JavaScript: extremely popular programming language

• ECMAScript: standardized version of JavaScript (ES6, ES9, …)

• TypeScript: adds optional types to JavaScript

www.luv2code.com © luv2code LLC

Angular Development
• For Angular development, we can develop using various languages

• JavaScript: extremely popular programming language

• ECMAScript: standardized version of JavaScript (ES6, ES9, …)

• TypeScript: adds optional types to JavaScript

• Other languages such as Dart, etc …

www.luv2code.com © luv2code LLC

Angular Development
• For Angular development, we can develop using various languages

• JavaScript: extremely popular programming language

• ECMAScript: standardized version of JavaScript (ES6, ES9, …)

• TypeScript: adds optional types to JavaScript

• Other languages such as Dart, etc …

• TypeScript is the most popular language for Angular development

www.luv2code.com © luv2code LLC

Relationships

www.luv2code.com © luv2code LLC

Relationships
• TypeScript is a superset of JavaScript and ECMAScript

www.luv2code.com © luv2code LLC

Relationships
• TypeScript is a superset of JavaScript and ECMAScript

JavaScript

www.luv2code.com © luv2code LLC

Relationships
• TypeScript is a superset of JavaScript and ECMAScript

ECMAScript
JavaScript

www.luv2code.com © luv2code LLC

Relationships
• TypeScript is a superset of JavaScript and ECMAScript

TypeScript
ECMAScript
JavaScript

www.luv2code.com © luv2code LLC

TypeScript

www.luv2code.com © luv2code LLC

TypeScript
• FAQ: Why do most Angular developers use TypeScript?

www.luv2code.com © luv2code LLC

TypeScript
• FAQ: Why do most Angular developers use TypeScript?

• Strongly-typed language with compile time checking and IDE support

www.luv2code.com © luv2code LLC

TypeScript
• FAQ: Why do most Angular developers use TypeScript?

• Strongly-typed language with compile time checking and IDE support

• Increased developer productivity and efficiency

www.luv2code.com © luv2code LLC

TypeScript
• FAQ: Why do most Angular developers use TypeScript?

• Strongly-typed language with compile time checking and IDE support

• Increased developer productivity and efficiency

• The Angular framework is internally developed using TypeScript

www.luv2code.com © luv2code LLC

TypeScript
• FAQ: Why do most Angular developers use TypeScript?

• Strongly-typed language with compile time checking and IDE support

• Increased developer productivity and efficiency

• The Angular framework is internally developed using TypeScript

• Docs, online blogs and tutorials use TypeScript for coding examples

www.luv2code.com © luv2code LLC

Practical Results

www.luv2code.com
Practical Results
• Introduction to TypeScript development

www.luv2code.com
Practical Results
• Introduction to TypeScript development

• Not an A to Z reference

www.luv2code.com
Practical Results
• Introduction to TypeScript development

• Not an A to Z reference

• For complete reference, see TypeScript Documentation

www.luv2code.com
Practical Results
• Introduction to TypeScript development

• Not an A to Z reference

• For complete reference, see TypeScript Documentation

www.typescriptlang.org

www.luv2code.com
Development Process Step-
B y -S
tep

www.luv2code.com © luv2code LLC

Development Process Step-
B y -S
tep

1. Create TypeScript code

www.luv2code.com © luv2code LLC

Development Process Step-
B y -S
tep

1. Create TypeScript code

2. Compile the code

www.luv2code.com © luv2code LLC

Development Process Step-
B y -S
tep

1. Create TypeScript code

2. Compile the code

3. Run the code

www.luv2code.com © luv2code LLC

Step 1: Create the TypeScript code

www.luv2code.com © luv2code LLC

Step 1: Create the TypeScript code

• TypeScript files have the .ts extension

www.luv2code.com © luv2code LLC

Step 1: Create the TypeScript code

• TypeScript files have the .ts extension

File: mydemo.ts

console.log("Hello World!");

www.luv2code.com © luv2code LLC

Step 2: Compile the Code

www.luv2code.com © luv2code LLC

Step 2: Compile the Code
• Web browsers do not understand TypeScript natively

www.luv2code.com © luv2code LLC

Step 2: Compile the Code
• Web browsers do not understand TypeScript natively

• Have to convert TypeScript code to JavaScript code

www.luv2code.com © luv2code LLC

Step 2: Compile the Code
• Web browsers do not understand TypeScript natively

• Have to convert TypeScript code to JavaScript code

• This is known as "transpiling"

www.luv2code.com © luv2code LLC

Step 2: Compile the Code
• Web browsers do not understand TypeScript natively

• Have to convert TypeScript code to JavaScript code

• This is known as "transpiling"

TypeScript

mydemo.ts

www.luv2code.com © luv2code LLC

Step 2: Compile the Code
• Web browsers do not understand TypeScript natively

• Have to convert TypeScript code to JavaScript code

• This is known as "transpiling"

TypeScript

mydemo.ts

www.luv2code.com © luv2code LLC

Step 2: Compile the Code
• Web browsers do not understand TypeScript natively

• Have to convert TypeScript code to JavaScript code

• This is known as "transpiling"

TypeScript JavaScript

mydemo.ts mydemo.js

www.luv2code.com © luv2code LLC

Step 2: Compile the Code (cont)

www.luv2code.com © luv2code LLC

Step 2: Compile the Code (cont)
• "Transpiling" is accomplished with the tsc command

www.luv2code.com © luv2code LLC

Step 2: Compile the Code (cont)
• "Transpiling" is accomplished with the tsc command

TypeScript JavaScript

mydemo.ts mydemo.js

www.luv2code.com © luv2code LLC

Step 2: Compile the Code (cont)
• "Transpiling" is accomplished with the tsc command

TypeScript JavaScript
tsc
mydemo.ts mydemo.js

www.luv2code.com © luv2code LLC

Step 2: Compile the Code (cont)
• "Transpiling" is accomplished with the tsc command

TypeScript JavaScript
tsc
mydemo.ts mydemo.js

C:\> tsc mydemo.ts

www.luv2code.com © luv2code LLC

Step 2: Compile the Code (cont)
• "Transpiling" is accomplished with the tsc command

TypeScript JavaScript
tsc
mydemo.ts mydemo.js

C:\> tsc mydemo.ts

www.luv2code.com © luv2code LLC

Step 3: Run the code

www.luv2code.com © luv2code LLC

Step 3: Run the code
• To run the JavaScript code, we use the node command

www.luv2code.com © luv2code LLC

Step 3: Run the code
• To run the JavaScript code, we use the node command

• Run the generated JavaScript code (.js file)

www.luv2code.com © luv2code LLC

Step 3: Run the code
• To run the JavaScript code, we use the node command

• Run the generated JavaScript code (.js file)

C:\> node mydemo.js

Hello World!

www.luv2code.com © luv2code LLC

Step 3: Run the code
• To run the JavaScript code, we use the node command

• Run the generated JavaScript code (.js file)

C:\> node mydemo.js

Hello World!
console.log("Hello World!");

www.luv2code.com © luv2code LLC

The Compiler is Your Friend

www.luv2code.com © luv2code LLC

The Compiler is Your Friend
• The compiler / IDE can find errors earlier at compilation time

www.luv2code.com © luv2code LLC

The Compiler is Your Friend
• The compiler / IDE can find errors earlier at compilation time

console.LOGSTUFF("Hello World!");

www.luv2code.com © luv2code LLC

The Compiler is Your Friend
• The compiler / IDE can find errors earlier at compilation time

console.LOGSTUFF("Hello World!"); Compile code using: tsc

C:\> tsc mydemo.ts

www.luv2code.com © luv2code LLC

The Compiler is Your Friend
• The compiler / IDE can find errors earlier at compilation time

console.LOGSTUFF("Hello World!"); Compile code using: tsc

C:\> tsc mydemo.ts

myhello.ts:1:9 - error TS2339: Property 'LOGSTUFF' does not exist on type 'Console'.

console.LOGSTUFF("Hello World!!");
~~~~~~~~

Found 1 error. Compilation error … much better

www.luv2code.com © luv2code LLC