TypeScriptでnpmパッケージ（CommonJS・ES Moduleの両方に対応）を開発して公開してみた - Qiita
はじめに 普段から多くのOSSライブラリたちを利用させてもらっているが、そういったライブラリを自分でも作ってみたくなった。今回はあまり複雑ではないかなりシンプルなライブラリをTypeScriptで開発し、それを公開し利用するまでをやってみたいと思う。 開発するライブラリの機能としては、Expressのmiddlewareになる。 ライブラリを実装する Expressのmiddlewareとして利用できるライブラリで、機能としてはAuthorizationヘッダーのBearerトークンをreq.tokenから利用できるようにするもの。cookie-parserやbody-parserのように、req.○○○のプロパティアクセスができるようにするもの。 今回はかなり単純に以下のような実装にした。 import { Request, Response, NextFunction } from '
サーバーサイド・アプリケーション構築のための、軽量で開発者フレンドリーなTypescriptフレームワーク・「Expresso TS」 - かちびと.net
Expresso TSはサーバーサイド・アプリケーション構築のための、軽量で開発者フレンドリーなTypescriptフレームワークです。MITライセンスの元、オープンソースとしてソースコードが公開されています。 サーバーサイドアプリケーションの構築プロセスを効率化するために設計されたフレームワークで、読みやすく保守しやすくスケーラブル、明確且つ簡潔な構造にする事で開発プロセスの簡素化を目指しています。 ロギングシステムの設定や認証処理、データベース接続などアプリ開発で必須となる反復的で時間も取られる作業を引き受ける事で開発に集中できるようにしてくれるとの事です。ドキュメントも公開されているのでご利用の際はご参照ください。 Expresso TS
TypeScript Compiler APIを活用してi18nの不整合をチェックする - Commune Engineer Blog
こんにちは。業務委託としてコミューンのグローバルチームでエンジニアをしているhiro08と申します。 グローバルチームでは主に海外展開に向けた開発や施策を行なっています。もし、グローバルチームに興味のある方は日本のSaaSスタートアップが世界で戦うためのプロダクトを開発するということも一読ください。 今回はグローバルチームでの開発の一部として、TypeScript Compiler APIを活用したi18nの不整合をチェックするツールを作成したお話をしようと思います。 背景 海外展開に向けた開発でまず思いつくのがi18n (多言語化) 対応ではないでしょうか。コミューンのプロダクトではi18nの対応が完了しており、すでに運用フェーズに入っています。 しかし、運用していく中で対訳データのキーやネームスペースの不整合に気づく仕組みがないことが課題点として挙がってきました。 i18nでは、ネーム
ReactとTypeScriptでのコンポジションパターンをマスターする！再利用性と可読性を高める実践的テクニック - Qiita
ReactとTypeScriptでのコンポジションパターンをマスターする！再利用性と可読性を高める実践的テクニック こんにちは！今回はReactとTypeScriptを用いたコンポジションパターンについて深く掘り下げていきます。この記事を通じて、コンポジションパターンの基本的な考え方から具体的なコード例、さらにはそのメリット・デメリットまで、幅広く理解していただければと思います。 目次 コンポジションパターンとは Reactでのコンポジションパターンの利用 コンポジションパターンの具体的な例 コンポジションパターンのメリットとデメリット [より深いレベルでのコンポジションパターン: 高階コンポーネント(HOC)とレンダープロップス](#より深いレベルでのコンポジションパターン: 高階コンポーネント(HOC)とレンダープロップス) まとめ コンポジションパターンとは コンポジションパターンと
TypeScriptのモノレポ構成を考える
はじめにlink あまりモノレポの構成について語られている記事が多くないなと感じたので、現時点で自分が考えている設計をまとめてみる。 以前にTwitterでディレクトリ構成と内容については言及したが、実際に利用する技術についてはあまり触れなかったので改めて検証してみた。 https://twitter.com/koh110/status/1617510034266808322 クライアントサイドとサーバーサイドのコード共有については下記の記事がよくまとまっていた。 https://capelski.medium.com/effective-code-sharing-in-typescript-monorepos-475f9600f6b4 上記の記事の構成も参考にしつつ、自分の考えも加えて検証していく。 相対パスを利用する方法 npmのローカルパス指定（file:xx）を利用する方法 シンボ
【TypeScript】カリー化・部分適用は便利だよ！ - Qiita
【TypeScript】カリー化・部分適用は便利だよ！ カリー化・部分適用利用してますか？ 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引
Rust製TypeScriptコンパイラstcの現状と今後 | メルカリエンジニアリング
この記事は、Merpay Tech Openness Month 2023 の2日目の記事です。 メルペイFrontendエンジニアの@togami2864です。普段はPartner Platformというチームで加盟店申込みフォームや審査・管理を行うためのMerchant Supportツールの開発・運用を担当しています。 本記事ではRust製TypeScriptコンパイラであるstcについて筆者の観測範囲での概要、開発状況、課題等を紹介します。なお、内容は全て2023年5月時点のものです。また、本記事の一部は Node学園 41時限目 書籍について で発表したものと重複していることをご了承ください。 概要 stcは2022年10月にオープンソース化されたRust製のTypeScriptコンパイラです。 https://github.com/dudykr/stc 製作者はRust製のトラ
初めてのTypeScript
TypeScriptの本格的な入門書。TypeScriptは、世界で最もよく使われ、かつ最も好まれているプログラミング言語の1つです。本書では、JavaScriptの基礎的な知識のあるプログラマーを対象に、「型」や「型システム」の基本から、明快かつ包括的にTypeScriptを解説します。TypeScriptはバグやタイプミスを防ぎ、コードを読みやすくするのに有用なだけでなく、JavaScriptがどのように動くべきかを宣言し、それを維持するのに役立つ優れたシステムです。読者は本書を読むことで、TypeScriptの基礎と最も重要な機能をマスターできるでしょう。 賞賛の声 監訳者まえがき まえがき 第I部 TypeScriptの概念 1章 JavaScriptからTypeScriptへ 1.1 JavaScriptの歴史 1.2 バニラJavaScriptの欠陥 1.2.1 コストのかかる
React + TypeScript: flexDirectionをstyleに設定すると怒られる - Qiita
スタイルをオブジェクト(style)に定めて、要素のstyle属性に与えたら、flexDirectionだけ認めてもらえず怒られました。 変数にオブジェクトで定めたCSSのflexDirectionが要素のstyle属性に設定できない。 絞り込んだ問題のコードはごくシンプルです。何がいけないのか、よくわかりません。 エラーメッセージはつぎのとおりです。flexDirectionの型stringが弾かれているらしいことはわかります。 (property) React.HTMLAttributes.style?: React.CSSProperties | undefined Type '{ flexDirection: string; }' is not assignable to type 'Properties'. Types of property 'flexDirection' ar
TypeScript/Rollup/Vercelでサクッとブックマークレットを作ってみよう - Adwaysエンジニアブログ
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
2023-05-26のJS: wrangler v3.0.0、playwright v1.34.0、TypeScript 5.2の予定(変換プラグイン)
JSer.info #645 - wrangler 3.0.0リリースされました Improved local development with wrangler and workerd wrangler publishがwrangler deployにリネームされています。 また、wrangler 2.0でMiniflareを同梱していましたが、 3.0ではwrangler devでMiniflareとworkerd runtimeを使ったローカル環境での開発をデフォルトに変更しています。 Release [email protected] · cloudflare/workers-sdk playwright v1.34.0リリースがリリースされました。 Release v1.34.0 · microsoft/playwright Node.js 14のサポート終了、playwrigh
React + TypeScript: ImmerのuseImmerReducerフックでリデューサを書く - Qiita
Immerはデータ構造をイミュータブル(不変)に保つためのライプラリです。React公式ドキュメントの作例でもたびたび使われています(「オブジェクトをイミュータブルに保つ ー Immerを使う」など)。 Immerはイミュータブルなデータ構造を用いるさまざまな場面で使えます。たとえば、Reactの状態管理はそのひとつです。オブジェクトへの参照が変わっていなければ、オブジェクトもそのまま変更ありません。さらに、複製のコストは比較的低いです。データツリーの中で変更されていない部分は複製されることなく、以前の状態とメモリ上共有されます。Immerの基本的な使い方については、「React + TypeScript: Immerで状態をイミュータブルに保つ」をお読みください。 本稿でご紹介するのは、リデューサが簡潔に書けるフックuseImmerReducerです(GitHub「useImmerRed
TypeScriptマスターへの第一歩！型安全なJavaScript開発入門 - Qiita
1. TypeScriptの魅力と基本概念 この記事では、TypeScriptの基本概念や使い方について解説します。TypeScriptはJavaScriptのスーパーセットであり、型情報を追加することでより安全なコードを実現します。JavaScriptは動的型付け言語であるため、開発者が簡単にコードを書ける反面、実行時に型に関連したエラーが発生しやすいという問題があります。TypeScriptは、静的型付けを導入することでこの問題を解決し、より堅牢で保守性の高いコードを書くことができます。 TypeScriptが登場する前のJavaScript開発では、大規模なプロジェクトでコードの管理が難しく、予期しないバグが発生するリスクが高まっていました。TypeScriptは、型システムを導入することでコードの構造を明確にし、開発者が意図しない挙動を未然に防ぐことができます。また、型情報があるこ
TypeScriptをコンパイルしてWebAssemblyバイナリに、実現を目指す「TypeScript Compilation SIG」をByteCode Allianceが発表
TypeScriptをコンパイルしてWebAssemblyバイナリに、実現を目指す「TypeScript Compilation SIG」をByteCode Allianceが発表 WebAssemblyの普及と発展を目的とするByteCode Allianceは、TypeScriptのコードをコンパイルしてWebAssemblyバイナリを生成できるようにすることを目指すスペシャルインタレストグループ「TypeScript Compilation SIG」を発表しました。 WebAssemblyの仕様策定はW3Cが行っており、ByteCode AllianceはそのWebAssemblyを基盤として、クロスプラットフォーム対応を実現するAPI群のWASI（WebAssembly System Interface）やコンポーネントモデル、ガベージコレクション対応などの拡張、およびそれらの事実
React + TypeScript: コンポーネント間で状態を共有する - Qiita
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、基本解説の「Sharing State Between Components」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 ふたつのコンポーネントの状態を、つねに一緒に変化させたい場合があるでしょう。そのためには、状態をそれぞれのコンポーネントにもたせるのでなく、もっとも近い共通の親に移すべきです。そのうえで、親から子には値をプロパティで渡します。これは状態の引き上げ(リフトアップ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptでStringとstringどっち使うの問題 - Qiita
typescript-eslint v6 アップデートガイド - Realtime JSer.info
React + TypeScript: refで値を参照する - Qiita
Microsoft、「TypeScript」高速化のために開発した「Deopt Explorer」を一般提供／「V8」の内部構造を理解している上級ユーザー向けの「Visual Studio Code」拡張機能
【JavaScript/TypeScript】import/export from使い方まとめ - Qiita
