Node.js + TypeScriptのモジュールを整理してみる
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
TypeScript Deep Dive 日本語版 | TypeScript Deep Dive 日本語版
出典: https://www.npmtrends.com/typescript TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 TypeScript DeepDiveは初心者からベテランまで役立つオープンソースのドキュメントです。JavaScriptのモダンな機能からTypeScriptの様々な魔法に至るまで丁寧に説明されています。多くのコードサンプルがあり、具体的なTypeScriptの使い方を簡単に理解できます。TypeScript DeepDive日本
SEOに強いTypeScript入門記事がミスリードを招いていて絶望しかけた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「TypeScriptとは」などシングルワードの検索結果に強いTypeScript入門記事の多くに、誤解を招く内容があることを確認しています。 以下にあげる記事を参考にされた方は情報のアップデートをしていただきたいですし、記事を公開しているメディアにおきましては内容を見直していただけるとありがたいです。 TypeScriptならクラスが書ける 「JavaScriptにはクラスがない、TypeScriptにはクラスがある」「ゆえに読みやすい短いコードが書ける」といった記述が見られますがこれは誤解です。 Udemy メディア - TypeS
Next.js + TypeScript + Recoil + Herp社ESLint Config でReactチュートリアルを作る。
制作したもの 概要 React のチュートリアルの三目並べを Next.js 12 + TypeScript + Recoil + @herp-inc/eslint-config の構成で、新しめの記述を取り入れた形に書き直してみた。 （上記のリポジトリにすべてのコードを掲載した。） コンセプトは、 TypeScriptの型チェックと厳しめのESLintルールでバグが起きづらい形にし、スケールしても内部品質を担保。 Next.jsで作ることにより、ブラウザでのパフォーマンスと開発体験の向上 である。 改良したいポイント React のチュートリアルの三目並べ（マルバツゲーム）の公式サイトに掲載されている元のコードは以下である。 この code に関して、以下のような課題が考えられる。 React の書き方が、現在では非推奨のクラスコンポーネントである。（関数コンポーネント + React
A cleaner API for React TS components
Photo by Danny Howe on UnsplashI hope this article shares some light on how to build better React components leveraging TypeScript. This post is an outcome of the efforts of building taggr, the privacy-focused AI gallery. While building taggr, I got deeper into TypeScript, and so far I am loving the added capabilities for annotating types and catching errors at compile time, instead off at runtime
Handbook - The TypeScript Handbook
About this Handbook Over 20 years after its introduction to the programming community, JavaScript is now one of the most widespread cross-platform languages ever created. Starting as a small scripting language for adding trivial interactivity to webpages, JavaScript has grown to be a language of choice for both frontend and backend applications of every size. While the size, scope, and complexity
OpenAPI SchemaからTypeScript Code Generatorを作ったので紹介します
他言語からTypeScriptに変換する記事を観測したので、JSONSchemaを経由してTypeScriptのコードに吐き出すライブラリを作りました。本記事のコアロジックの部分を抽出した形です。 OpenAPI TypeScript Code Generatorとの違いとして、ルートの名前空間を廃止しているので、割と自由に書ける様になってます。 https://www.npmjs.com/package/@himenon/jsonschema2ts
TypeScript 4.2 覚書
こちらの記事のまとめになります。 タプルの先頭と途中でもRest Elementsを置けるようになる タプルの先頭と途中にRestElementsを置くことができるようになります。 タプルいいですよね。僕は好きです。 // leading Rest Element let a = [...string[], boolean]; a = [true]; a = ['1', '2', false]; // middle Rest Element let b = [boolean, ...string[], number]; b = [true, 10]; b = [true, 'a', 'b', 2];
SWR(React Hooks)とaspidaで型安全にREST APIをfetchする - Qiita
TypeScript 4.1 で使えるようになる template string types が話題ですね 人類の悲願である Swagger/OpenAPI から静的型操作のみで使える型安全なクライアントを作製した猛者も現れました できました。 「型オンリーで」SwaggerのJSONを解析し、型安全なAPIクライアントを錬成しています。（URLが長すぎたので短縮してます） これはtemplate string typeなしではASTによるコード生成をしなければ達成できませんでした。https://t.co/jW98GIqMfz — ノーン (@nkowne63) September 1, 2020 この記事では template string types とは全く関係ない、上記ツイートでいうところの「 AST によるコード生成」によって型安全な HTTP リクエストを実現する「aspid
2021年のTypeScriptベストプラクティス - 西尾泰和の外部脳
5: テストコードで、型の要求を部分的にしか満たさないアドホックなオブジェクトをanyにキャストしてモックとして使うのではなく、ちゃんとしたモックを一箇所で定義してそれを使え 6: オブジェクトの種類によってあるプロパティを持っていたり持っていなかったりする時に、?でオプショナルなプロパティにするのではなく、どういう種類の時に持っているのかをインターフェースで明示せよ
Documentation - JSX
JSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation are implementation-specific. JSX rose to popularity with the React framework, but has since seen other implementations as well. TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript. Basic usage In order to use JSX you must do two t
JavaScript With Syntax For Types.
TypeScript is JavaScript with syntax for types.TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
TypeScript + React: Component patterns
This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s guide I use mainly modern-day React, so function components and – if necessary – hooks. I also focus exc
Welcome to NexusDI - Where DI meets simplicity | NexusDI
NexusDIA modern, lightweight dependency injection library for TypeScript Fast, type-safe, and developer-friendly. Built for clean, maintainable code. import { Nexus, Service, Token } from '@nexusdi/core'; const USER_SERVICE = new Token('UserService'); @Service() class UserService { getUsers() { return ['Alice', 'Bob', 'Charlie']; } } const container = new Nexus(); container.set(USER_SERVICE, UserS
zeit製のswrがすごい - Qiita
react hooksの登場とある程度の枯れ具合を見せてきて、益々利用する機会が増えているReact。 最近はreduxを採用する/しないで議論が白熱することが多くなってきていますが、今回はreduxを採用せずとも、ある程度のアプリケーションなら作れる選択肢の一つを紹介させていただきます。 初投稿なので、読みづらかったらスンマセン。 zeit製のライブラリ swr 今回の主役はこのswr。 reactのSSRフレームワークであるnextjsやPaaSのNowなどのを開発・運用しているzeitから最近登場したライブラリです。 このライブラリのREADMEの頭には、以下のように紹介されています。 SWR is a React Hooks library for remote data fetching. そう、つまり、data fetchをhooksベースで記述するためのライブラリです。 どん
TypeScriptでReactとBFFの間の通信にカタをつける | TECHSCORE BLOG | TECHSCORE BLOG
これは TECHSCORE Advent Calendar 2019 の１日目の記事です。 TL;DR TypeScript で React と BFF の間の通信に型をつけてみたよ。 インターフェース定義は TypeScript で書いてるので、実装がそのままドキュメントになるよ。 React 側も BFF 側もきっちり型がつくので開発捗るよ。 ここに実装置いたから見てね。 はじめに 最近半年ほど TypeScript ばっかり書いてます。TypeScript で React App 書いて、TypeScript で BFF 書いて、「嗚呼、型があるって幸せだな」って思ってました。 でも唯一不満があります。React と BFF の間の通信。 fetchを使って書いてるんですが、 fetchで JSON 取ってくると戻り値は anyになっちゃうんですよね、当たり前ですけど。 const
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - aspida/aspida: TypeScript friendly HTTP client wrapper for the browser and node.js.
React+Typescript+SWRでアプリをつくる - Qiita
GitHub - adelsz/pgtyped: pgTyped - Typesafe SQL in TypeScript
