react typescript を使用しています

引っかかったポイントを書き残します。

setInterval()

http://js.studio-kingdom.com/javascript/window/set_interval
https://www.w3schools.com/jsref/met_win_setinterval.asp

第１引数関数の名前
第２引数時間

例１

const a = () => {
  console.log("hello")
}

setInterval(a, 1000)

//出力
//一定時間ごとにhelloを繰り返す
hello
hello
hello
...

注意したいのが、第１引数です
a()だと
Callback must be a function
(コールバックは関数でなければなりません)
と怒られます。（関数なんだけどなぜだ、、、）

問題は、蒸気を考慮すると、第１引数に引数アリの関数を書けません。
なので別の書き方をします。

例２

const a = () => {
  console.log("hello")
}

setInterval(() => {
  a()
}, 1000)

この書き方も、例１と結果は同じです。

setInterval と render(){} と state

reactでは

例３

render(){
//ここに色々かける
  return(
  )
}

でDOMをレンダリングします。
で、render()メソッド内に色々書けます。なのでここでsetStateやら、setIntervalやら突っ込んだのですがどうやら、setStateをすると、レンダリングされるようで、renderメソッド内でrenderメソッドを呼び出して、といったように無限ループのようなものになります。（表現しづらい）

なので、reactでsetIntervalを使いたいときは、
componentDidMount()メソッド
の中でやると思っている感じの動作をしました。

例４

componentDidMount() {
  setInterval(() => {
    console.log("hello")
  }, 1000)
}

render(){
//ここにsetIntervalを書いて、setStateを使うと、１回で２回呼び出されて、階乗みたいな感じで実行回数が増えていく
  return(
  )
}

console.logができない

すみません忘れました。

返り血の型がわからない

class内で関数を宣言するときはpublic、protectedとかで宣言します。
その時の返り値の型を書く場所についてです

例５

public returnNumber = (): number => {
  return 123
}

このようなメソッドを書くときは、:numberの位置に返り値の型を書きます。

構造体を返す時の返り値の型は{}

例６

public returnKouzoutai = (): {} => {
  const out: {in: string} = {in: "hello"}
  return out
}

stateが使えない

interfaceを使いましょう

例７

import * as React from 'react'
interface MyState {
  hoge?: string
}
interface MyProps {
  fuga?: string
}
class piyo extends React.Component<MyProps,MyState> {
  constructor(props: MyProps) {
    super(props)
    this.state = {
      hoge: "hello"
    }  
  }
}

stateの値を使えない

interfaceで宣言した時の？をとりましょう

例８

interface MyState {
  hoge: string　//hoge?: stringだと怒られるかも
}

?がついてるとhoge?に値がないかもしれませんって怒られます

感想

Javascript って書き方が複数あって難しい。

後から思い出そうとすると思い出せないから、解決したときに書き残すようにしよう。

https://reacttypescriptnbackapp.firebaseapp.com/
作ろうとしたけど、完成形を忘れたのであきらめ

react typescript を使って nback app を作ろうとした