Блог

Я думаю, что мне не хватает чего-то основного о том, как вы можете проверить достоверность значения с помощью amp;amp; в машинописном тексте.

Почему props.функция все еще не определена в test1 и должна быть проверена, как я сделал в test2.

 import React from "react";

interface PropsModel {
    label?: string
    function?: Function,
}

function test1(props: PropsModel) {
    return (
        <div>
            {props.label amp;amp; <p>{props.label}</p>} // props.label is checked for undefined
            {props.function amp;amp; <button onClick={() => props.function()}>Dummy button</button>} // props.function is not checked for undefined
        </div>
    )
}

function test2(props: PropsModel) {
    return (
        <div>
            {props.label amp;amp; <p>{props.label}</p>} // props.label is checked for undefined
            {props.function amp;amp; <button onClick={() => {if (props.function) props.function()}}>Dummy button</button>} // props.function is checked for undefined
        </div>
    )
}
 

ПРАВКА 1: Добавлена ссылка на игровую площадку

Ссылка на игровую площадку Typescript

Я ни в коем случае не являюсь экспертом в этом вопросе TS, поскольку я тоже задавался этим вопросом. Мое предположение до сих пор связано с уровнем «охвата». Иначе onClick говоря, функция имеет другую область действия, чем ваш компонент. Если вы на 100% уверены, что функция будет существовать в OnClick, вы можете выполнить одно из следующих действий.

 import React from "react";

export type Function = () => void;

export type Input = {
    label?: string;
    function?: Function;
}

function test1(props: Input) {
    return (
        <div>
            {props.label amp;amp; <p>{props.label}</p>} // props.label is checked for undefined
            {props.function amp;amp; <button onClick={() => (props.function as Function)()}>Dummy button</button>} // props.function is not checked for undefined
        </div>
    )
}
 

или просто

 import React from "react";

interface PropsModel {
    label?: string
    function?: Function,
}

function test1(props: PropsModel) {
    return (
        <div>
            {props.label amp;amp; <p>{props.label}</p>} // props.label is checked for undefined
            {props.function amp;amp; <button onClick={() => props.function!()}>Dummy button</button>} // props.function is not checked for undefined
        </div>
    )
}
 

! {props.function amp;amp; <button onClick={() => props.function!()}>Dummy button</button>} Здесь в строку было добавлено A. ! просто скажите TS, что вы на 100% уверены, что необязательный тип определенно будет существовать на данный момент.

Ваша function собственность не является обязательной. следовательно, чтобы использовать такое свойство, мы должны использовать необязательную цепочку.

Что вам нужно сделать, так это

 function test1(props: PropsModel) {
    return (
        <div>
            {props.label amp;amp; <p>{props.label}</p>}
            {props.function amp;amp; <button onClick={() => props.function?.()}>Dummy button</button>} // props.function is checked for undefined then it will be called
        </div>
    )
}
 

Обратите внимание, что для использования необязательной цепочки ваша версия машинописного текста должна быть typescript >= 3.7