TSyringeの使い方とコンテナ登録方法ごとの評価タイミングについて | DevelopersIO
吉川@広島です。 TypeScriptのDIコンテナライブラリはInversifyJSとTSyringeが有名ですが、より機能がミニマムと思われる後者に興味が出たため使ってみました。 https://github.com/microsoft/tsyringe 一番メジャーなInversifyに比べるとTSyringeはやや情報が少ないのと、公式のREADMEもかなりあっさりとしていて使い始める際に戸惑いやすいと思いました。 本記事では、 基本的な使い方 コンテナに登録したクラスのインスタンスをいつ生成しているか を確認したので紹介します。 後者が気になった理由は、DIコンテナへの登録は遅延評価方式に寄せた方がアプリケーション起動時のパフォーマンスに有利に働きやすいと考えるためです。 環境 TSyringe v4.4.0 使い方 import 'reflect-metadata' impor
create-react-appで React + Typescript な環境を構築する - Qiita
はじめに facebook社公式のReactプロジェクト生成ツールである create-react-app が 2018/10/29リリースの v2.1.0 でTypeScriptをサポートするようになりました。 とても簡単に React + Typescript の開発環境を構築できるようになっているので、その方法をまとめています。 よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。 尚、執筆時のバージョンは以下のようになっております。 最新の方法について知りたい方は 公式ドキュメント をご覧ください。
TypeScriptのゾッとする話 ~ Zodの紹介 ~
現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 と思った私は、TypeScript First なライブラリである Zod を知人に紹介して、事の真意を確かめようとしたのでした。 怖いならもっと怖がらせてやろうと思ったのは内緒 🤫 しかし、知人に紹介するだけでは勿体ないので、今回は皆さんに知見を交えながら Zod の事を紹介していこうと思います
OpenAPI Generator と TypeScript で型安全にフロントエンド開発をしている話 - SmartHR Tech Blog
こんにちは、SmartHR でフロントエンド開発を担当している @Tokky0425 です。 この記事では、私のプロダクトでの OpenAPI Generator を使ったフロントエンド開発の取り組みを紹介していきます。 目次 OpenAPI とは 「ラクラク分析レポート」の DX 上の課題 OpenAPI Generator とは 実際に generate してみる 生成ファイルを使ってみる 型情報を出力してみる 組み込み・運用の工夫 chokidar で監視する lint-staged に組み込む メリット・デメリット メリット デメリット まとめ OpenAPI とは OpenAPI とは、「REST API のドキュメントの記述形式を定めた仕様」のことを指しています。 簡単な例ですが、下記のような YAML ファイルがあるとします。 schema.yml paths: "/some
TypeScriptとOpenAPIスキーマで型安全に READYFORが語る“スキーマファースト”で効率的な開発方法
「実践！フロントエンド分離戦略」はREADYFOR 株式会社主催のエンジニア向けLT勉強会です。ここで、菅原氏が「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」のタイトルで登壇。スキーマ駆動開発とそのメリット、活用しているツールについて話します。 READYFORのフロントエンジニア 菅原弘太郎氏（以下、菅原）：それでは「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」と題して、発表します。自己紹介します。2020年11月に、フロントエンドエンジニアとしてREADYFORに入社しました。岩手県在住で、フルリモートで勤務しています。ReactとTypeScriptが好きで、React Hook Formのメンバーなので、もしフォローしてくれる方がいれば、フォローしてください。 フロントエンドとバックエンドの分離
TypeScript で記述した Google Apps Script を clasp と GitHub Actions を使ってデプロイする | DevelopersIO
TypeScript で記述した Google Apps Script を clasp と GitHub Actions を使ってデプロイする TypeScript で記述した Google Apps Script を clasp と GitHub Actions を使ってデプロイし、トリガーを使った定期実行をしてみました。 @google/clasp を使うことで CLI で Google Apps Script (GAS) を扱えるため、コードを Git で管理できるようになります。 今回はコードを GitHub で管理し、テストと clasp push を Github Actions で実行できるようにしてみます。 最終的な完成物は下記のリポジトリになります。 https://github.com/hbsnow-sandbox/clasp-github-actions-exampl
独立したコアレイヤパターンをJavaScript(TypeScript)で実装してみる
@shin1x1さんの独立したコアレイヤパターンを JS(TS)でも利用できるといいかなと思い、サンプルコードを作成してみた。 独立したコアレイヤパターンとは？ アーキテクチャパターンのひとつ コアレイヤとアプリケーションレイヤの 2 つのレイヤからなる コアレイヤ コアレイヤロジックやビジネスロジックを実装する 外部の IF(WebAPI や DB の orm など)には依存しない アプリケーションレイヤ コアレイヤと外部の IF の連携を実装する 外部の IF(WebAPI や DB の orm など)に依存する スーパーヒーローがいなくても使えるパターン ゴール サンプルとして、記事に対するファボ(お気に入り)を設定・解除する機能のユースケースを作成する。 サンプルリポジトリ ohnaka0410/Vue-Ts-Independent-Core-Layer-Pattern 実装 ベー
Google Apps Script の拡張サービスの TypeScript 用型定義ファイルの自動生成 - クックパッド開発者ブログ
こんにちは、メディアプロダクト開発部の後藤(id:mtgto)です。 今回は Google Apps Script の28個の拡張サービスについて、 TypeScript 用の型定義ファイル (@types/google-apps-script) を、Web エディタのオートコンプリートマクロ用のデータから自動生成するプログラムを作成した話を紹介します。 Google Apps Script の紹介 読者の皆様はGoogle Apps Scriptはご存知でしょうか。名前は聞いたことがあるけど使ったことはあまりないという方が多いでしょうか。 Google Apps Script を使うことでドキュメント、スプレッドシート、スライド、フォームといった Google サービスのデータの取得・更新などを ECMAScript のプログラムから行うことができます。 例えば、 スプレッドシートのセル
Google TypeScript Style Guide
// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
2021年のTypeScriptベストプラクティス - 西尾泰和の外部脳
5: テストコードで、型の要求を部分的にしか満たさないアドホックなオブジェクトをanyにキャストしてモックとして使うのではなく、ちゃんとしたモックを一箇所で定義してそれを使え 6: オブジェクトの種類によってあるプロパティを持っていたり持っていなかったりする時に、?でオプショナルなプロパティにするのではなく、どういう種類の時に持っているのかをインターフェースで明示せよ
TypeScript の型定義に凝りすぎじゃね？ - Neo's World
TypeScript の型定義に凝りすぎじゃね？ ここ数年で、Qiita や Zenn で TypeScript の話を見かける機会が多くなった。JavaScript には Java のような型定義がなく、初心者の混乱の元・ひいては障害の元になりうるのはよく分かる。 しかし、最近どうにもこうにも、TypeScript でむりくり型定義するような Tips を多く見かけて、疑問に思っている。たかが TypeScript に頑張り過ぎじゃね？ と。 【TS】TypeScript 4.0 の新機能 - Qiita こういう新機能とか、追加されるのはいいんだけど、本当に便利なんか？と思ってしまう まず、TypeScript による型定義は単なる Linter でしかない。コードが実行される時は基本的に JavaScript に変換され、TypeScript の構文で記した型定義は消失する。コーディ
Node.jsのORMについて - uki00a
ここにある内容はあくまで筆者個人の意見や経験などに基づいたものなので、鵜呑みにはせず、あくまで参考程度にとどめていただけると幸いです🙏
TypeScript で type と interface どっち使うのか問題
はじめに あくまで一個人の意見なので絶対的な解ではないというのと、どっちをデフォルトに選んでも普通にアプリケーション開発してて困ることはほぼほぼないと思うので、そこまで気を揉むことでもない、ということだけ最初に述べておいて意見をしたためます。 TL;DR アプリケーション開発では基本的に type でおk Declaration merging したい時だけ interface ライブラリ開発のような使う側で拡張したい(Declaration merging したい)時は interface とりあえずチームでどっちをデフォルトにするかは統一しといた方が気持ちいい type と interface の違い 機能的にはそんなに大きな違いはなく、個人的に判断に関わるのは次の3つかなと思います。 interface では Declaration merging がされる。type ではされない
【React+TypeScript】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。 【学べる事】 - Reactの関数コンポーネントとTypeScriptの基礎理解 - React Hooksによるstate管理 - Reactでの外部APIとの連携方法 - Postmanを使ったAPIテストの方法 - コンポーネント分割の考え方 - Tailwind CSSの基礎理解 - Vercelを使ったデプロイ方法 【余談】 また直接、プロダクトコードには関連しないですが、余談として以下の解説も行なっています。 - APIとは？ - HTTPステータスコードのついて - ReactフレームワークとReact環境の選択肢 - .envについて - 非同期処理について - スプレッド構文とは？ - 三項演算子 VS 条件式(if
TypeScript で querySelector メソッドを使うときに型引数を指定する - Hatena Developer Blog
こんにちは、エンジニア職の id:nanto_vi です。(この記事は、はてなエンジニア Advent Calendar 2020 の 12 日目の記事です。昨日は id:cohalz さんによる「Webサービスのモニタリングについてのチェックリスト」でした。) 結論 TypeScript で querySelector、querySelectorAll メソッドを呼び出すときは、型引数を指定しましょう (メソッド名の直後の < > で囲んだ部分です)。 const foo = document.querySelector<HTMLElement>('.foo'); if (foo) { foo.style.display = ''; } const bars = document.querySelectorAll<HTMLInputElement>('input[name="bar"]'
2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した
この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手の向上 Vercel によるISRの発明 prisma の成熟 Vercel / Serverless / Cloudflare Workers / Cloudrun 等による Node.js サーバーの運用コスト減 参考: Frontend Study #1: 基調講演 - Frontend 領域を再定義する Blog - Next.js 9.3 | Next.js R
新規機能はどんどんコンポーネント化 Vue.js + TypeScriptで開発してよかったこと・つらかったこと | ログミーBusiness
株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「Vue.js、React、TypeScript、E2Eテスト」をテーマに、「楽楽勤怠」の機能開発を担当する北嶋初音氏が登壇し、「Vue.js + TypeScriptによる新規サービス開発の振り返り」という内容で話をしました。関連資料はこちら。 会社初のフロントエンドエンジニア 北嶋初音氏（以下、北嶋）：では、「Vue.js + TypeScriptによる新規サービス開発の振り返り」と題して、UI開発課の北嶋初音が発表を始めたいと思います。 まず軽く自己紹介します。名前は北嶋初音と言います。経歴ですが、2016年の4月からWeb系のITベンチャーに新卒入社しまして、Webエンジニアとしての経験を積みました。次は自社サービスを作っている会社で働きたいという気持ちがあったので、転職活動を始めて、今年の1月から
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Building a React app with TypeScript and Material Design
【TypeScript】Utility Typesをまとめて理解する - Qiita
TypeScriptの設定の良し悪し
