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; 
}

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Допустим, у вас есть еще один файл 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. Допустим, у вас есть интерфейс клиента, во время создания все поля обязательны, но во время обновления все поля являются необязательными. Вам нужно создать два интерфейса для обработки этого сценария?

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

// 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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree