document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('.tab') as NodeListOf<HTMLButtonElement>;
const contents = document.querySelectorAll('.content') as NodeListOf<HTMLElement>;
tabs.forEach((tab, idx) => {
tab.addEventListener('click', () => {
contents.forEach(c => c.style.display = 'none');
contents[idx].style.display = 'block';
});
});
});Coding works best on desktop or with an external keyboard.
Implements tab navigation with type-safe event handling and dynamic content switching.
document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('.tab') as NodeListOf<HTMLButtonElement>;
const contents = document.querySelectorAll('.content') as NodeListOf<HTMLElement>;
tabs.forEach((tab, idx) => {
tab.addEventListener('click', () => {
contents.forEach(c => c.style.display = 'none');
contents[idx].style.display = 'block';
});
});
});TypeScript is a statically typed superset of JavaScript that enhances developer productivity, scalability, and reliability by adding static types, modern tooling, and advanced language features while compiling to plain JavaScript for any runtime.
Origin & Creator
Created by Microsoft under the leadership of Anders Hejlsberg (creator of C#), first released publicly in 2012. Initially invented to solve JavaScript scalability issues in large applications. Evolved through major versions adding classes, modules, generics, decorators, async/await support, strict mode, union types, mapped types, and powerful type inference.
Industrial Note
TypeScript dominates enterprise-scale frontend engineering, powering frameworks like Angular, Next.js, React, Vue, Bun, Deno, and many internal developer tools at companies such as Microsoft, Google, Airbnb, Shopify, Stripe, and Meta.