2020年11月25〜27日の3日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2020」がオンラインで開催されました。そこでLINEのフィナンシャル開発センターFront-endチームのフロントエンドエンジニアである鈴木僚太氏が、「LINE証券フロントエンドにおける型安全性への取り組み」というテーマで、TypeScript＋Reactで安全に開発を続ける方法について共有。前半は「LINE証券」のフロントエンドがどのように作られているかについて紹介しました。 LINE証券フロントエンドにおける型安全性への取り組み 鈴木僚太氏（以下、鈴木）：このセッションでは『LINE証券フロントエンドにおける型安全性への取り組み』についてお話いたします。私はフィナンシャル開発センターの鈴木僚太と申します。よろしくお願いします。 最初少し自己紹介をさせ
少し前に、TypeScript 4.9 betaがリリースされましたね。その中でもsatisfiesオペレータに、「おお！いいやん！」と個人的に興奮したので軽く記事にしたいと思います。 概要 一言で言うと「typoとかが嫌なので型でしばりたい が 推論は具体的なままでいてほしい」という想いを実現してくれるのがsatisfiesです。 上記のBlogも十分わかりやすいかと思いますが、本記事では、より簡素な例を用いて説明したいと思います。 以降colorsというオブジェクトを定義すると仮定して、説明を進めます...。
Web版ExcelでTypeScriptベースの「Office Scripts」提供開始。ユーザー操作を自動で記録可能
Web版ExcelでTypeScriptベースの「Office Scripts」提供開始。ユーザー操作を自動で記録可能 マイクロソフトは、Web版Excelの新機能「Office Scripts」をプレビュー版として提供開始したと発表しました。 Office ScriptsはTypeScriptベースのスクリプト言語。Web版Excelでユーザーが操作した内容をスクリプトとして記録する機能を備えています。Windows版Excelのマクロ記録のように、操作に合わせて自動的にOffice Scriptsが生成されます。 生成されたOffice Scriptsを実行すれば、同じ操作が再現されます。 Office Scriptsが搭載されたWeb版ExcelにはTypeScriptエディタも内蔵されており、これを用いてOffice Scriptsを編集し、実行される内容を変更することも可能です。
こういう一連の記事を書きました. susisu.hatenablog.com susisu.hatenablog.com susisu.hatenablog.com TypeScript の型安全性 TypeScript の型システムは健全ではありません. TypeScript Design Goals にある通り, そもそも言語設計の段階で完璧な型安全性は目標になっておらず, 既存の JavaScript の言語仕様や資産を活用しやすいように, 生産性や利便性とのバランスをとることを目標としています. では TypeScript の型システムではどの程度の安全性が保証されるのでしょうか? 型安全性を第一の目標に置いていないとはいえ, TypeScript がまったく見当違いな型検査をしているというわけではありません. したがって, ある制限された範囲内であれば, 安全性を担保するのに十分
この投稿はTypeScriptのジェネリクスの型変数(type parameter)をどこに書くのかのチートシートです。 <T>の書く位置まとめ 関数宣言 関数式 アロー関数 メソッド宣言 関数型 コンストラクタ型 関数シグネチャ コンストラクタシグネチャ: 引数リスト()の直前 クラス宣言 インターフェース宣言 型エイリアス: 識別子の直後 <T>の書く位置チートシート 関数宣言
元記事(英語): My Neovim setup for React, TypeScript, Tailwind CSS, etc こんにちは、個人アプリ作家のTakuyaです。 Vim歴はかれこれ10年以上です。 僕はInkdropというMarkdownノートアプリを独りで開発しています。 このアプリはElectronやReact Nativeで組まれており、マルチプラットフォームで動作します。 それらはいつもNeovimを使って開発しています。 約２年前に自分のNeovimで使用しているプラグインについて紹介しました。 あれから結構アップデートしたので改めてまた書きます。 主な違いは設定がLuaで書かれている点です。 また、vim-plugからPackerに移行しました。 ちなみにYouTubeでM2 MacBook AirにNeovimをセットアップする動画を投稿しましたので、併せて
TypeScriptのもとでuseRefを使うときに知るべきRefObjectとMutableRefObjectについて
TypeScript環境でのReactの useRef は、初期値と型引数の与え方によって返り値の型が RefObject と MutableRefObject のどちらかになります。どういう使い方のときにどう書いてどちらを得るべきかを、 @types/react の更新まわりの議論を追った結果を示します。 この記事は2021年5月現在、React 17.0.2が最新バージョンの時点で記述します。 参考にした情報 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-446425911 RefObject と MutableRefObject が別である理由について https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38228#i
こんにちは、近藤です。 commmune Advent Calendar 2023 18日目の記事は『TypeScriptにおけるDDDのドメインオブジェクトの課題と対策』です はじめに ドメイン駆動設計（DDD）は、複雑なビジネスロジックを扱うアプリケーション開発において、重要かつ効果的なアプローチとして広く認識されています。 コミューンでは、現場で役立つシステム設計の原則の著者、増田さんのご協力を得て、プロダクト開発を進めています。 幸運なことに私は増田さんとの密なコミュニケーションを取らせて頂いており、DDDの理論と実践方法に関する貴重な知見を深めその有用性を感じております。 しかし、TypeScriptのような構造的型付けを採用する言語でDDDを適用する際には、特有の課題が生じることがあります。本記事では、TypeScriptでの構造的型付けに伴う課題、そしてそれらを克服する方法に
2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマン…
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 | DevelopersIO
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 環境構築 「何もしてないのにできた」を実現するため、この記事ではインストール直後の Visual Studio Code と Node.js を使用しています。皆さんは今まで通りの環境で大丈夫です。 各ツール類のバージョンは執筆時点で最新のものを使用しています。 Visual Studio Code 1.52.1 Japanese Language Pack（任意） Node.js v14.15.3 プロジェクト作成 任意のディレクトリを作成し、初期化して必要なモジュールをインストールします。そして VS Code で開きましょう。 mkdir ts cd ts npm init -y npm install typescript ts-no
TypeScriptの安全性の穴
TypeScriptの型システムは不完全です。 型システム上しょうが無い所も、どうしてそうなってるのって所もあります。 この記事では共通認識となっているようなものから、あまり認知されていないものも含め、TypeScriptの安全性の穴になり得る所を紹介します。 tsconfig.json 項目が大量にありますが、この記事では型安全性に大きく影響のあるオプションのみ紹介します。 strict このオプションが無効だと型安全性が大幅に失われます。 具体的にはnull | undefinedが無かったことにされたり、暗黙のanyが大量発生したりします。 なんでデフォルトがfalseなんですか？ 詳しくはこの記事を読んでください。 noUncheckedIndexedAccess このオプションがfalseの場合、インデックスシグネチャへのプロパティーアクセスが型安全ではなくなります。 const
Expressでサーバ立てたいなと思ったので、 TypeScriptではじめるときにやったことの備忘録。 TypeScriptの設定 まずは、package.jsonから。 # package.jsonの生成 $ npm init # typescriptのインストール $ npm i -D typescript @types/node # バージョン確認 $ npx tsc -v # ts初期化: tsconfig.json生成 $ npx tsc --init tsconfig.jsonの設定する。 // tsconfig.json { "compilerOptions": { "target": "ES2019", "module": "commonjs", "sourceMap": true, "outDir": "./dist", "strict": true, "esModul
世の中の TypeScript コンパイラが大きすぎるので作りました。 ここで試せます。 jsx と jsx pragma のサポートもしたので、 preact も動いています。 実装方針 ビルドサイズ第一 とにかく軽量に mints自体が他のコードをビルドするときの速度ではない点に注意 現状、まともなエラーレポートが出ない。エラーメッセージをインライン化するとビルドサイズが増えるため。 空白行と型情報を落とすだけ ES5 への変換や commonjs への変換は実装しない enum と constructor と jsx のみ transform する特殊対応をしている 真面目な構文解析をしてない 例えば 1+1*2 のような binary expression は結合順を解析してない。型を落とすだけなら不要 prettier でフォーマットされたコードはコンパイルできるのが目標(空白行
オブジェクトの中に、定数をフラットに列挙しただけの定数ファイルを書いていませんか？ 私は、フロントエンドの開発において、 JavaScript の簡潔なオブジェクト記法 TypeScript による型チェック / IDE 等による入力補助 を活用した保守性の高い定数ファイルの書き方を日夜研究しているので、4つのポイントに着目して解説しようと思います。 この記事で求める「保守性」 網羅的に視認しやすいこと 会社/文化によって異なるかも知れませんが、 「全てのフィールド（ラベル・説明文・バリデーションエラー文言）」のような情報が仕様ドキュメントの中でまとめて管理されている状況では、コードの側でも文書の構造に合わせて情報をまとめて配置すれば、仕様と実コードを見比べるのがラクになるのかな...？と考えています。 また、単純に仕様上重要な情報がボリューミーなコードの中に埋もれやすいので、定数ファイル
こんにちは。SALESCORE株式会社CTOの成澤です。 祝・Publication機能のオープンβリリース🎉🎉 ということで、SALESCOREのテックブログを発信し始めます！ テックブログの一発目ということで、2022年で一番開発体験が変わったTurborepoによるモノレポ・モジュラーモノリスによる開発について紹介します。 今後もTypeScriptでのWebサービス開発について記事を出していく予定なので、気になる話題などあればコメントいただけるととても嬉しいです🙋♀️ モジュラーモノリスという選択肢 ソフトウェア開発における重要な要素の1つは抽象化です。 抽象化をあえて噛み砕いて、平坦な言葉で言うならば 「適切なグルーピング」 と呼んでも良いでしょう。抽象化とは、ものごとをグルーピングして、適切な名前を与えることです。 100行の処理の羅列は分かりづらいが、10行ずつグルー
TypeScript
2023年度リクルート エンジニアコース新人研修の講義資料です
Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） Svelteは何が良いのか？ Vue.js やReactと違って仮想DOMがありません。ビルド時に純粋なJavaScriptにコンパイルして表示します。つまりSvelteはコンパイラーです。 そもそも仮想DOMのメリットとして、アプリ全体を再レンダリングせず、変更箇所（実際のDOMと仮想DOMの差分）もしくは Contextでトリガーされたとき を検知して、局所的にレンダリングすることで高速化を図っています。 Svelteの公式ブログ
Understanding design patterns in TypeScript and Node.js - LogRocket Blog
Ganesh Mani I'm a full-stack developer, Android application/game developer, and tech enthusiast who loves to work with current technologies in web, mobile, the IoT, machine learning, and data science. Editor’s note: This article was updated 27 September 2022 to include information about state patterns and anti-patterns in TypeScript, as well as to make general revisions to the article. Design patt
ContentsBasic project setupThe basic setup consists of four steps: Create the project and source directoriesCreate a package.jsonGet a .gitignore, tsconfig.json, .eslintrc.jsInstall TypeScript & dependenciesNote: This guide uses yarn, but if you prefer npm it has similar commands. # Create project folder mkdir my-project cd my-project # Create source folder and files mkdir src touch src/main.ts sr
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
2021/02/25(木) Node学園 35時限目の発表資料 https://nodejs.connpass.com/event/203464/ Node.js の ES Modules 対応についてRead less
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita
Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import
Provides functions to help TypeScript GraphQL client development including auto completion, query validation, type… このツールに限らずですが、開発支援系のツールは自分で使うモチベーションがあるときに作るのが一番ということもあり、重い腰を上げてこいつに大幅にアップデートを加えました。年末年始で時間もいっぱいありましたしね。 エディタ支援機能ts-graphql-plugin という名前にもある通り、こいつはTypeScriptのLanguage Service Pluginです。 Language Service Pluginというのは、TypeScriptの言語支援サーバー（tsserver）上で動作するため、エディタの種別を問わず動作するのが特徴です。 さて、例えばReac
TypeScript 型レベルプログラミング フリースタイルガイド - Object.create(null)
TypeScript の型レベルプログラミングのための真面目なスタイルガイドではありません. 型なしラムダ計算で喜ぶような人間が使うための諸刃の剣です. この記事の内容は TypeScript の 2022 年 1 月時点での最新版である 4.5.4 に基づいています. 将来のバージョンでの妥当性は保証しません. 「型〜」「〜型」という用語の「型」はしばしば省略します. 値レベルの話題は一切登場しません. 以前作った型レベル Brainfuck インタプリタはこのスタイルに則っているので参考にどうぞ. いつまでこのネタを引きずるんですか? パラメータに対して制約を付与しない 型定義のパラメータに対して extends を使って制約を付与すると, そのパラメータに与えられる引数を制約を満たすもののみに限定することができます. 例として, 以下の Append には string の部分型のみ
今日開催の「TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線」で発表した資料です。 https://techfeed.io/events/techfeed-experts-night-11 Zennの記事はこちら https://zenn.dev/moneyforward/articles/typescript-as-const-satisfies
TypeScript の型を用いたコンポーネントの責務の明確化 - Timee Product Team Blog
はじめまして！フロントエンドエンジニアの樫福 @cashfooooou です。 タイミーでは Next.js × TypeScript で toB 向け管理画面を作成しています。 この記事は、toB向けの管理画面の開発時に筆者が気づいたコンポーネント間の責務の明確化の必要性と、 TypeScript の型を用いて責務の分割をサポートする方法の紹介しています。 背景 利用者の様々なニーズに応えるために、toB向け管理画面には様々なページが実装されています。 2つ以上のページを実装していると、それぞれのページで実装の粒度がバラバラになることがあります。 一方ではフックの中で実装していたようなロジックが、他方ではコンポーネントで実装されている あるページのコンポーネントは複数のファイルに分割しているけど、こちらのページでは巨大な一つのファイルで実装が完結している 属人的な責務の分割が失敗した様子
はじめに 今関わっているプロジェクトで7万行以上のコードを、JavaScriptからTypeScriptに移行するというのを経験しました。 移行するにあたっての準備や手順、実際にやってみて感じたことなどを共有します。 プロジェクトの概要 フルスタックWEBアプリケーション フロントエンド: JavaScript + React バックエンド: Node.js + Express.js + GraphQL なぜそもそもTypeScriptを採用しなかったのか 事前に技術選定をした際に、TypeScriptを利用するかどうかの議論はありました。 当時は以下の理由から採用しないという選択に至りました。 JavaScriptの開発に慣れていたため、TypeScript型定義=面倒というイメージが強かった 「スピードが命」と考えており、TypeScriptを使うことで開発効率が下がると思っていた プ
TypeScript Deep Dive とは TypeScript Deep Diveとは、TypeScriptはもちろん、JavaScript（ES6）/ サーバーサイドJavaScript（Node.js）/ Reactなどで使うJSX など、TypeScript周辺技術を包括的に学ぶことができるTypeScriptの入門サイトです。 TypeScript Deep Dive TypeScript Deep Dive 日本語版 GitHub TypeScript Deep Dive 日本語版 TypeScript環境構築 TypeScript Deep Diveで勉強を始めるための、環境構築を行なっていきます。 環境 項目 バージョン 1. Node.jsのインストール HomeBrewを使って、nodebrewをインストールします。 $ brew install nodebrew
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は10画面ほどの中規模アプリケーション（OOUIの考え方を取り入れたら画面数が減りました） 基本的にバック
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
TypeScript における変性（variance）について - 30歳からのプログラミング
プログラミングの型システムに関する記事を読んでいると、共変や反変といった用語が出てくることがある。 TypeScript や Flow についての記事でも、見かけることがある。 それらは TypeScript を使う上で必須の知識ではないが、把握しておくに越したことはない。 この記事では、TypeScript を題材にして、変性について説明していく。 TypeScript に関する議論を理解できるようになることがこの記事の目的であり、より詳細な、学術的、数学的な内容には踏み込まない。 この記事の内容は、TypeScript のv3.9.5で動作確認している。 変性 変性（variance）とは、任意の型Tに対してどのような性質を持つのか示したものであり、以下の 4 種類がある。 不変性（invariance） Tそのものが必要 共変性（covariance） Tそのものか、そのサブタイプが
React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する - Qiita
React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。 インストール React Hook Formは、npm installコマンドでつぎのようにインストールします。 アプリケーションを手もとでつくるには、Create React Appを使うのがよいでしょう。本稿のコード例の場合には、TypeScriptのテンプレートを加えてください(「React + TypeScriptのひな形作成とFullCalendarのインストール」参照)。 基本的な使い
動機と目的 普段、Next.jsでアプリケーションを開発しています。当初は Next.js にも TypeScript にも慣れていなかったため、ページのパスを定数で定義し、Link コンポーネントで呼び出していました。 // constants/path.ts export const TOP_PATH = '/' export const USERS_PATH = '/users' // ...
LINE株式会社フロントエンド開発センター(通称: UIT)の折原です。 先日、6月17日に開催した UIT meetup vol.9 で、本編の前にウォームアップとして、フロントエンドに関するクイズ企画を開催しました。そこで使うことを目的として、UIT App という名前で LIFF のアプリを作成しました。 UIT App は LIFF で動作するクイズアプリです。現状クイズだけですが、今後はいろんな取り組みをこのアプリ上で動作させることができるようになっていく予定です。 この UIT App を実装するにあたって、フロントエンドでは StencilJS を、サーバーサイドでは NestJS を採用しました。これらを使ってみての所感や、こだわった箇所などを紹介したいと思います！ フロントエンドの技術スタックと運用 Stencil Stencil は Web Component・Web
React Native for Web + TypeScriptを使ってReact公式のチュートリアルをやってみた | DevelopersIO
React公式ページのチュートリアルをReact Native for WebとTypeScriptを使ってやってみました。 実装するもの React公式ページのチュートリアルの三目並べゲーム 今回作成したソースコードの一式はこちらにあります。 実装方針 Create React Appを使ってプロジェクトを作成する TypeScriptを使用する 画面の作成に、React Native for Webのコンポーネントを使用する チュートリアルの内容（*2020/3/2時点）に沿う 事前準備 Create React Appを使ってReactアプリを作成し、TypeScriptとReact Native for Webを導入します。今回は以下の記事でご紹介した方法でReactアプリを作成し、TypeScript、React Native for Web、Prettierを導入しました。 C
fullstack TSなアプリケーションも増えてきた昨今、TSでvalidatorを実装する際に何を採用するかは一大トピックです。今回は、その中でも新しめなライブラリでありBlitzも採用しているZodについて見ていきます。 Zodとは Zodの特徴として、Schema firstなvalidationライブラリであるというのがあります。 validateするschema（単一のschemaからobject, arrayまで）を定義し、それをベースにparseするというものです。 公式にあるexampleを見てみましょう。 import { z } from "zod"; // creating a schema for strings const mySchema = z.string(); mySchema.parse("tuna"); // => "tuna" mySchema.p
0. はじめに 現代のWebアプリケーションの開発言語として、TypeScriptはファーストチョイスの一つです。特殊なケースを除き、フロントエンドの開発言語にはTypeScriptが選ばれるため、言語を統一するメリットを優先し、バックエンドにもTypeScriptが採用されるケースはよく見られます。 またReactがClass Componentを捨てFunction Componentを採用した事件が象徴するように、現代のプログラミングパラダイムのトレンドとして関数型プログラミングがあります。そもそもJavaScriptの出自は、関数型言語をブラウザに搭載できると聞いてNetscapeへ入社したブレンダンアイク氏が、オブジェクト指向言語であるJavaのような言語を会社から要求され、開発したというものです[1]。そのためか、JavaScriptは未だ関数型言語としては未成熟で、関数型プロ
[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する | DevelopersIO
[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する React + Typescript で実装されたフロントエンドにreact-beautiful-dndを使ったドラッグ＆ドロップ機能を実装しました。 全体の流れ 本記事でやることの全体の流れです。 React + Typescript で簡単な画像のリストを作成する react-beautiful-dndを導入してリストのアイテムをドラッグ＆ドロップできるようにする 成果物 React + Typescript プロジェクトの雛形を作成する ドラッグ＆ドロップを実装する前準備です。 create react app コマンドでプロジェクトの雛形を作成します。言語は Typescript を指定します。 npx create-react-app sample_dd
主張 現代では、 npm に publish するものを除けば TypeScript をコンパイルして配布する必要はほぼないと考えています。 TypeScript のコンパイルをしない環境、例えば deno や rome を使うと、コンパイルをするというステップが省くことで開発体験が大きく向上する、という肌感があり、ローカル環境ならこのメリットを優先するべきと考えています。 基本的に、ビルドはフロントエンド/サーバーともに配布前の最後の一回だけでいいはず、というのが自分の主張です。 Rome Toolchain Deno - A secure runtime for JavaScript and TypeScript 理由 現代の npm のお作法に従うと TypeScript に依存したものを npm の registry に置くことは、あまりよくないこととされていますが、モノレポ内や特
2024-01-01 quick-lint-js is a JavaScript bug finder. Today, version 3.0 makes it also a TypeScript bug finder! quick-lint-js complements TypeScript with beginner-friendly messages and fast linting. install quick-lint-js 🌐 try in browser code on GitHub Example code used in this article has been adapted from various open source projects, including some Copyright Tiny Technologies, Inc. and Copyrigh
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript＋Reactで安全に動かし続けるために LINE証券のフロントエンドにおける型安全性への取り組み
【TypeScript 4.9 beta】satisfies に大満足
TypeScript をより安全に使うために まとめ - Object.create(null)
TypeScript: <T>の書く位置チートシート - Qiita
vim沼: NeovimのReact、TypeScript、Tailwind CSS用セットアップ
TypeScriptにおけるDDDのドメインオブジェクトの課題と対策
TypeScriptのパフォーマンス改善
Express+TypeScriptをはじめるときにやったこと - くらげになりたい。
mints: 5.7kb の TypeScript コンパイラを作った
TypeScript で仕様が一目瞭然な定数ファイルを書く
TypeScript・モジュラーモノリスによる型安全なWebサービス開発
Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note
Starting a TypeScript Project in 2021
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
TypeScript で GraphQL Client を便利に開発するためのツールを作っている話
TypeScript 4.9のas const satisfiesが便利
7万行のJavaScriptコードをTypeScriptに移行した話 - Qiita
TypeScript Deep DiveでTypeScriptに入門する | DevelopersIO
Next.js+TypeScript+AWS Amplify+RecoilでToDoリストを作る - Qiita
Next.jsのルーティングにTypeScriptで型をつけたい
All TypeScript で開発したLINEで動くリアルタイムクイズアプリの裏側
Zodで真のTypeScript firstを手にする
ts-patternでTypeScriptにパターンマッチングを持ち込み、より型安全な世界へ
内部モジュールでは TypeScript をコンパイルせずに配る
TypeScript Clearly & Quickly