Skip to the content Skip to the main menu

Time is Life!

Make your life fun and creative!!

  • Sitemap
A freelance web engineer. A dad for two kids :)
Be simple and practical!

Follow me on Twitter.

  • An Interactive Guide to CSS Grid
    2023-11-22
  • Full-Bleed Layout Using CSS Grid
    2023-11-21
  • Understanding Layout Algorithms
    2023-11-21
  • Hands-Free Coding
    2023-11-09
  • The End of Front-End Development
    2023-11-06
  • Data Binding in React
    2023-09-19
  • Common Beginner Mistakes with React
    2023-09-19
  • Making Sense of React Server Components
    2023-09-19
  • Understanding the JavaScript Modulo Operator
    2023-09-19
  • Statements Vs. Expressions
    2023-09-19

RSS Cointelegraph

  • Real AI use cases in crypto: Crypto-based AI markets, and AI financial analysis 2023-12-01
  • Evidence mounts as new artists jump on Stability AI, MidJourney copyright lawsuit 2023-12-01
  • KuCoin pledges $20K grant to TON Foundation for ecosystem development 2023-12-01
  • Hashing It Out: A case for Web3 chat apps with Push Protocol’s Harsh Rajat 2023-12-01
  • DeepMind exec: AI assesses climate issues, falls short of full solution 2023-12-01

RSS CoinPost

  • 「暗号資産投資と確定申告」に関する調査、2023年の取引では約7割の投資家が利益  2023-12-01
  • 米投資会社タイガー・グローバル、BAYCやOpenSea投資の評価額を大幅下方修正 2023-12-01
  • 「ビットコインがお金にもたらす革命をSNSへ」11月東京開催のNostrasia特集を配信 2023-12-01
  • Web3・NFTゲーム「イルビウム(Illuvium)」、最大手eスポーツチームTeam Liquidと提携 2023-12-01
  • BAYCバーチャルバンド「KINGSHIP」、大手ゲーミングプラットフォームRobloxでデビュー 2023-12-01

RSS CSS-Tricks

  • Passkeys: What the Heck and Why? 2023-04-12
  • Some Cross-Browser DevTools Features You Might Not Know 2023-03-22
  • Making Calendars With Accessibility and Internationalization in Mind 2023-03-13
  • 5 Mistakes I Made When Starting My First React Project 2023-03-10
  • Creating a Clock with the New CSS sin() and cos() Trigonometry Functions 2023-03-08

RSS Coliss

  • 確定申告でフリーランスの人が見落としがちな控除や特典、節税の方法がよく分かる解説書 -確定申告でお金を残す! 元国税調査官のウラ技 2023-12-01
  • UIデザインに最適! 文字サイズが小さくてもくっきりと美しいフリーフォント「Inter」が待望のバージョンアップ 2023-11-30
  • これはブックマークしておくと便利! HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes 2023-11-29
  • CSSの進化がすごすぎる! 2つの画像を比較するスライダーは数行のコードで実装できるようになりました 2023-11-28
  • SBクリエイティブ社の今年発売されたばかりのデザイン・イラストのKindle本が30%ポイント還元でお買い得です 2023-11-27

カテゴリー

  • AWS (4)
  • CircleCI (1)
  • CSS (2)
  • Docker (2)
  • GCP (2)
  • GraphQL (2)
  • i18n (2)
  • JavaScript (15)
  • Next.js (2)
  • Node.js (1)
  • Nuxt.js (10)
  • React (10)
  • Sass (2)
  • Storybook (1)
  • tailwindcss (1)
  • TypeScript (16)
  • Web Tech (2)
  • 転職 (2)

Make your life fun and creative!!

  • Sitemap
A freelance web engineer. A dad for two kids :)
Be simple and practical!

Follow me on Twitter.

  • An Interactive Guide to CSS Grid
    2023-11-22
  • Full-Bleed Layout Using CSS Grid
    2023-11-21
  • Understanding Layout Algorithms
    2023-11-21
  • Hands-Free Coding
    2023-11-09
  • The End of Front-End Development
    2023-11-06
  • Data Binding in React
    2023-09-19
  • Common Beginner Mistakes with React
    2023-09-19
  • Making Sense of React Server Components
    2023-09-19
  • Understanding the JavaScript Modulo Operator
    2023-09-19
  • Statements Vs. Expressions
    2023-09-19

