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

Дата публикации: 2018-06-20

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

// api.model.ts

export interface Customer {

id: number;

}

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

// использование интерфейсов

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

// api.model.ts

namespace ApiModel {

export interface Customer {

id: number;

}

export interface User {

id: number;

isActive: boolean;

}

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

// использование интерфейсов

export class MyComponent {

cust: ApiModel.Customer;

}

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

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

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

// api.v2.model.ts

namespace ApiModel {

export interface Order {

id: number;

total: number;

}

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

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

// использование интерфейсов с тем же пространством имен, но другими файлами

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

// api.model.d.ts

// вам не нужно экспортировать интерфейс в d-файл

interface Customer {

id: number;

}

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

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

// использование интерфейсов d-файла

export class MyComponent {

cust: Customer;

}

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

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

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

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

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

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

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

// api.model.ts

export interface Customer {

id: number;

age: number;

}

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

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

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

// 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' }; // ошибка не выдается, потому что все поля являются необязательными
    }
}

// используем интерфейс, но делаем все его поля необязательными

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

if (false) {

console.log('x');

}

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

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

if (false) {

// @ts-ignore

console.log('x');

}

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

Заключение

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

Автор: Jecelyn Yeen

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

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

Метки: Angular