# Wk-notes-11-11-migrating-typescript-git-remote-label-Emotion-controlled-component

* Add Definition ts (`.d.ts`) for vscode only, remember to install `@types` dev dependency for external types to make it work

**Attention:** js code will not be checked unless adding `// @ts-check`

* For \<Toggle/>/\<Switch/> control Component, label solution: `<react-switch/>` there is a recommended way to wrap control by `<label/>`, more for accessibility and semantic html.
* Emotion css-in-js solution
  * A pure css-in-js solution, framework agnostic (use `css()` to create class, `cx()` to compose)
  * Allow nested css, e.g. **mediaquery**, nested tag and className
  * Able to edit element directly
* Use "Reflection" to check if the Component is controlled or not. A pattern for mixed control component

```javascript
class C extends React.Component{
  static isControlled = props => typeof props.checked === 'boolean';
  
  getCheckedState = () =>
    Toggle.isControlled(this.props) ? this.props.checked : this.state.checked;
}
​
```

* Git remote command

```bash
$ git remote -v
> origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)
> origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git (push)
​
$ git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git
​
$ git remote -v
> origin    https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)
> origin    https://github.com/YOUR_USERNAME/YOUR_FORK.git (push)
> upstream  https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git (fetch)
> upstream  https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git (push) 
​
# To get sync
$ 'congcongcong250/runway/master' git fetch qantas master
$ 'congcongcong250/runway/master' git pull qantas master
```

* Keep forked repo up-to-date