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

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

解決済

1回答

4272閲覧

ReactをTypeScriptで利用すると@typesがエラーする

femto6

総合スコア18

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/09/25 15:12

編集2018/09/26 14:34

概要

jsで記述したサンプル程度のReactを利用したコードをTypeScriptに移行しようと思い、コードを書いていたのですが、
tscコマンドを叩いた所エラーが出力されます。

環境は、下にpackage.jsonを記載しております。
tscのバージョンは、2.6.2です。

エラーログ

error

1> tsc [18-09-25 23:44] 2node_modules/@types/prop-types/index.d.ts(10,38): error TS1005: '=' expected. 3node_modules/@types/prop-types/index.d.ts(12,46): error TS1005: ';' expected. 4node_modules/@types/prop-types/index.d.ts(12,75): error TS1005: ';' expected. 5node_modules/@types/prop-types/index.d.ts(12,99): error TS1005: ';' expected. 6node_modules/@types/prop-types/index.d.ts(14,54): error TS1005: ';' expected. 7node_modules/@types/prop-types/index.d.ts(14,78): error TS1005: ';' expected. 8node_modules/@types/prop-types/index.d.ts(14,81): error TS1109: Expression expected. 9node_modules/@types/prop-types/index.d.ts(14,97): error TS1109: Expression expected. 10node_modules/@types/prop-types/index.d.ts(14,122): error TS1005: ';' expected. 11node_modules/@types/prop-types/index.d.ts(14,130): error TS1128: Declaration or statement expected. 12node_modules/@types/prop-types/index.d.ts(14,138): error TS1005: ',' expected. 13node_modules/@types/prop-types/index.d.ts(27,48): error TS1005: ';' expected. 14node_modules/@types/prop-types/index.d.ts(27,49): error TS1109: Expression expected. 15node_modules/@types/prop-types/index.d.ts(27,50): error TS1109: Expression expected. 16node_modules/@types/prop-types/index.d.ts(27,68): error TS1005: '(' expected. 17node_modules/@types/prop-types/index.d.ts(27,69): error TS1005: ')' expected. 18node_modules/@types/prop-types/index.d.ts(29,30): error TS1005: ';' expected. 19node_modules/@types/prop-types/index.d.ts(29,54): error TS1005: ';' expected. 20node_modules/@types/prop-types/index.d.ts(29,57): error TS1109: Expression expected. 21node_modules/@types/react/index.d.ts(2295,27): error TS1005: ';' expected. 22node_modules/@types/react/index.d.ts(2296,14): error TS1005: ':' expected. 23node_modules/@types/react/index.d.ts(2296,28): error TS1005: ';' expected. 24node_modules/@types/react/index.d.ts(2297,9): error TS1109: Expression expected. 25node_modules/@types/react/index.d.ts(2298,9): error TS1005: '(' expected. 26node_modules/@types/react/index.d.ts(2299,9): error TS1005: '(' expected. 27node_modules/@types/react/index.d.ts(2300,5): error TS1005: '(' expected. 28node_modules/@types/react/index.d.ts(2300,12): error TS1005: ')' expected. 29node_modules/@types/react/index.d.ts(2312,49): error TS1005: ';' expected. 30node_modules/@types/react/index.d.ts(2312,76): error TS1005: ';' expected. 31node_modules/@types/react/index.d.ts(2312,99): error TS1005: ';' expected. 32node_modules/@types/react/index.d.ts(2313,13): error TS1128: Declaration or statement expected. 33node_modules/@types/react/index.d.ts(2314,13): error TS1005: '(' expected. 34node_modules/@types/react/index.d.ts(2314,17): error TS1005: ',' expected. 35node_modules/@types/react/index.d.ts(2314,44): error TS1005: ',' expected. 36node_modules/@types/react/index.d.ts(2314,45): error TS1005: ':' expected. 37node_modules/@types/react/index.d.ts(2316,17): error TS1005: '(' expected. 38node_modules/@types/react/index.d.ts(2316,21): error TS1005: ',' expected. 39node_modules/@types/react/index.d.ts(2316,51): error TS1005: ',' expected. 40node_modules/@types/react/index.d.ts(2316,52): error TS1005: ':' expected. 41node_modules/@types/react/index.d.ts(2318,21): error TS1005: '(' expected. 42node_modules/@types/react/index.d.ts(2318,24): error TS1005: ')' expected.

