17.07.2023 в 03:46

15 продвинутых советов по разработке на TypeScript

О TypeScript говорят, что он самый худший лучший язык программирования. Это может вызвать небольшие сложности при кодировании. Мы подготовили для вас несколько советов для облегчения вашей работы в будущем.

1. Опциональная последовательность (?.):

Опциональная цепочка позволяет безопасно обращаться к вложенным свойствам или методам, не беспокоясь о нулевых или неопределенных значениях. Она обрывает оценку, если какое-либо промежуточное свойство является null или неопределенным.

const user = {
  name: 'John',
  address: {
    city: 'New York',
    postalCode: '12345'
  }
};


const postalCode = user.address?.postalCode;
console.log(postalCode); // Output: 12345

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

2. Оператор нулевого коалесцирования (??):

Оператор нулевого слияния предоставляет значение по умолчанию, когда переменная является нулевой или неопределенной.

const name = null;
const defaultName = name ?? 'Unknown';
console.log(defaultName); // Output: Unknown

const age = 0;
const defaultAge = age ?? 18;
console.log(defaultAge); // Output: 0

3. Тип утверждения:

Тип assertion позволяет явно определить тип переменной, когда TypeScript не может его вывести.

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

4. Generics (Дженерики):

Generics позволяют создавать многократно используемые компоненты, которые могут работать с различными типами.

function reverse<T>(items: T[]): T[] {
  return items.reverse();
}

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = reverse(numbers);
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]

const strings = ['a', 'b', 'c'];
const reversedStrings = reverse(strings);
console.log(reversedStrings); // Output: ['c', 'b', 'a']

5. Оператор keyof:

Оператор keyof возвращает объединение всех известных имен свойств данного типа.

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

function getUserProperty(user: User, property: keyof User) {
  return user[property];
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com'
};

const name = getUserProperty(user, 'name');
console.log(name); // Output: John Doe

const invalidProperty = getUserProperty(user, 'age'); // Error: Argument of type '"age"' is not assignable to parameter of type '"id" | "name" | "email"'

6. Type Guard:

Защитники типа позволяют сузить тип переменной в условном блоке, основываясь на определенном условии.

function logMessage(message: string | number) {
  if (typeof message === 'string') {
    console.log('Message: ' + message.toUpperCase());
  } else {
    console.log('Value: ' + message.toFixed(2));
  }
}

logMessage('hello'); // Output: Message: HELLO
logMessage(3.14159); // Output: Value: 3.14

7. Типы пересечения:

Типы пересечения (Intersection type) позволяют объединять несколько типов в один, создавая новый тип, обладающий всеми свойствами и методами пересекающихся типов.

interface Loggable {
  log: () => void;
}

interface Serializable {
  serialize: () => string;
}

type Logger = Loggable & Serializable;

class ConsoleLogger implements Loggable {
  log() {
    console.log('Logging to console...');
  }
}

class FileLogger implements Loggable, Serializable {
  log() {
    console.log('Logging to file...');
  }

  serialize() {
    return 'Serialized log data';
  }
}

const logger1: Logger = new ConsoleLogger();
logger1.log(); // Output: Logging to console...

const logger2: Logger = new FileLogger();
logger2.log(); // Output: Logging to file...
console.log(logger2.serialize()); // Output: Serialized log data

8. Сопоставленные типы:

Сопоставленные типы (Mapped type) позволяют создавать новые типы путем преобразования свойств существующего типа.

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

type PartialUser = { [K in keyof User]?: User[K] };

const partialUser: PartialUser = {
  name: 'John Doe',
  email: 'john@example.com'
};

console.log(partialUser); // Output: { name: 'John Doe', email: 'john@example.com' }

9. Литеральные типы string и типы объединения:

TypeScript поддерживает литеральные типы string и union type, которые могут использоваться для определения конкретных наборов значений переменной.

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

function sendRequest(url: string, method: HttpMethod) {
  // send request logic here...
}

sendRequest('/users', 'GET');
sendRequest('/users', 'POST');
sendRequest('/users/1', 'PUT');
sendRequest('/users/1', 'DELETE');

10. Декораторы:

Декораторы позволяют изменять или расширять поведение классов, методов, свойств и других деклараций.

function uppercase(target: any, propertyKey: string) {
  let value = target[propertyKey];

  const getter = () => value;
  const setter = (newValue: string) => {
    value = newValue.toUpperCase();
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true
  });
}

class Person {
  @uppercase
  name: string;
}

const person = new Person();
person.name = 'John Doe';
console.log(person.name); // Output: JOHN DOE

11. Индексные сигнатуры:

Индексные сигнатуры (Index signature) позволяют определить динамические имена свойств и соответствующие им типы в интерфейсе или типе.

interface Dictionary {
  [key: string]: number;
}

const scores: Dictionary = {
  math: 90,
  science: 85,
  history: 95
};

console.log(scores['math']); // Output: 90
console.log(scores['english']); // Output: undefined

12. Вывод типов с условными утверждениями:

TypeScript может выводить типы на основе условных операторов, что позволяет создавать более лаконичный код.

function calculateTax(amount: number, isTaxable: boolean) {
  if (isTaxable) {
    return amount * 1.1; // Type: number
  } else {
    return amount; // Type: number
  }
}

const taxableAmount = calculateTax(100, true);
console.log(taxableAmount.toFixed(2)); // Output: 110.00

const nonTaxableAmount = calculateTax(100, false);
console.log(nonTaxableAmount.toFixed(2)); // Output: 100.00

13. Свойства readonly:

TypeScript предоставляет модификатор readonly для определения свойств, которые не могут быть изменены после инициализации.

class Circle {
  readonly radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.radius); // Output: 5

// circle.radius = 10; // Error: Cannot assign to 'radius' because it is a read-only property

console.log(circle.getArea()); // Output: 78.53981633974483

14. Псевдонимы типов:

Типы aliase позволяют создавать собственные имена для существующих типов, обеспечивая их семантическую значимость и улучшая читаемость кода.

type Point = {
  x: number;
  y: number;
};

type Shape = 'circle' | 'square' | 'triangle';

function draw(shape: Shape, position: Point) {
  console.log(`Drawing a ${shape} at (${position.x}, ${position.y})`);
}

const startPoint: Point = { x: 10, y: 20 };
draw('circle', startPoint); // Output: Drawing a circle at (10, 20)

15.Тип Guard с Class:

Тип защитники могут также использоваться с классами для сужения типа экземпляра объекта.

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark(); // Type: Dog
  } else {
    console.log('Unknown animal');
  }
}

const dog = new Dog('Buddy');
const animal = new Animal('Unknown');

makeSound(dog); // Output: Woof!
makeSound(animal); // Output: Unknown animal

Источник:

Comment button

#JavaScript #React #TypeScript

Войти на сайт