React×Typescriptの環境開発で、初っ端に出たエラー
Discussion
最初の壁
転職を目指している僕はある日reactとtypescriptを勉強し始めました。そんな時今までnpmを使っていましたがポートフォリオを作るにはyarnの方が良いだろうと、yarnの導入を検討した。（正直この記事を書くならコード書けって話。）
npm install --global yarn
↓
yarn global add create-react-app
↓
npx create-react-app --template typescript 好きなファイル名
そしてvs codeを開きyarn startを無事にいつものreactの画面が表示される。
『よし,次はsrcの中身を消してtsxファイルの作成だ。』
しかし現実は非情なものであった。
It looks like you're trying to use TypeScript but do not have typescript installed.
error Command failed with exit code 1.
翻訳してみると....
TypeScriptを使用しようとしているようですが、typescriptがインストールされていません。
『ん？ 俺はファイル作成時にインストールしたんじゃないのか？？』
とりあえずGoogle先生にエラー文をぶち込んで調べる。今までの勉強でわかっていたが解決策が多すぎる。本当に多すぎる。一人一人環境が違うし知らない言葉ばかり、もはや違う国に来たと言っても過言ではない。
そんな中見つけたのがこれ。
yarn add --dev typescript @types/react @types/node
TS プロジェクトっぽいのにパッケージ無い時に使うらしい。
でもtsconfig.jsonはあったから中身を良い感じにいじるコマンドだと予想,するとどうでしょう。yarn startが走るではありませんか。まじで嬉しい、宝くじで１００００円当たるより嬉しい。
２つ目の壁
Could not find a declaration file for module 'react-dom'. '
/Users/satoshun/sufeing/node_modules/react-dom/index.js'
implicitly has an 'any' type. Try `npm i --save-dev
@types/react-dom` if it exists or add a new declaration
(.d.ts) file containing `declare module 'react-dom';`
『ちくしょう、またエラーかよ』
なるほど、コウメ太夫のセリフはこういう時に使うのか。頭のCPUが余計なことに使われる。
調べてみると、どうやら原因はtsconfigにあるようでした。
したがって下記をcreate-reaxct-appで生成されたtsconfig.jsonに追加するだけで、ちゃんと起動するとか。
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"noImplicitAny": false,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
tsconfig.jsonのこの位置に
"noImplicitAny": false,
を入れるとエラーは解消。
これでany型をエラーにしてるらしい。
なんでかわ調べてるけどまだ結論は出てないよ。
でもtsは型別で判別してくれるからなんとなく理解はできた。
エラーは自分を成長させてくれると思ってるから嫌いだけど好きだよ。
まだまだ勉強不足だけど周りの先輩エンジニアの方は優しいしほんとに環境に恵まれた感が強い。あっという間に４月だけど気合入れるしかない。