{"id":1192,"date":"2024-06-13T06:01:05","date_gmt":"2024-06-12T21:01:05","guid":{"rendered":"https:\/\/shinke1987.net\/?p=1192"},"modified":"2024-06-13T06:01:05","modified_gmt":"2024-06-12T21:01:05","slug":"reacttsvite%e3%81%ab%e3%81%a6%e7%94%bb%e5%83%8f%e3%81%aeimport","status":"publish","type":"post","link":"https:\/\/shinke1987.net\/?p=1192","title":{"rendered":"React(TS)(Vite)\u306b\u3066\u753b\u50cf\u306eimport"},"content":{"rendered":"\n<p>Laravel + React(TS)(Vite)\u74b0\u5883\u3067\u306e\u8a71\u3060\u3051\u3069\u3001React(TS)(Vite)\u306e\u307f\u306e\u74b0\u5883\u3067\u3082\u540c\u3058\u3060\u3068\u601d\u3046\u3002<\/p>\n\n\n\n<h2 id=\"toc0\" class=\"wp-block-heading\">\u53c2\u8003<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ja.vitejs.dev\/guide\/assets.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u9759\u7684\u30a2\u30bb\u30c3\u30c8\u306e\u53d6\u308a\u6271\u3044 | Vite<\/a><\/li>\n<\/ul>\n\n\n\n<h2 id=\"toc1\" class=\"wp-block-heading\">\u76ee\u7684<\/h2>\n\n\n\n<p>\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092import\u3059\u308b\u3068\u4e0b\u8a18\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u3053\u3068\u3092\u89e3\u6c7a\u3057\u3066\u3001\u753b\u50cf\u3092\u8868\u793a\u3057\u305f\u3044\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nTS2307: Cannot find module &#039;..\/..\/photographs\/1\/IMG_7784.webp&#039; or its corresponding type declarations.\n<\/pre><\/div>\n\n\n<h2 id=\"toc2\" class=\"wp-block-heading\">\u7d50\u8ad6<\/h2>\n\n\n\n<p>tsconfig.json\u306b1\u884c\u8ffd\u52a0\u3059\u308c\u3070\u89e3\u6c7a\u3059\u308b\u3002<\/p>\n\n\n\n<h2 id=\"toc3\" class=\"wp-block-heading\">\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u9020<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nphotographs\n\u2514 1\n\u3000 \u2514 img.webp\ntsx\n\u2514 entry\n\u3000 \u2514 ImageTest.tsx\n<\/pre><\/div>\n\n\n<h2 id=\"toc4\" class=\"wp-block-heading\">ImageTest.tsx\u306e\u5185\u5bb9<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\nimport ReactDOM, { Container } from &#039;react-dom\/client&#039;;\n\nimport temp from &#039;..\/..\/photographs\/1\/IMG_7784.webp&#039;;\n\nReactDOM.createRoot(document.getElementById(&#039;root&#039;) as Container).render(\n    &lt;React.StrictMode&gt;\n        &lt;div&gt;ImageTest.tsx&lt;\/div&gt;\n        &lt;img src={temp}\/&gt;\n    &lt;\/React.StrictMode&gt;,\n);\n<\/pre><\/div>\n\n\n<h2 id=\"toc5\" class=\"wp-block-heading\">\u8a66\u3057\u305f\u3053\u3068<\/h2>\n\n\n\n<p>\u4e0a\u8a18\u53c2\u8003\u306e\u30da\u30fc\u30b8\u306b\u4e0b\u8a18\u304c\u8a18\u8f09\u3055\u308c\u3066\u3044\u305f\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nTypeScript \u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u9759\u7684\u30a2\u30bb\u30c3\u30c8\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\u3092\u6709\u52b9\u306a\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u3057\u3066\u8a8d\u8b58\u3057\u307e\u305b\u3093\u3002\u3053\u308c\u3092\u4fee\u6b63\u3059\u308b\u306b\u306f\u3001vite\/client\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\n<\/pre><\/div>\n\n\n<p>\u3068\u306e\u3053\u3068\u306a\u306e\u3067\u3001tsconfig.json\u3092\u7de8\u96c6\u3057\u3066\u4e0b\u8a18\u306e\u3088\u3046\u306b\u306a\u3063\u305f\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n{\n    &quot;compilerOptions&quot;: {\n        &quot;target&quot;: &quot;ES2022&quot;,\n        &quot;useDefineForClassFields&quot;: true,\n        &quot;lib&quot;: &#x5B;&quot;ES2022&quot;, &quot;DOM&quot;, &quot;DOM.Iterable&quot;],\n        &quot;module&quot;: &quot;ESNext&quot;,\n        &quot;skipLibCheck&quot;: true,\n\n        \/* \u4e0b\u8a18\u306e\u884c\u3092\u8ffd\u52a0 *\/\n        &quot;types&quot;: &#x5B;&quot;vite\/client&quot;],\n\n        \/* Bundler mode *\/\n        &quot;moduleResolution&quot;: &quot;bundler&quot;,\n        &quot;allowImportingTsExtensions&quot;: true,\n        &quot;resolveJsonModule&quot;: true,\n        &quot;isolatedModules&quot;: true,\n        &quot;noEmit&quot;: true,\n        &quot;jsx&quot;: &quot;react-jsx&quot;,\n\n        \/* Linting *\/\n        &quot;strict&quot;: true,\n        &quot;noUnusedLocals&quot;: true,\n        &quot;noUnusedParameters&quot;: true,\n        &quot;noFallthroughCasesInSwitch&quot;: true,\n        &quot;noUncheckedIndexedAccess&quot;: true,\n        &quot;exactOptionalPropertyTypes&quot;: true,\n        &quot;noImplicitReturns&quot;: true,\n        &quot;noImplicitOverride&quot;: true\n    },\n    &quot;include&quot;: &#x5B;\n        &quot;resources\/tsx\/*.tsx&quot;,\n        &quot;resources\/tsx\/**\/*.tsx&quot;,\n    ],\n}\n<\/pre><\/div>\n\n\n<h2 id=\"toc6\" class=\"wp-block-heading\">\u7d50\u679c<\/h2>\n\n\n\n<p>\u753b\u50cf\u306f\u8868\u793a\u3055\u308c\u305f\u3002<\/p>\n\n\n\n<p>\u30d3\u30eb\u30c9\u3092\u3059\u308b\u3068assets\u30d5\u30a9\u30eb\u30c0\u5185\u306b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u306f\u78ba\u8a8d\u3067\u304d\u305f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Laravel + React(TS)(Vite)\u74b0\u5883\u3067\u306e\u8a71\u3060\u3051\u3069\u3001React(TS)(Vite)\u306e\u307f\u306e\u74b0\u5883\u3067\u3082\u540c\u3058\u3060\u3068\u601d\u3046\u3002 \u53c2\u8003 \u76ee\u7684 \u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092import\u3059\u308b\u3068\u4e0b\u8a18\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u3053\u3068\u3092\u89e3\u6c7a\u3057\u3066\u3001\u753b\u50cf\u3092\u8868\u793a\u3057\u305f\u3044 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[105],"class_list":["post-1192","post","type-post","status-publish","format-standard","hentry","category-react","tag-react"],"_links":{"self":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1192"}],"version-history":[{"count":2,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1192\/revisions"}],"predecessor-version":[{"id":1194,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1192\/revisions\/1194"}],"wp:attachment":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}