また、application.tsxのコードを全て消して、console.logのみにしても以下のエラーが出ます。(reactのインポートも消しています。)

error

1node_modules/@types/node/index.d.ts(815,38): error TS2304: Cannot find name 'Set'. 2node_modules/@types/node/index.d.ts(6557,95): error TS2304: Cannot find name 'Symbol'.

TSソースコード

TypeScript

1import * as React from "react"; 2import { render } from "react-dom"; 3 4interface IndexProps {} 5 6interface IndexState { 7 repositoryCount: number; 8 9} 10 11class App extends React.Component<IndexProps, IndexState> { 12 constructor(props: IndexProps){ 13 super(props); 14 this.state = { 15 repositoryCount: 0 16 } 17 } 18 19 render() { 20 return ( 21 <div className="wrapper"> 22 <button 23 onClick={() => this.requestSample()}> 24 ほげ 25 </button> 26 <div className="repository-count"> 27 repository count: {this.state.repositoryCount} 28 </div> 29 </div> 30 ); 31 } 32 33 requestSample(){ 34 return fetch("http://localhost:3000/") 35 .then( (response) => { 36 response.json().then( (resolve) => { 37 console.log(resolve.data.search); 38 this.setState({ 39 repositoryCount: resolve.data.search.repositoryCount 40 }); 41 }); 42 }); 43 } 44} 45 46render(<App/>, document.getElementById("app"));

tsconfig.json

json

1{ 2 "compilerOptions": { 3 "module": "commonjs", 4 "target": "es5", 5 "sourceMap": true, 6 "types" : ["node"], 7 "outDir": "./app/assets/javascripts/", 8 "jsx": "react", 9 "noUnusedLocals": true 10 }, 11 "include":[ 12 "./front/**/*" 13 ], 14 "exclude": [ 15 "node_modules" 16 ] 17}

webpack.config.js

js

1module.exports = { 2 entry: "./front/application.tsx", 3 mode: "development", 4 output: { 5 path: `${__dirname}/app/assets/javascripts/`, 6 filename: "main.js" 7 }, 8 module: { 9 rules: [ 10 { 11 //一応、jsxも残しておく 12 test: /.(js|jsx|tsx)$/, 13 use: [ 14 { 15 loader: "ts-loader", 16 options: { 17 presets: [["env", {"modules": false}], "react"] 18 } 19 } 20 ], 21 exclude: /node_modules/ 22 } 23 ] 24 }, 25 resolve: { 26 extensions:[".js", ".jsx", ".ts", "tsx", ".json"] 27 } 28};

package.json

json

1 "dependencies": { 2 "@types/react": "^16.4.14", 3 "@types/react-dom": "^16.0.7", 4 "react": "^16.5.2", 5 "react-dom": "^16.5.2" 6 }, 7 "devDependencies": { 8 "babel-core": "^6.26.3", 9 "babel-loader": "^7.1.5", 10 "babel-preset-env": "^1.7.0", 11 "babel-preset-react": "^6.24.1", 12 "source-map-loader": "^0.2.4", 13 "ts-loader": "^4.5.0", 14 "typescript": "^3.0.1", 15 "webpack": "^4.16.5", 16 "webpack-cli": "^3.1.0" 17 }

解決方法でなくても、ヒントになりそうな内容でも構いませんので、よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

tscではなく、webpack-cli --entry tsのソースの場所とすることで解決できました。
tscを叩いただけではwebpack.config.jsは読まれないみたいですね。

投稿2018/09/26 15:27

femto6

総合スコア18

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問