Closed8

個人開発で詰まったこと

たけひろたけひろ

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を記載

https://qiita.com/ttf1998seiya/items/667e53b98e2f091f0143

たけひろたけひろ

NextPage型とは、ページコンポーネントを表す型です。 この型を注釈しておくと、関数の実装がページコンポーネントの要件を満たしているかがチェックできる。

たけひろたけひろ

https://zenn.dev/hirof1990/scraps/a0ac0ea372cf02

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

このスクラップは2023/07/23にクローズされました