ReasonJun

Typescript : Type 본문

Frontend/Typescript

Typescript : Type

ReasonJun 2023. 6. 9. 11:57
728x90

In TypeScript, the type keyword is used to define custom types or type aliases. It allows you to create reusable type annotations to represent different shapes of data, making your code more expressive and easier to understand. Here are the main ways in which the type keyword is used in TypeScript:

  • Type Aliases: Type aliases allow you to create a new name for an existing type. They are helpful when you want to simplify complex or lengthy type annotations or when you want to create a semantic name for a type that you use frequently. Type aliases are declared using the type keyword. For example:
type Point = { x: number; y: number };

function distance(p1: Point, p2: Point): number {
  // Implementation
}

In the above code, Point is a type alias for an object with x and y properties. It can be used to annotate function parameters and return types.

  • Union Types: Union types allow you to specify that a value can have multiple possible types. It is denoted by using the | symbol between the types. For example:
type Status = 'success' | 'error' | 'pending';

function getStatus(): Status {
  // Implementation
}



type TypeA = string;
type TypeB = string | number | boolean;

function someFunc(param: TypeB): TypeA {
  switch (typeof param) {
    case 'string':
      return param.toUpperCase(); // string
    case 'number':
      return param.toFixed(2); // string
    default:
      //! return true error
      return 'boolean';
  }
}


type Usser =
  | {
      name: string;
      age: number;
      isValid: boolean;
    }
  | [string, number, boolean];

const userAa: Usser = {
  name: 'neo',
  age: 22,
  isValid: true,
};

const userBb: Usser = ['evan', 36, false];



// * interface and type

type TypeUser = { // There is an allocation operator. =
    name: string
    age: number
    isValid: boolean
}

interface interfaceUser {
    name: string 
    age: number
    isValid: boolean
}

// ?? : TypeUser, interfaceUser => Both possible
// There is no functional difference.
// However, recommend an interface made with Object Data.
const heropyy: ?? = {
    name: 'Heropy',
    age: 85,
    isValid: true
}

In this case, Status is a type alias that represents a value that can be either 'success', 'error', or 'pending'.

  • Intersection Types: Intersection types allow you to combine multiple types into a single type. It is denoted by using the & symbol between the types. For example:
type Person = { name: string };
type Employee = { id: number };

type EmployeeInfo = Person & Employee;

function getEmployeeInfo(): EmployeeInfo {
  // Implementation
}

In the above code, EmployeeInfo is an intersection type that combines the properties of Person and Employee. It represents an object that has both a name property of type string and an id property of type number.

  • Mapped Types: Mapped types allow you to transform the properties of an existing type to create a new type. You can apply various transformations, such as making properties optional, readonly, or nullable, based on a predefined pattern. For example:
type Person = {
  name: string;
  age: number;
};

type PartialPerson = { [K in keyof Person]?: Person[K] };

const partialPerson: PartialPerson = {
  name: 'John',
};

In this example, PartialPerson is a mapped type that transforms each property of Person to be optional using the ? modifier. It allows you to create an object with some or all properties of Person, but with optional values.

The type keyword in TypeScript provides flexibility and expressiveness in defining custom types that can be used throughout your codebase. It helps in improving type safety, code readability, and maintainability by providing meaningful abstractions and reusable type annotations.

728x90
Comments