個人開発で詰まったこと
JSXとは、JavaScriptに対してHTML(あるいはXML)のタグのような構文を導入する拡張記法
・インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。ts(7026) import でエラー
・yarn でnode_moduleが作成されない
yarn v2 以降はnode_moduleが作成されず、.pnp.jsが作成される。
node_moduleを作成したい場合は、.yarnrc.ymlにnodeLinker: node-modulesを記載
NextPage型とは、ページコンポーネントを表す型です。 この型を注釈しておくと、関数の実装がページコンポーネントの要件を満たしているかがチェックできる。
import時(モジュール機能)
① fugafugaの中でexportする時、export defaultで公開してある。この場合、中括弧なしでimportできる。またimport時に任意の名前に変更可能である。 しかしexport default が使用できるのは1ファイルにつき1個まで。
② fugafugaの中でexportする時、exportで公開してある。この場合、中括弧をつけてimportする。またimport時の名前変更は{ xxx as yyy }とすることで可能。 export は1ファイルの中で何個使用しても問題ない。export default との併用もできる。
export default は使わない import 時に自由に名前をつけることが出来る。
型推論 : 明示的に型を指定する
型注釈 : CP側が推測する型
cmd + sでlintを聞かせたいとき
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
keybinding.jsonに上書き可能
[
{
"key": "ctrl+s",
"command": "editor.action.sourceAction",
"args": {
"kind": "source.addMissingImports",
"apply": "first"
}
}
]
img srcでpathを書くときは、publicには以下に入れているとき、publicは省略可能
imges/google_login.png