DEV Community

15 Advanced TypeScript Tips for Development

Lakshmanan Arumugam on July 14, 2023

1.Optional Chaining (?.): Optional chaining allows you to safely access nested properties or methods without worrying about null or undefined value...

Read full post

Vıɔk A Hıƃnıʇɐ C. • Jul 15 '23

Hey bro, great post!!
A small observation. For point 8 you can use the Partial Type like this:

interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Partial<User>;

const partialUser: PartialUser = {
  name: "Nikola Tesla",
  email: "nikola@teslaxcorp.com"
};

Even, add new properties, for example:

type MyOwnUser = Partial<User> & { age: number };

const ownUser: MyOwnUser = {
  name: "Nikola Tesla",
  email: "nikola@teslaxcorp.com",
  age: 27
};

Devstories Playground • Aug 3 '23

Samuel Braun • Jul 16 '23 • Edited

Another one I enjoy quiet often is the const assertion. With them you can make stuff readonly outside of class members. For example:

With as const:

// Type '"hello"'
let x = "hello" as const;

// Type 'readonly [10, 20]'
let y = [10, 20] as const;

// Type '{ readonly text: "hello" }'
let z = { text: "hello" } as const;

Without as const:

// Type 'string'
let x = "hello";

// Type 'number[]'
let y = [10, 20];

// Type '{ text: string }'
let z = { text: "hello" };

Jimmy • Jul 16 '23

Hey 👋 Nice post 😉

An improvement for point 3 :

let userInput: unknown
userInput = "Hello World"
const strLength = (userInput as string).length;
console.log(strLength); // Output: 11

Most of the time, when we create something with unknown it's because you don't know how to provide. In your case, you specify a string value that could be confusing for some beginner developers.

What do you think ? 🙂

AlgoT • Jul 24 '23

You should avoid type assertion as much as possible. You're basically telling typescript to ignore itself and listen to you instead.

Instead of type assertion, use typeguards. You can even make a function to narrow down the type:

export function isString(param: unknown): param is string {
  return typeof param === 'string';
}

const userInput: unknown = 'Hello World';

if (isString(userInput)) {
  console.log(userInput); 
}

dackd • Jul 18 '23

in the optional chaining
const invalidCode = user.address?.postalCode?.toLowerCase(); console.log(invalidCode); // Output: undefined
not log undefined

Florencesally22 • Dec 27 '23

Unlock the full potential of TypeScript with these Advanced Tips for Development! 🚀 Master conditional and mapped types for precise logic, wield template literals for flexible string manipulations, and harness polymorphic types for fluent API chaining. Elevate your coding game with distributive conditional types for seamless union handling. Dive deep into these advanced techniques, and propel your projects to new heights of scalability, maintainability, and efficiency. Stay ahead in the dynamic world of web development! #TypeScriptTips #WebDevelopment