Day 3 & 4: My TypeScript Journey
Hey Devs! Over the past two days, I’ve been diving deeper into TypeScript and exploring some exciting concepts. Here’s a quick recap of what I’ve learned:
1️⃣ Type Aliases: Simplifying code by creating custom types for better readability and reuse.
type User = {
id: number;
name: string;
};
const user: User = {
id: 1,
name: "John",
};
2️⃣ Type Assertion: Explicitly telling TypeScript how to treat a variable—it’s all about being precise with data.TypeScript provides two ways to write type assertions, which allow you to tell the compiler to treat a value as a specific type:
1. Angle Bracket Syntax
This uses <Type> before the value:
let cid: any = 1;
let customerId = <number>cid; // "cid" is treated as a number
Note: This syntax doesn’t work in
.tsxfiles because it conflicts with JSX.
2. as Syntax (Preferred)
This uses the as keyword after the value:
let cid: any = 1;
let customerId = cid as number; // "cid" is treated as a number
Key Notes:
- Type assertions don’t change the runtime value; they only affect how TypeScript understands the value during type-checking.
- Use type assertions when you’re confident about the type and want to bypass the compiler’s type inference.
3️⃣ Using Types in Functions: Ensuring my functions are safer by clearly defining parameter and return types.
function addNum(x:number,y:number): number{
return x + y
}
console.log(addNum(2, 4))
4️⃣ Void: Functions that don’t return anything—it’s great for logging or side effects!
function log(message:string | number):void{
console.log(message)
}
log('Hello, World!')
5️⃣ Interfaces: Structuring data more effectively, especially with optional and readonly properties.
interface Person{
readonly id:number
name:string
age?:number
}
const user1 : Person={
id:1,
name:'john'
}
// interface don't use or allow union
// interface Point = number | string
// const p1:Point = 1
// Only type Alias or type variables allows the use of union
type Point = number | string
const p1:Point = 1
// interface with functions
interface MathFunc{
(y:number, z:number) :number
}
const add : MathFunc = (y:number, z:number) => y + z
const sub : MathFunc = (y:number, z:number) => y - z
const resultAdd = add(2,3)
const resultSub = sub(9,3)
console.log(resultAdd, resultSub)
6️⃣ Classes: Building reusable blueprints for objects with private, public, and protected properties.
class Personal {
private id: number;
name: string;
age: number;
// class method: functions within a class
constructor(id: number, name: string, age:number) {
this.id = id;
this.name = name;
this.age = age;
}
}
const brad = new Personal(1, "Brad Simon", 20);
const ted = new Personal(2, "teddy jones", 20);
console.log(brad, ted);
7️⃣ Generics: Writing reusable, type-safe components—this one was a game-changer!
// Generics: basically used to build reuseable components
function getArray<T>(items:T[]):T[] {
return new Array().concat(items)
}
let numArray = getArray<number>([1,2,3,4])
let strArray = getArray<string>(['ben','try','grow','build'])
strArray.push('hey')
Weekend Plans 🎯
I also stumbled upon Exercism, a platform with TypeScript challenges, and I’m planning to test everything I’ve learned so far with some of their problems over the weekend. I think this will be a great way to consolidate my first week of learning and tackle real-world scenarios.
Community, I Need You! 🧠
If you’ve tried Exercism or have other resources/tips for sharpening my TypeScript skills, I’d love to hear your thoughts! Also, if you have advice on balancing TypeScript fundamentals with practical projects, I’m all ears.
Check out my wall for posts on my first two days of learning—let’s grow together! 💡
Top comments (1)