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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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