#typescript #optional-parameters #truthiness
Вопрос:
Я думаю, что мне не хватает чего-то основного о том, как вы можете проверить достоверность значения с помощью 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
Ответ №1:
Я ни в коем случае не являюсь экспертом в этом вопросе 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% уверены, что необязательный тип определенно будет существовать на данный момент.
Комментарии:
1. Не знал, что «!» существует. Приятно знать, спасибо! Гипотеза о масштабах может быть правильной. Я подожду, чтобы посмотреть, сможет ли кто-нибудь еще подтвердить это, и приму ваш ответ.
Ответ №2:
Ваша 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
Комментарии:
1. Но не следует ли
props.function amp;amp;
убедиться, что функция не является неопределенной и, таким образом, не делает ненужной необязательную цепочку?2. да, вы правы, но в данном случае мы используем только необязательную цепочку, чтобы избежать ошибки машинописи
3. Так вы имеете в виду, что это ошибочная реализация в машинописном тексте? И не должно ли это произойти на самом деле?