2

Прошу помощи.. С объектами все довольно понятно нежели с function.

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

в первой строке ясно. <Т> это обычный параметр. Но как понять вторую строку ? (пример из документации) Для чего это делать? по сути мы сделали это же в объявлении function.

и второй момент касательно React это:

    interface Test {
     a: number;
   }

    const App: FunctionComponent<Test> = () => {
      return <div>123</div>;
    };

что тут вообще происходит? получаетя, что мы после App: описываем не тип function как в документации, а тип объекта ?

1 ответ 1

1

Первое выражение можно написать так:

function identity<T>(arg: T):T { 
    return arg 
}

let myIdentity: <T>(arg: T) => T
myIdentity = identity

Мы явно указываем, что myIdentity принимает и хранит ссылку на функцию принимающую в качестве аргумента T и возвращающую T: <T>(arg: T) => T.

Транслятор TypeScript сможет проверить, что соблюдается контракт использования функции и переменной:

myIdentity(10).toFixed() // ok 

myIdentity("hello").toFixed() // Ошибка: Property 'toFixed' does not exist on type '"hello"'. Did you mean 'fixed'? 

myIdentity = (str: string)=> str.length // Ошибка: Type '(str: string) => number' is not assignable to type '<T>(arg: T) => T'

FunctionComponent где-то должен быть определен в виде интефейса или typealias.

type FunctionComponent<P> = (props: P)=> ReactElement

В React в качестве компонента может быть использована функция:

var component = function(props) {
    return <div>123</div>;
}

Это корректное определение компонента, но тут нет проверки типов, мы можем переменной component присвоить все что угодно. TypeScript позволит проверить корректность присваиваемых значений:

let app: FunctionComponent<Test> = function (props) {
    return <div>123, {props.a}</div>; // ok
}

А это присвоение вызовет ошибку: Types of parameters 'props' and 'props' are incompatible:

let otherApp: FunctionComponent<Test> = function (props: string) {
    return <div>123, {props}</div>;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.