React TypeScript

react-typescript.md

footer: @sir_tilbrook

TypeScript React in 5min

---

TypeScript init

npm install -g typescript tslint
ts init
tslint init

---

Configure TypeScrip Compiler

// tsconfig.json
{
  "compilerOptions": {                  
    "target": "es2015",             
    "module": "es2015",                  
    "jsx": "react",                
    "jsx": "react-native",                
    …                                      
  }
}

---

Configure TypeScrip Linter

// tslint.json
{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "interface-over-type-literal": false,
        "object-literal-sort-keys": false
    },
    "rulesDirectory": []
}

---

TSX

vim app.tsx

---

Component

type IProps = { name: string; }
interface IState { name: string; formError: string }

class App extends Component<IProps, IState> { 
  …
}

---

Initial State

class App extends Component<IProps, IState> { 
  
  public state: IState = {
    name: this.props.name,
    formError: "",
  };

}

---

tsc --watch

---