среда, 14 июня 2017 г.

TypeScript Generics


// Джинерики используются ТОЛЬКО для создания интерфейсов функций и классов

// Джинерик для создания интерфейса функции

// Объявление функции джинерика
// <T> - тип первого аргумента функии
function identity<T>(arg: T): T {
    return arg;
}

// Вызов функции джинерика
// В функцию подставляется параметр с типом 'string'
let output = identity<string>("myString");  // мы указываем тип 'string'

// Присвоение функции джинерика переменной
let myIdentity: <T>(arg: T) => T = identity;

let myIdentity: <T>(arg: T) => T = function identity<T>(arg: T): T {
    return arg;
};

// Интерфейс для функции джинерика
interface GenericIdentityFunction {
    <T>(arg: T): T;
}
let myIdentity: GenericIdentityFunction = identity;

let myIdentity: GenericIdentityFunction = function identity<T>(arg: T): T {
    return arg;
};

// Интерфейс с общим глобальным параметром джинерика для всего интерфейса сразу
// Джинерик генерирует общий ТИП в интерфейсе
interface GenericIdentityFunction<T> {
    (arg: T): T;
}
// Функция с интерфейсом GenericIdentityFunction, в котором описываются параметры функции, и общим типом 'string'
let myIdentity: GenericIdentityFunction<string> = identity;

let myIdentity: GenericIdentityFunction<string> = function identity<T>(arg: T): T {
    return arg;
};

// Джинерик для создания интерфейса класса
// Джинерик генерирует общий ТИП в классе
class GenericNumber<T> {
    constructor () {}
    zeroValue: T;
    add (x: T, y: T): T {
        return x + y;
    }
}

let myGenericNumber: GenericNumber<number> = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add(1, 2);

// Уточнение джинерика класса
class Animal {
    numLegs: number;
}

class Lion extends Animal {
    name: string = 'Leo';
}

function createInstance<A extends Animal>(construct: {new(): A;}): A {
    return new construct();
}

createInstance(Lion).name;  // 'Leo'

// Джинерики в TSX вместе со стрелочными функциями

const func = <T extends number>(x: T) => {return x};

// Джинерики для указания типа компонента React

// Тип компонента
type SelectProps<T> = { items: T[] }

// Класс компоненте
class Select<T> extends React.Component<SelectProps<T>, any> { }

// Интерфейс для компонента
interface StringSelect {
    new () => Select<string>;
}

// Другой компонент
const StringSelect = (Select as StringSelect);

// Функция, возвращающая данный компонент
const form = () => {
    return (
        <StringSelect items={['a', 'b']} />
    );
};

// Интерфейс внутри типа

type UsersResponse = {
    users: {name: string; email: string;}[];
}

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

Отправить комментарий