type UserEvent = {type: string }
function handler(event?:UserEvent) :void{
// @ts-ignore // гасим предупреждение
let type = event.type; // тут возможно undefined
console.log('type: ' + type)
}
function handler1(event?:UserEvent) :void{
console.log('тут вы плюнули на все и надеетесь на лучшее')
let type = event!.type; // тут вы плюнули на все и надеетесь на лучшее
}
function handler2(event?:UserEvent) :void{
if(event && event.type) // тут проверили что есть event и у него есть свойство type
{
let type = event.type;
console.log(type)
}
console.log('бодрячком')
}
// console.log('test')
handler({type: 'aaaa'}) // нормально
handler2()
handler2({type: 'bbbbb'})
handler() // ошибка в рантайме, потому что мы задавили ошибку
handler1() // снова ошибкаimport React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
constructor (props){
super(props);
this.state = {isExpanded: false};
this.handleShowClick = this.handleShowClick.bind(this);
this.handleHideClick = this.handleHideClick.bind(this);
}
handleShowClick() {
this.setState({isExpanded: true});
}
handleHideClick() {
this.setState({isExpanded: false});
}
render() {
const isExpanded = this.state.isExpanded;
let button;
if (isExpanded) {
button = <button onClick={this.handleHideClick} > hide</button>;
} else {
button = <button onClick={this.handleShowClick}> show</button>;
}
return (
<div>
{button}
<ul>
<li >1</li>
<li >2</li>
{isExpanded &&
<>
<li >3</li>
<li >4</li>
<li >5</li>
</>
}
</ul>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);