DEV Community: Amir Yusupov

How to write better Typescript code? 10 advanced tips

Amir Yusupov — Tue, 20 Aug 2024 16:18:22 +0000

In this article, we’re going to dive into 10 advanced tips to elevate your TypeScript coding skills. These tips go beyond the basics, offering insights and techniques to help you write more efficient, maintainable, and type-safe code.

#1 Optional Chaining (?.)

Optional chaining allows you to safely access nested properties or methods without worrying about null or undefined values. It short-circuits the evaluation if any intermediate property is null or undefined, preventing runtime errors.

const user = {
  name: 'Piotr',
  address: {
    city: 'Warsaw',
    postalCode: '00-240'
  }
};
const postalCode = user.address?.postalCode;
console.log(postalCode); // 00-240
const invalidCode = user.address?.postalCode?.toLowerCase();
console.log(invalidCode); // Output: undefined

This feature simplifies your code by reducing the need for repetitive null checks.

#2 Use Mapped Types for Transformation

Mapped types allow you to create new types by transforming properties of existing types. They are especially useful for creating utility types like Readonly or Partial.

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

type Partial<T> = {
  [P in keyof T]?: T[P];
};

This approach ensures that you can enforce specific constraints on types dynamically, making your type definitions more flexible and reusable.

#3 Utility Types

TypeScript provides several built-in utility types to assist with common type transformations. These types help reduce boilerplate and make your code more concise.

Partial: Makes all properties in a type optional.
Required: Makes all properties required.
Readonly: Marks all properties as readonly.
Pick: Constructs a type by picking a set of properties from another type.

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

type PartialUser = Partial<User>; // All properties are optional
type RequiredUser = Required<User>; // All properties are required
type ReadonlyUser = Readonly<User>; // All properties are readonly
type PickedUser = Pick<User, 'id' | 'name'>; // Only 'id' and 'name' are included

These utility types streamline type manipulation, improving both code readability and maintainability.

#4 Index Signatures for Flexible Object Types

Index signatures allow you to define types for objects with dynamic keys. This is useful when you need to work with objects that may have varying keys.

interface StringMap {
  [key: string]: string;
}

const translations: StringMap = {
  hello: 'Hola',
  goodbye: 'Adiós'
};

Index signatures provide a way to enforce consistent value types while allowing flexibility with the object’s keys.

#5 Conditional Types for Type Logic

Conditional types enable you to create types that depend on a condition. They add logic to your type definitions, allowing for more dynamic and context-sensitive types.

type IsString<T> = T extends string ? 'Yes' : 'No';

type A = IsString<string>; // 'Yes'
type B = IsString<number>; // 'No'

This capability allows you to create more powerful and adaptable type systems, accommodating complex type relationships.

#6 Discriminated Unions for Type Safety

Discriminated unions are a pattern used to create type-safe unions by including a common property (discriminator) that helps TypeScript determine the exact type.

interface Dog {
  kind: 'dog';
  bark: () => void;
}

interface Cat {
  kind: 'cat';
  meow: () => void;
}
type Animal = Dog | Cat;
function handleAnimal(animal: Animal) {
  if (animal.kind === 'dog') {
    animal.bark();
  } else {
    animal.meow();
  }
}

Discriminated unions enhance type safety and make your code easier to reason about when dealing with multiple related types.

#7 Exhaustiveness Checking with never

TypeScript’s never type can be used to ensure exhaustive checks in your code, particularly in switch statements or complex conditional logic.

type Shape = 'circle' | 'square';

