Главная » Статьи » 3 полезных совета по TypeScript для Angular

3 полезных совета по TypeScript для Angular

3 полезных совета по TypeScript для Angular

От автора: это 3 совета, которые я нахожу довольно удобными при работе с TypeScript Angular: 1) устраните необходимость импорта интерфейсов; 2) сделайте все свойства интерфейсов необязательными; 3) прекратите выдавать мне ошибку, я знаю, что я делаю.

Хотя я обнаружила их при работе с приложением Angular, но все эти советы не относятся к Angular, а к TypeScript.

Устраните необходимости импорта интерфейсов

Мне нравятся интерфейсы. Тем не менее, мне не нравится импортировать их каждый раз. Хотя Visual Studio Code имеет функцию авто-импорта, мне не нравится, чтобы мои исходные файлы были «загрязнены» несколькими строками импорта — только для сильной типизации. Так, как мы делаем, это нормально.

// api.model.ts
export interface Customer { id: number; name: string;
} export interface User { id: number; isActive: boolean;
}
// использование интерфейсов
import { Customer, User } from './api.model'; // this line will grow longer if there's more interfaces used export class MyComponent { cust: Customer; }

Решение 1. Использование пространства имен

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

// api.model.ts
namespace ApiModel { export interface Customer { id: number; name: string; } export interface User { id: number; isActive: boolean; }
}
// использование интерфейсов
export class MyComponent { cust: ApiModel.Customer; }

Ок? Использование пространства имен также поможет вам лучше организовать и сгруппировать интерфейсы. Обратите внимание, что вы можете разделить пространство имен на несколько файлов.

Допустим, у вас есть еще один файл api.v2.model.ts. Вы добавляете новые интерфейсы, но хотите использовать одно и то же пространство имен.

// api.v2.model.ts
namespace ApiModel { export interface Order { id: number; total: number; }
}

Вы можете это сделать. Чтобы использовать вновь созданный интерфейс, просто используйте его, как в предыдущем примере.

// использование интерфейсов с тем же пространством имен, но другими файлами
export class MyComponent { cust: ApiModel.Customer; order: ApiModel.Order;
}

Здесь приведена подробная документация по пространству имен Typescript.

Решение 2. Использование d-файла

Другой способ устранить импорт — создать файл typescirpt с расширением .d.ts. «d» означает в Typcript файл декларации (подробнее здесь).

// api.model.d.ts
// вам не нужно экспортировать интерфейс в d-файл
interface Customer { id: number; name: string;
}

Используйте его как обычно, без необходимости импорта.

// использование интерфейсов d-файла
export class MyComponent { cust: Customer; }

Я рекомендую решение 1, а не решение 2, потому что:

d обычно используется для внешней, сторонней декларации

пространство имен позволяет нам лучше организовать файлы

Сделайте все свойства интерфейсов необязательными

Довольно часто бывает так, что вы используете один и тот же интерфейс для CRUD. Допустим, у вас есть интерфейс клиента, во время создания все поля обязательны, но во время обновления все поля являются необязательными. Вам нужно создать два интерфейса для обработки этого сценария?

Вот интерфейс

// api.model.ts
export interface Customer { id: number; name: string; age: number;
}

Решение: Используйте Partial

Partial — это тип, который делает свойства необязательными объектами. Объявление включено в d-файл lib.es5.d.ts по умолчанию.

// lib.es5.d.ts
type Partial<T> = { [P in keyof T]?: T[P];
};

Как мы можем это использовать? Посмотрите на этот код:

// используем интерфейс, но делаем все его поля необязательными
import { Customer } from './api.model'; export class MyComponent { cust: Partial<Customer>; / ngOninit() { this.cust = { name: 'jane' }; // ошибка не выдается, потому что все поля являются необязательными }
}

Если вы не нашли объявление Partial, вы можете сами создать d-файл (например, util.d.ts) и скопировать код в него приведенный выше код.

Перестаньте выдавать мне ошибку — я знаю, что я делаю

Поскольку Javascript преобразует Typescript, разработчика иногда могут очень раздражать выдаваемые ошибки Typescript. В определенных случаях вы просто захотите сказать Typescript: «Эй, я знаю, что делаю, пожалуйста, оставь меня в покое».

Решение. Используйте комментарий @ts-ignore.

Начиная с версии Typescript 2.6, вы можете сделать это, используя комментарий @ts-ignore для ограничения ошибок. Например, в приведенном ниже коде Typescript будет выдавать ошибку «Unreachable code detected»: Typescript

if (false) { console.log('x');
}

Вы можете заблокировать это, используя комментарий @ts-ignore

if (false) { // @ts-ignore console.log('x');
}

Конечно, я всегда рекомендую сначала попробовать исправить ошибку, прежде чем игнорировать ее!

Заключение

Typescript полезен для вашего (кода) здоровья. У него довольно приличная документация. Мне нравится то, что они выпускают подробный What’s new для каждой версии. Это проект с открытым исходным кодом на Github, если вы хотите внести свой вклад. Чем дольше я работаю с Typcript, тем больше я его люблю и ценю. Вот и все, успехов в кодировании!

Автор: Jecelyn Yeen

Источник: https://scotch.io/

Редакция: Команда webformyself.