DEV Community

Cover image for 15 Advanced TypeScript Tips for Development

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...
Collapse
 
vickodev profile image
Vıɔk A Hıƃnıʇɐ C.

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"
};
Enter fullscreen mode Exit fullscreen mode

Even, add new properties, for example:

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

const ownUser: MyOwnUser = {
  name: "Nikola Tesla",
  email: "nikola@teslaxcorp.com",
  age: 27
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devstoriesplayground profile image
Devstories Playground

__

Collapse
 
samuel-braun profile image
Samuel Braun • 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;
Enter fullscreen mode Exit fullscreen mode

Without as const:

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

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

// Type '{ text: string }'
let z = { text: "hello" };
Enter fullscreen mode Exit fullscreen mode
Collapse
 
geminii profile image
Jimmy

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
Enter fullscreen mode Exit fullscreen mode

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 ? 🙂

Collapse
 
algot profile image
AlgoT

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); 
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
duck18 profile image
duck

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

not log undefined

Collapse
 
brense profile image
Rense Bakker

Nice list 👍 One thing I would add to the type guards example is the is operator: typescriptlang.org/docs/handbook/a...

Collapse
 
fricardi profile image
FRicardi

Great post! I've never looked a lot into decorators until now, would've never thought they were so straightforward to implement

Collapse
 
davidyaonz profile image
David Yao

It's true no matter how experienced you are, you indeed need some good tools to make you shine. Thanks for writing such a great article.

Collapse
 
funkybob profile image
Curtis Maloney

A useful list, and very well presented -- even if the first two are native Javascript features, not specific to TS :)

Collapse
 
mariosantosdev profile image
Mário Santos

Congratulations. It’s a great post and I believe it will help a lot of beginners!

Collapse
 
sainiabhishek profile image
Abhishek Saini

Hi bro, great post!

Collapse
 
catsarebetter profile image
Hide Shidara

I wonder if you can take these rules and lint your code with ChatGPT...