# 區塊鏈前端 typescript [TOC] ###### tags: `Dapp` `區塊鏈` --- * [教學資料](https://willh.gitbook.io/typescript-tutorial/advanced/class-and-interfaces) * [create react app /typescript](https://create-react-app.dev/docs/adding-typescript) --- ```javascript= <!DOCTYPE html> <html> <body> <h2>JavaScript Class Inheritance</h2> <p>Use the "extends" keyword to inherit all methods from another class.</p> <p>Use the "super" method to call the parent's constructor function.</p> <p id="demo"></p> <script> class Car { constructor(brand) { this.carname = brand; } present() { return 'I have a ' + this.carname; } } class Model extends Car { constructor(brand, mod) { super(brand);// this.carname = brand; this.model = mod; } show() { return this.present() + ', it is a ' + this.model; } } mycar = new Model("Ford", "Mustang"); document.getElementById("demo").innerHTML = mycar.show(); </script> </body> </html> ``` ``` Use the "extends" keyword to inherit all methods from another class. Use the "super" method to call the parent's constructor function. I have a Ford, it is a Mustang ``` ## React Hook * [React Hook 筆記 從最基本的useState, useEffect 開始](https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-%E5%BE%9E%E6%9C%80%E5%9F%BA%E6%9C%AC%E7%9A%84-hook-%E9%96%8B%E5%A7%8B-usestate-useeffect-fee6582d8725) ---- ### useState ![](https://i.imgur.com/vGQvel3.png) ---- ### useEffect ![](https://i.imgur.com/2CTBnoI.png) ---- ### Typescript array-map method * [array-map method](https://www.geeksforgeeks.org/typescript-array-map-method/) ![](https://i.imgur.com/UiuvoHJ.png)