59 lines
1.3 KiB
Plaintext
59 lines
1.3 KiB
Plaintext
---
|
|
title: "Hello, World! Building Your First TypeScript App"
|
|
date: "2025-01-15"
|
|
excerpt: "A beginner-friendly introduction to TypeScript with practical examples and best practices."
|
|
---
|
|
|
|
Welcome to the blog! In this post, we'll explore TypeScript from the ground up.
|
|
|
|
## Why TypeScript?
|
|
|
|
TypeScript adds static typing to JavaScript, catching errors at compile time rather than at runtime. Here's a simple example:
|
|
|
|
```ts
|
|
function greet(name: string): string {
|
|
return `Hello, ${name}!`
|
|
}
|
|
|
|
console.log(greet("World"))
|
|
```
|
|
|
|
## Type Safety in Practice
|
|
|
|
Let's look at a more complex example with interfaces:
|
|
|
|
```ts
|
|
interface User {
|
|
id: number
|
|
name: string
|
|
email: string
|
|
role: "admin" | "user"
|
|
}
|
|
|
|
function createUser(data: Partial<User>): User {
|
|
return {
|
|
id: Math.random(),
|
|
name: data.name ?? "Anonymous",
|
|
email: data.email ?? "",
|
|
role: data.role ?? "user",
|
|
}
|
|
}
|
|
|
|
const user = createUser({ name: "Alice", email: "alice@example.com" })
|
|
```
|
|
|
|
## Key Concepts
|
|
|
|
- **Interfaces**: Define object shapes
|
|
- **Generics**: Create reusable components
|
|
- **Union types**: Handle multiple possible values
|
|
- **Type guards**: Narrow types at runtime
|
|
|
|
> "TypeScript is JavaScript with syntax for types." — TypeScript Handbook
|
|
|
|
## Next Steps
|
|
|
|
Check out our other posts for deep dives into:
|
|
- Mathematics with KaTeX
|
|
- Hybrid content with code and equations
|