RSS Cointelegraph

  • Real AI use cases in crypto: Crypto-based AI markets, and AI financial analysis 2023-12-01
  • Evidence mounts as new artists jump on Stability AI, MidJourney copyright lawsuit 2023-12-01
  • KuCoin pledges $20K grant to TON Foundation for ecosystem development 2023-12-01
  • Hashing It Out: A case for Web3 chat apps with Push Protocol’s Harsh Rajat 2023-12-01
  • DeepMind exec: AI assesses climate issues, falls short of full solution 2023-12-01

RSS CoinPost

  • 「暗号資産投資と確定申告」に関する調査、2023年の取引では約7割の投資家が利益  2023-12-01
  • 米投資会社タイガー・グローバル、BAYCやOpenSea投資の評価額を大幅下方修正 2023-12-01
  • 「ビットコインがお金にもたらす革命をSNSへ」11月東京開催のNostrasia特集を配信 2023-12-01
  • Web3・NFTゲーム「イルビウム(Illuvium)」、最大手eスポーツチームTeam Liquidと提携 2023-12-01
  • BAYCバーチャルバンド「KINGSHIP」、大手ゲーミングプラットフォームRobloxでデビュー 2023-12-01

RSS CSS-Tricks

  • Passkeys: What the Heck and Why? 2023-04-12
  • Some Cross-Browser DevTools Features You Might Not Know 2023-03-22
  • Making Calendars With Accessibility and Internationalization in Mind 2023-03-13
  • 5 Mistakes I Made When Starting My First React Project 2023-03-10
  • Creating a Clock with the New CSS sin() and cos() Trigonometry Functions 2023-03-08

RSS Coliss

  • 確定申告でフリーランスの人が見落としがちな控除や特典、節税の方法がよく分かる解説書 -確定申告でお金を残す! 元国税調査官のウラ技 2023-12-01
  • UIデザインに最適! 文字サイズが小さくてもくっきりと美しいフリーフォント「Inter」が待望のバージョンアップ 2023-11-30
  • これはブックマークしておくと便利! HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes 2023-11-29
  • CSSの進化がすごすぎる! 2つの画像を比較するスライダーは数行のコードで実装できるようになりました 2023-11-28
  • SBクリエイティブ社の今年発売されたばかりのデザイン・イラストのKindle本が30%ポイント還元でお買い得です 2023-11-27

カテゴリー

  • AWS (4)
  • CircleCI (1)
  • CSS (2)
  • Docker (2)
  • GCP (2)
  • GraphQL (2)
  • i18n (2)
  • JavaScript (15)
  • Next.js (2)
  • Node.js (1)
  • Nuxt.js (10)
  • React (10)
  • Sass (2)
  • Storybook (1)
  • tailwindcss (1)
  • TypeScript (16)
  • Web Tech (2)
  • 転職 (2)

Using package.json as a module in TypeScript

If you want to get a value like the version info from package.json, this is what to do.

Add resolveJsonModule config to tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    ...
    "resolveJsonModule": true
  }
}

Import package.json in your ts file.

import { version } from 'package.json';
  • Post date
    2021-03-31
  • Posted in JavaScript, TypeScript
Previous post: Next.js with PostCSS 100vh Fix Next post: How to seed data into Mongo with Docker

Related Posts

Nuxt.js: Font Awesomeの導入(TypeScript)

  • Posted in Nuxt.js, TypeScript

Nuxt.js: Google Tag Manager & Google Analytics with @nuxtjs/gtm

  • Posted in Nuxt.js, TypeScript

React (TypeScript): Blob/File to base64 using FileReader.readAsDataURL()

  • Posted in React, TypeScript

AWS Amplify: Auth関連まとめ

  • Posted in AWS, GraphQL, React, TypeScript

Follow me on Twitter.