質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

1929閲覧

Node.js React.js TypeScriptでAn empty interface is equivalent to `{}`.というエラーが出てしまう。

_Victorique__

総合スコア1392

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/07/20 05:44

編集2018/07/20 07:34

React.jsを勉強しています。
こちらのサイトを参考に勉強をしているのですが、エラーが出てしまいます。
中身がからなのがいけないと言われているように見えますがどのように変更すれば良いのでしょうか?
他にもエラーが出ていたのでサイトのものを少し修正してあります。

typescript

1import * as React from "react"; 2import "./App.css"; 3 4export interface IProps {} 5export interface IState { 6 income: string; 7} 8const logo = require("./logo.svg"); 9 10class App extends React.Component<IProps, IState> { 11 constructor(props: IProps) { 12 super(props); 13 this.state = { 14 income: "" 15 }; 16 // メソッド内でthisを見るためのお約束 17 this.onChangeIncome = this.onChangeIncome.bind(this); 18 this.moneyYouWant = this.moneyYouWant.bind(this); 19 } 20 21 onChangeIncome(e: React.FormEvent<HTMLInputElement>) { 22 this.setState({ income: e.currentTarget.value }); 23 } 24 25 moneyYouWant(money: number): string { 26 if (money === NaN || money <= 0) { 27 return ""; 28 } 29 return `${money * 10000000}兆円欲しい`; 30 } 31 32 render() { 33 return ( 34 <div className="App"> 35 <div className="App-header"> 36 <img src={logo} className="App-logo" alt="logo" /> 37 <h2>Welcome to React</h2> 38 </div> 39 <p className="App-intro"> 40 <label> 41 現在の年収{" "} 42 <input 43 type="text" 44 value={this.state.income} 45 onChange={this.onChangeIncome} 46 />万円 47 </label> 48 </p> 49 <p className="Money">{this.moneyYouWant(Number(this.state.income))}</p> 50 </div> 51 ); 52 } 53} 54 55export default App;

js

1(4,18): An empty interface is equivalent to `{}`.

最新のコード

typescript

1import * as React from "react"; 2import "./App.css"; 3 4//export interface IProps {} 5export interface IState { 6 income: string; 7} 8const logo = require("./logo.svg"); 9 10class App extends React.Component<{}, IState> { 11 constructor(props) { 12 super(props); 13 this.state = { 14 income: "" 15 }; 16 // メソッド内でthisを見るためのお約束 17 this.onChangeIncome = this.onChangeIncome.bind(this); 18 this.moneyYouWant = this.moneyYouWant.bind(this); 19 } 20

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

このあたりが参考になるかもしれません。
参考サイト

class App extends React.Component<IProps, IState> {}
のIPropsのところは親コンポーネントからバインドされるプロパティ(props)の型(インターフェイス)を指定するところです。
親からバインドされるプロパティが無い、もしくは何が来るがわからない場合は
class App extends React.Component<{}, IState> {}
としておいて問題ないです。
その場合、export interface IProps {}も不要です。

仮に親コンポーネントから渡すデータが決まってる場合こんな感じになります。

class Parent extends React.Component<{},{}>{ render(){ return ( <App title="サイトタイトル" /> ) } } export interface IProps { title: string } export interface IState { income: string; } class App extends React.Component<IProps, IState> { ... render(){ return( <h1>{this.props.title}</h1> ) } }

投稿2018/07/20 06:40

keisukeh

総合スコア657

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

og24715

2018/07/20 07:05 編集

純粋な疑問ですが、質問者の提示コード中の interface IProps {} class App extends React.Component<IProps, IState> と、keisukeh さんの class Parent extends React.Component<{}, {}> ってどう違うんでしょうか
keisukeh

2018/07/20 06:51

React.Component<1, 2> 1はバインドされるプロパティの型 2はstateの型です。 どちらも決まっているなら適切な型(classやinterface)を指定しましょう
og24715

2018/07/20 06:58 編集

ん、1 と 2 がなんの型かという話ではないです。 > 親からバインドされるプロパティが無い、もしくは何が来るがわからない場合は > class App extends React.Component<{}, IState> {} > としておいて問題ないです。 と keisukeh さんはおっしゃらていますが、質問者のコードでは interface IProps {} class App extends React.Component<IProps, IState> となっています。 この違いをお聞きしたいなと
keisukeh

2018/07/20 07:04

すいません。 質問者様のコードと言われている interface IProps {} class Parent extends React.Component<IProps, {}> この部分が見当たらないのですが。
og24715

2018/07/20 07:07

そうですね。正しくは interface IProps {} class App extends React.Component<IProps, IState> でした。
_Victorique__

2018/07/20 07:08

> og24715さん 全く関係ないですけど、ヴィクトリカ可愛いですね笑
_Victorique__

2018/07/20 07:18

> keisukehさん コンストラクターの処理にIPropsのインスタンスが使われているのですが、それを消すとエラーになってしまいます。そもそもコンストラクターがいらないということでしょうか?
keisukeh

2018/07/20 07:21 編集

失礼しました! コンストラクタは必要ですので constructor(props: IProps){} を constructor(props){} にかえていただけますか?
_Victorique__

2018/07/20 07:28

> keisukehさん 新たに(11,15): Parameter 'props' implicitly has an 'any' type.というエラーが出てしまいました。
keisukeh

2018/07/20 07:31

今の状態の最新のコードを追記していただくことは出来ますでしょうか?
_Victorique__

2018/07/20 07:35

> keisukehさん 追加しました!
og24715

2018/07/20 07:52

props 使わないなら以下でいいんじゃないですか? constructor() { super(); ... }
_Victorique__

2018/07/20 08:02

> og24715さん それ考えて試してみたんですけどどうやら引数0個じゃダメって怒られました。
keisukeh

2018/07/20 08:04

tslint-reactが結構厳しいですね。 ちょっと試行錯誤しましたが以下に落ち着きました。 class App extends React.Component<any, IAppState> { constructor(props: any) { super(props); this.state = { name: 'React' }; } public render() { return ( ... ); } }
og24715

2018/07/20 08:18

no-any: true はいいのか(困惑)
_Victorique__

2018/07/20 08:41

> keisukehさん エラーが出て動きません。IAppStateがないと言われています。 > og24715さん URLを拝見しましたがよく分かりませんでした。すみません。
guest

0

ベストアンサー

TypeScript に明るくなく推測で申し訳ないですが、TSLint のエラーですかね。
ESLint はよく使用しますが、似たコーディングルールのチェックツールだと思うので、TSLint で空オブジェクトの Interface を許可してないだけかと思います。
なにかしら props の Interface を定義するか、TSLint のルールを無効化する個で対処できそうです。

Rule: no-empty-interface


JavaScript って NaN === NaN は絶対に true にならなかったと思うんですが TypeScript は大丈夫なんですかね。
もし JavaScript でやるなら isNaN(money) が正解かな

投稿2018/07/20 06:38

編集2018/07/20 07:06
og24715

総合スコア832

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問