docs/typescript-starting-guide

Author: Technozamazing

src/content/resources/developer-resources/typescript/index.mdx

@@ -0,0 +1,45 @@
+---
+meta:
+  title: TypeScript 
+  description: A collection of beginner-friendly guides to get started with TypeScript.
+hero:
+  Hero: UndrawOnlineArticles
+tags:
+  - memberresources
+  - memberresourcesIndex
+order: 3
+---
+
+import LeadText from '@/components/content/LeadText';
+import TextContainer from '@/components/content/TextContainer';
+import FileIndex from '@/components/content/FileIndex';
+
+<TextContainer background="light" showBackToTopLink={false}>
+
+<LeadText>
+
+Many of our members want to learn TypeScript but are not sure where to start. <br />TypeScript adds static typing to JavaScript and improves code safety and readability. These guides are designed to help developers of all levels get started and understand TypeScript basics, from installation to interfaces and generics.
+
+</LeadText>
+
+</TextContainer>
+
+<TextContainer showBackToTopLink={false}>
+
+## Available Resources:
+
+<FileIndex subDirectory="resources/developer-resources/typescript" />
+
+</TextContainer>
+
+<TextContainer background="light">
+
+## Appreciation
+
+<LeadText>
+
+This guide was created by [**Roman Shrestha**](https://github.com/Technozamazing) as a contribution to the Virtual Coffee developer resources. <br /> Special thanks to the community for inspiring and supporting this effort!
+
+</LeadText>
+
+</TextContainer>

src/content/resources/developer-resources/typescript/typescript-getting-started.mdx

@@ -0,0 +1,262 @@
+---
+meta:
+  title: TypeScript Getting Started
+  description: A beginner-friendly, comprehensive guide to learning TypeScript from basics to intermediate concepts.
+hero:
+  Hero: UndrawOnlineArticles
+tags:
+  - memberresources
+order: 1
+---
+
+
+import TextContainer from '@/components/content/TextContainer';
+import LeadText from '@/components/content/LeadText';
+
+
+<TextContainer background="light" showBackToTopLink={false}>
+<LeadText>
+
+Welcome to the **TypeScript Getting Started** guide!  <br />This resource is designed for developers of all levels who want to learn TypeScript from scratch and gradually build up to using types, interfaces, and generics in real-world code patterns. By the end of this guide, you'll be confident writing type-safe JavaScript applications.
+
+</LeadText>
+</TextContainer>
+
+
+
+<TextContainer>
+
+## Table of Contents
+
+1. [Introduction](#introduction)  
+2. [Installation and Setup](#installation-and-setup)  
+3. [Basic Types](#basic-types)  
+4. [Interfaces](#interfaces)  
+5. [Generics](#generics)  
+6. [Examples from Virtual Coffee Code Patterns](#examples-from-virtual-coffee-code-patterns)  
+7. [Resources](#resources)
+
+</TextContainer>
+
+
+
+<TextContainer background="light">
+
+## Introduction
+
+TypeScript is a **superset of JavaScript** that adds **static types**. It helps catch errors early, improves code readability, and makes large codebases easier to maintain.  
+Even if you're new to JavaScript, TypeScript is beginner-friendly and gradually introduces type annotations without forcing drastic changes.
+
+</TextContainer>
+
+
+
+<TextContainer>
+
+## Installation and Setup
+
+You can install TypeScript globally or locally in a project.
+
+**Global installation:**
+
+```bash
+npm install -g typescript
+```
+
+**Local installation(recommended):**
+
+```bash
+npm install --save-dev typescript
+```
+
+<br />
+**Initialize a TypeScript project with:**
+
+```bash
+tsc --init  
+```
+This creates a `tsconfig.json` file to configure TypeScript options.
+
+<br />
+Optional: If you’re using Node.js directly, 
+you can install ts-node to run TypeScript files without precompiling:
+
+```bash
+npm install -g ts-node
+ts-node yourfile_name.ts
+```
+</TextContainer>
+
+<TextContainer background="light">
+## Basic Types
+
+**TypeScript introduces static typing for variables and function parameters.**
+
+```ts
+let username: string = "Roman";
+let age: number = 22;
+let isDeveloper: boolean = true;
+let anything: any = "can be anything";   // flexible but avoid overuse
+let unknownValue: unknown = "something unknown";
+```
+<br />
+**Functions with typed parameters and return types:**
+
+```ts
+function greet(name: string): string {
+  return `Hello, ${name}!`;
+}
+```
+
+<br />
+**Arrays and Tuples:**
+
+```ts
+let numbers: number[] = [1, 2, 3];
+let user: [string, number] = ["Roman", 22]; // tuple
+```
+
+<br />
+**Union Types:**
+```ts
+let id: string | number;
+id = "abc123";
+id = 456;
+``` 
+
+<br />
+**Enums:**
+
+```ts
+enum Role {
+  Admin,
+  Member,
+  Guest
+}
+let myRole: Role = Role.Member;
+```
+
+</TextContainer>
+
+
+
+<TextContainer>
+## Interfaces
+
+**Interfaces define the shape of objects and ensure consistent structures:**
+
+```ts
+interface User {
+  name: string;
+  age: number;
+  isDeveloper?: boolean; // optional
+}
+
+const roman: User = {
+  name: "Roman",
+  age: 25,
+};
+```
+
+<br />
+**Extending Interfaces:**
+
+```ts
+interface Employee extends User {
+  department: string;
+}
+
+const alice: Employee = {
+  name: "Alice",
+  age: 30,
+  department: "Engineering",
+};
+```
+
+<br />
+**Interfaces are also useful for typing React props:**
+
+```ts
+interface ButtonProps {
+  label: string;
+  onClick: () => void;
+}
+
+function Button({ label, onClick }: ButtonProps) {
+  return <button onClick={onClick}>{label}</button>;
+}
+```
+</TextContainer>
+
+
+
+<TextContainer background="light">
+## Generics
+Generics allow creating reusable components and functions while maintaining type safety:
+
+```ts
+function identity<T>(arg: T): T {
+  return arg;
+}
+
+const result = identity<number>(42);
+const text = identity<string>("Hello TypeScript");
+```
+
+<br />
+**Generic Interfaces:**
+
+```ts
+interface ApiResponse<T> {
+  data: T;
+  error?: string;
+}
+
+const response: ApiResponse<User> = {
+  data: { name: "Roman", age: 25 },
+};
+```
+`Generics are essential for building flexible, scalable code.`
+</TextContainer>
+
+
+
+<TextContainer>
+## Examples from Virtual Coffee Code Patterns
+`Here’s a small example adapted to Virtual Coffee’s code style:`
+
+```ts
+interface Member {
+  id: number;
+  name: string;
+  role: "Admin" | "Member";
+}
+
+const members: Member[] = [
+  { id: 1, name: "Roman", role: "Member" },
+  { id: 2, name: "Ayu", role: "Admin" },
+];
+
+// Function to get all admin members
+function getAdmins<T extends Member>(list: T[]): T[] {
+  return list.filter(member => member.role === "Admin");
+}
+
+const admins = getAdmins(members);
+console.log(admins);
+```
+This demonstrates interfaces, arrays, generics, and type-safe filtering.
+</TextContainer>
+
+
+
+<TextContainer background="light">
+## Resources
+- [TypeScript Official Documentation](https://www.typescriptlang.org/docs/)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
+- [Virtual Coffee Developer Resources](https://virtualcoffee.io/resources/developer-resources/)
+</TextContainer>
+
+<TextContainer style={{ textAlign: 'center', fontSize: '0.875rem', marginTop: '2rem' }}>
+  Made with ❤️ [Technozamazing](https://github.com/Technozamazing)
+</TextContainer>