The basic syntax of TypeScript is quite similar to JavaScript, with the addition of type annotations to specify the types of variables, function parameters, and return values. Below is an overview of the basic syntax elements in TypeScript:
1. Variables and Types:
Declaring Variables:
let myVar: number = 10; // Declaring a variable of type number
const myConst: string = "Hello"; // Declaring a constant of type string
Basic Data Types:
let age: number = 25; // Number
let name: string = "John"; // String
let isStudent: boolean = true; // Boolean
let scores: number[] = [90, 85, 70]; // Array of numbers
let fruits: Array<string> = ["Apple", "Banana", "Orange"]; // Array of strings
let tuple: [string, number] = ["John", 25]; // Tuple
2. Functions:
Function Declaration:
function add(x: number, y: number): number {
return x + y;
}
Function Expression:
const multiply = function(a: number, b: number): number {
return a * b;
}
Arrow Functions:
const greet = (name: string): string => {
return `Hello, ${name}!`;
}
3. Interfaces:
Declaring Interfaces:
interface Person {
name: string;
age: number;
}
let person: Person = {
name: "John",
age: 30
};
4. Classes:
Class Declaration:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound(): void {
console.log("Animal is making a sound.");
}
}
let dog = new Animal("Buddy");
dog.makeSound(); // Output: Animal is making a sound.
5. Type Assertions:
Asserting Types:
let value: any = "Hello";
let length: number = (value as string).length; // Using 'as' keyword
let length2: number = (<string>value).length; // Using angle-bracket syntax
6. Type Inference:
let num = 10; // TypeScript infers the type as number
let text = "Hello"; // TypeScript infers the type as string
7. Union Types:
let unionVar: string | number; // Variable can hold either string or number
unionVar = "Hello";
unionVar = 10;
8. Optional and Default Parameters:
function greet(name: string, message: string = "Hello"): void {
console.log(`${message}, ${name}!`);
}
greet("John"); // Output: Hello, John!
greet("Jane", "Hi"); // Output: Hi, Jane!
9. Null and Undefined:
let nullVar: null = null;
let undefinedVar: undefined = undefined;
10. Void:
function logMessage(message: string): void {
console.log(message);
}
Let's cover the basic syntax of TypeScript with understandable examples:
1. Variables and Types:
Declaring Variables:
let myVar: number = 10; // Declaring a variable of type number
const myConst: string = "Hello"; // Declaring a constant of type string
Basic Data Types:
let age: number = 25; // Number
let name: string = "John"; // String
let isStudent: boolean = true; // Boolean
let scores: number[] = [90, 85, 70]; // Array of numbers
let fruits: Array<string> = ["Apple", "Banana", "Orange"]; // Array of strings
let tuple: [string, number] = ["John", 25]; // Tuple
2. Functions:
Function Declaration:
function add(x: number, y: number): number {
return x + y;
}
Function Expression:
const multiply = function(a: number, b: number): number {
return a * b;
}
Arrow Functions:
const greet = (name: string): string => {
return `Hello, ${name}!`;
}
3. Interfaces:
Declaring Interfaces:
interface Person {
name: string;
age: number;
}
let person: Person = {
name: "John",
age: 30
};
4. Classes:
Class Declaration:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound(): void {
console.log("Animal is making a sound.");
}
}
let dog = new Animal("Buddy");
dog.makeSound(); // Output: Animal is making a sound.
5. Type Assertions:
Asserting Types:let value: any = "Hello"; let length: number = (value as string).length; // Using 'as' keyword let length2: number = (<string>value).length; // Using angle-bracket syntax
6. Type Inference:
let num = 10; // TypeScript infers the type as number
let text = "Hello"; // TypeScript infers the type as string
7. Union Types:
let unionVar: string | number; // Variable can hold either string or number
unionVar = "Hello";
unionVar = 10;
8. Optional and Default Parameters:
function greet(name: string, message: string = "Hello"): void {
console.log(`${message}, ${name}!`);
}
greet("John"); // Output: Hello, John!
greet("Jane", "Hi"); // Output: Hi, Jane!
9. Null and Undefined:
let nullVar: null = null;
let undefinedVar: undefined = undefined;
10. Void:
function logMessage(message: string): void {
console.log(message);
}
These are the foundational aspects of TypeScript syntax. Understanding these concepts will provide a solid basis for building more complex applications with TypeScript. Practice writing code examples and experimenting with different TypeScript features to reinforce your understanding.
0 Comments