От автора: это 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.
