W3Schools Tryit Editor

// Best Practices with Type Inference Example
// This demonstrates JavaScript equivalents of TypeScript best practices

// 1. Let TypeScript infer simple types
let message = "Hello";  // In TypeScript: no need for explicit type here
console.log("Simple variable with obvious type:");
console.log(`message: ${message} (${typeof message})`);
console.log("");

// 2. Provide explicit types for function parameters
// In TypeScript: function formatName(firstName: string, lastName: string)
function formatName(firstName, lastName) {
  // Type checking would happen at compile time in TypeScript
  if (typeof firstName !== 'string' || typeof lastName !== 'string') {
    throw new TypeError("Both firstName and lastName must be strings");
  }
  return `${firstName} ${lastName}`;
}

console.log("Function with explicit parameter types:");
try {
  console.log(formatName("John", "Doe"));
  // Would error in TypeScript: console.log(formatName(123, "Doe"));
} catch (e) {
  console.log("Error caught:", e.message);
}
console.log("");

// 3. Consider adding return type annotations for complex functions
// In TypeScript: function processData(input: string[]): { count: number; items: string[] }
function processData(input) {
  return {
    count: input.length,
    items: input.map(item => item.trim())
  };
}

console.log("Function with complex return type:");
const result = processData(["  apple ", "banana  ", " orange"]);
console.log(result);
console.log("");

// 4. Use explicit type annotations for empty arrays or objects
// In TypeScript: const emptyArray: string[] = [];
const emptyArray = [];  // In JavaScript, this has no type constraint
console.log("Empty array (in TypeScript would need annotation):");
console.log(`emptyArray: ${emptyArray} (${typeof emptyArray})`);

// In TypeScript: const configOptions: Record<string, unknown> = {};
const configOptions = {};  // In JavaScript, this has no type constraint
console.log("Empty object (in TypeScript would need annotation):");
console.log(`configOptions: ${JSON.stringify(configOptions)} (${typeof configOptions})`);
console.log("");

// 5. Use type assertions when TypeScript cannot infer correctly
// In TypeScript: const canvas = document.getElementById("main-canvas") as HTMLCanvasElement;
console.log("Type assertion example (TypeScript only):");
console.log('const canvas = document.getElementById("main-canvas") as HTMLCanvasElement;');
console.log("In TypeScript, this tells the compiler that the element is specifically a canvas element");

Simple variable with obvious type:
message: Hello (string)

Function with explicit parameter types:
John Doe

Function with complex return type:
{ count: 3, items: [ 'apple', 'banana', 'orange' ] }

Empty array (in TypeScript would need annotation):
emptyArray:  (object)
Empty object (in TypeScript would need annotation):
configOptions: {} (object)

Type assertion example (TypeScript only):
const canvas = document.getElementById("main-canvas") as HTMLCanvasElement;
In TypeScript, this tells the compiler that the element is specifically a canvas element