content: add hello world sample post with code demos
This commit is contained in:
58
content/posts/hello-world.mdx
Normal file
58
content/posts/hello-world.mdx
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
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
|
||||
Reference in New Issue
Block a user