JavaScript vs TypeScript - Side by Side Syntax and Code Comparison - #3 #JavaScriptVsTypeScript

#JavaScript #TypeScript #SyntaxComparison #CodeComparison, #JavaScriptVsTypeScript #TypeScriptTutorial #JavaScriptTutorial, #ProgrammingComparison #WebDevelopment #ProgrammingLanguages #Syntax #Comparison #TypeScriptVsJavaScript #DeveloperCommunity #CodeComparison #JavaScriptDevelopment #TypeScriptDevelopment #WebDev #CodingTutorial #SoftwareDevelopment

Here's a side-by-side comparison of JavaScript and TypeScript with additional descriptions for each code snippet:

1. Variable Declaration:
In JavaScript, variables can be declared using `var`. The type of `x` is implicitly inferred as any.
  JavaScript Code:
  var x = 5;

In TypeScript, you can explicitly specify the type of a variable using a colon (`:`) followed by the type.
 
  TypeScript Code:
  let x: number = 5;

2. Function Declaration:
In JavaScript, functions can be declared without specifying parameter types or return types.

JavaScript Code:
function add(a, b) {
   return a + b;
}

In TypeScript, you can specify parameter types and return types for functions.

TypeScript Code:
function add(a: number, b: number): number {
   return a + b;
}
3. Object Declaration:
In JavaScript, objects can be declared with key-value pairs. Types are not explicitly defined.

JavaScript Code:
var person = {
   name: "John",
   age: 30
};
In TypeScript, you can define the structure of an object using type annotations.

TypeScript Code :
let person: { name: string, age: number } = {
   name: "John",
   age: 30
};
4. Array Declaration:
In JavaScript arrays can hold values of different types and are not statically typed.

JavaScript Code:
var numbers = [1, 2, 3, 4, 5];

TypeScript allows you to specify the type of elements in an array.

TypeScript Code :
let numbers: number[] = [1, 2, 3, 4, 5];

5. Class Declaration:
Before ES6 : In JavaScript, before ES6 classes can be declared using functions, but there is no direct class syntax. After Introduced in ECMAScript 2015 (ES6) You can declare a class using the class keyword followed by the class name

JavaScript Code:
function Person(name, age) {
   this.name = name;
   this.age = age;
}
// Class Declaration in ES6
class Person {
   constructor(name, age) {
       this.name = name;
       this.age = age;
   }
   sayHello() {
       console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
   }
}

TypeScript introduces a class-based object-oriented programming paradigm with type annotations.
TypeScript Code:
class Person {
   name: string;
   age: number;

   constructor(name: string, age: number) {
       this.name = name;
       this.age = age;
   }
}

6. Type Declaration :
In JavaScript, variables can be declared without an initial value. Type annotations are not supported.

JavaScript Code:
var x: number;

In TypeScript, variables can be declared without an initial value, and types can be explicitly specified.

TypeScript Code:
let x: number;

7. Type Assertion:
JavaScript uses type assertion through angle-bracket syntax.

JavaScript Code:
var strLength = (string someValue).length;

TypeScript provides type assertion using both angle-bracket and `as` syntax.

TypeScript Code:
let strLength = (someValue as string).length;

8. Optional Parameter:
In JavaScript, function parameters are not required to be passed.

JavaScript Code:
function greet(name, age) {
   console.log(`Hello, ${name}, you are ${age} years old.`);
}

TypeScript allows you to specify optional parameters in functions using the `?` symbol.

TypeScript Code:
function greet(name: string, age?: number) {
   console.log(`Hello, ${name}, you are ${age || 'unknown'} years old.`);
}

These are just a few examples illustrating the differences in syntax and usage between JavaScript and TypeScript. TypeScript adds static typing, interfaces, enums, and other features on top of JavaScript, providing developers with more tools for building robust and maintainable applications.

Thank you for watching this video
EVERYDAY BE CODING

• #education
• #webdevelopment
• #programminglanguages
• #syntax
• #comparison
• #typescriptvsjavascript
• #developercommunity
• #codecomparison
• #javascriptdevelopment
• #typescriptdevelopment
• #webdev
• #codingtutorial
• #softwaredevelopment
• #javascript
• #typescript
• #syntaxcomparison
• #javascriptvstypescript
• #typescripttutorial
• #javascripttutorial
• #programmingcomparison