function getArea(shape: Shape) {
  switch (shape) {
    case 'circle':
      return Math.PI * 1 * 1;
    case 'square':
      return 1 * 1;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

This pattern helps catch any unhandled cases during compilation, ensuring that your code covers all possible scenarios.

#8 Type Guards for Runtime Type Checking

Type guards allow you to narrow down types at runtime. This is useful when working with union types, enabling you to safely access properties or methods that are specific to one type.

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

function printValue(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

Using type guards ensures that your code handles different types appropriately, reducing the risk of runtime errors.

#9 Inferred Types for Cleaner Code

While explicit types are important, there are cases where letting TypeScript infer types can lead to cleaner code. Inferred types reduce redundancy and can make your code more concise.

const add = (a: number, b: number) => a + b;

const result = add(2, 3); // TypeScript infers the type of 'result' as number

Use type inference wisely to strike a balance between clarity and conciseness in your code.

#10 Advanced Generics for Reusable Functions

Generics in TypeScript are powerful tools that enable you to create reusable and type-safe functions. Advanced use of generics can make your code more flexible and adaptable to different scenarios.

function identity<T>(value: T): T {
  return value;
}

const numberIdentity = identity(42); // Type is number
const stringIdentity = identity('TypeScript'); // Type is string

Advanced generics allow you to write functions that work across a variety of types while maintaining type safety, which is particularly useful in libraries and frameworks.

So, that’s all what I wanted to write.

Happy coding!

The Future of JavaScript Frameworks: What Should You Learn? React, Angular or Vue?

Amir Yusupov — Thu, 15 Aug 2024 06:14:42 +0000

JavaScript frameworks have transformed web development, providing developers with powerful tools to build dynamic, responsive, and user-friendly applications. React, Angular, and Vue have emerged as the top three frameworks, each with a loyal following and unique strengths. But as technology advances and the web development landscape evolves, a pressing question arises: which framework is worth learning now, and which will thrive in the future?

1. React: The Unstoppable Force

React has been a game-changer in the web development world since its release by Facebook in 2013. It’s known for its flexibility, component-based architecture, and extensive ecosystem. React’s virtual DOM and the vast array of libraries and tools that support it have made it the go-to choice for many developers.

Why React Still Dominates:

Job Market: React skills are highly sought after, with a plethora of job opportunities across various industries.
Future-Proofing: Facebook’s ongoing investment in React, coupled with its adaptability to emerging trends like server-side rendering (SSR) and static site generation (SSG), ensures that React will remain relevant.

2. Angular: The Comprehensive Solution

Angular, developed by Google, is a comprehensive framework that offers a complete solution for building large-scale, enterprise-level applications. Angular’s strong typing with TypeScript, two-way data binding, and dependency injection make it a powerful tool for developers who need a robust and scalable framework.

Why Angular Still Matters:

Enterprise Adoption: Angular is widely adopted by large organizations and enterprises, making it a valuable skill for developers aiming to work on large-scale projects.
Full-Fledged Framework: Unlike React, which is more of a library, Angular offers a complete framework with built-in tools for routing, state management, and form handling.

3. Vue: The Rising Star

Vue.js has been gaining traction since its release in 2014 by Evan You. Vue is celebrated for its simplicity, ease of integration, and flexibility. It offers a progressive framework that can be incrementally adopted, making it a favorite for both small projects and large-scale applications.

Why Vue is Gaining Popularity:

Simplicity and Flexibility: Vue’s gentle learning curve and flexibility make it accessible to beginners and powerful for experts.
Adoption in Asia: Vue has seen significant adoption in regions like Asia, particularly in China, where it’s used by major companies like Alibaba and Xiaomi.

4. Which Framework Is Worth Learning Now?

Choosing the right framework to learn depends on your career goals, the type of projects you want to work on, and the industry you’re targeting:

For Angular: If You’re Targeting Large Enterprises: Angular is a solid choice due to its comprehensive nature and strong adoption in enterprise environments.
For React: If You Want Maximum Flexibility and Job Opportunities: React remains the most versatile and widely used framework, making it the best choice for developers looking for broad opportunities.
For Vue: If You’re Looking for a Balance Between Simplicity and Power: Vue is an excellent choice for developers who want a gentle learning curve with the ability to scale as needed. It’s particularly popular among startups and small to medium-sized projects.

Will AI take over Web Development Jobs?

Amir Yusupov — Fri, 09 Aug 2024 19:42:14 +0000

AI is becoming increasingly capable of performing tasks that were once considered exclusive to human developers. Tools powered by AI can now automate coding, design layouts, optimize performance and even generate contents. However, while AI can handle repetitive and straightforward things, it is unlikely to completely replace web developers for several reasons:

1. Complexity of human creativity and problem-solving:

AI excels at performing tasks that are well-designed and repetitive, but web development often involves creativity, critical thinking, and problem solving areas where humans have a distinct advantage. Designing user experience, understanding client needs, and creating innovative solutions require a level of intuition and creativity that AI currently cannot replicate

2. Interperonal communication and collaboration:

Web development is not just about coding; it also involves collaborating with clients, designers and other stakeholders. Effective communication, understanding client goals, and translating them into functional designs are tasks that require human interaction and emotional intellegence, areas where AI is still limited.

3. Ethics, Accessibility, and Cultural sensitivity:

Building websites that are ethical, accessible, and culturally sensitive requires a deep understanding of human values, diversity and societal norms. AI might assist in these areas, but human judgement and empathy are crucial for ensuring that web applications are inclusive and respectful.

Conclusion: It's true that one day AI will take over developer jobs, but not in our generation, so don't worry.

Web development

Amir Yusupov — Tue, 06 Aug 2024 15:17:47 +0000

Web development refers to the creation and maintenance of websites and web applications that run on the internet. It can be broadly categorized into three main areas: front-end, back-end, and full-stack development.

Front-end development focuses on the client side of web development. It involves creating the visual aspect of a web-site or web application that users interact with directly. This includes: HTML, CSS, Javascript, etc.
Example: When you visit a website and see a well-designed page with images, text, and buttons that respond to your actions, you are interacting with the front end.
Back-end development focuses on the server side of web development. It involves managing the server, database, and application logic that power the front end. Common server-side language include Node.js, Python, Ruby, PHP and Java.
Example: When you submit a form on a website and the data is stored in a database or processed by a server, you are interacting with the back end.
Full-stack development involves working on both the front end and back end of a web application. A full stack developer has knowledge and skills in both areas and can build complete web application from start to finish.

The Web Development Process

The process of web development typically involves several stages:

Planning and Research: Defining the goals and features of a website.
Design: Creating prototypes to visualize the layout and user experience.
Development: Writing code to build front end and back end of a website.
Testing: Ensuring that the website works correctly.
Deployment: Launching the website to a web server.
Maintenance and Updates: Continuously improving and updating the website.

Happy coding!