Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

react typescript を使用しています

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

setInterval()

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

第1引数 関数の名前
第2引数 時間

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

setInterval(a, 1000)

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

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

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

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

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

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

setInterval と render(){} と state

reactでは

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

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

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

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

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

console.logができない

すみません忘れました。

返り血の型がわからない

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

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

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

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

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

stateが使えない

interfaceを使いましょう

例7
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で宣言した時の?をとりましょう

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

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

感想

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away