tsconfigのmoduleとtargetには何を設定すればいいか - TypeScript - Qiita
TypeScriptの設定ファイルを雰囲気でコピらないための記事 TL;DR moduleはどのモジュールパターンで出力するかを指定する Node.jsでの利用想定ならcommonjs ブラウザ側での利用ならumd targetはどの動作環境向けにトランスパイルするかを指定する 利用環境が想定できないならes3やes5 下位互換性のあるコードへの変換をBabelで行うならesnext module とは JavaScriptにはいくつかのモジュールパターン（CommonJSやAMD、ECMAScriptなど）がある。TypeScriptをJavaScriptに変換する際、どのモジュールパターンにするかをmoduleに指定する必要がある。 moduleには'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'
TypeScriptでキャッチされたエラー情報を型安全に扱いたい - FLINTERS Engineer's Blog
こんにちは。中途6ヶ月の生田です。 現在は GANMA! というサービスの管理画面開発でWebフロントエンドを担当しています。 今回は実業務で直面した以下の課題について、キャンプ1期間にどう対処していったかをご紹介します。 TypeScriptでエラー処理をいい感じにしたいが例外機構によってthrowされるオブジェクトがanyで辛いのでEither2のようなものを返り値として対処してみる ◇ 目次 ◇ 目次 ◇ 前提 ◇ 課題 TypeScriptではcatch時におけるthrowされたデータはany ◇ 方針 説明用設定 案1. 呼び出す側で型を指定する 案2. throwableな処理をラップしてEitherのような返り値で表現する ◇ 実装編 1. TypeScriptでEitherのようなものを実現する 1-a. Result<T, U>のように書ける 1-b. Result型は利
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
type-fest でおくる快適な型ライフ
はじめに 個人的にではありますが、型ロジックを書くのに最近ハマっていました（型パズルと呼ぶ人の方が多いかも）。私が最近使っていた type-challenges には、こういう型を書いてみなさい？ と言う型ロジックの問題集が用意されており、非常に練習になるのでおすすめです。 はてさて、本日、この記事を書こうと思った理由としては、もう型ロジック書きたくないなぁ、型ロジックをまとめたライブラリもあるだろう、と思って github をサーフィンしていたところ、type-fest と言うまさにこれを探していたと言うライブラリがあり、かなり良かったのでその紹介記事です。 余談 これは余談ですが、IsEqual と言う型を書いたプルリクが type-fest にマージされ、先日、リリースされました。はじめてのまともな OSS へのコントリビュートだったので（= 以前のコントリビュートはまともじゃなかっ
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
敗北者の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はJavaScriptに静的型を導入したプログラミング言語で、登場から現在までその人気を増し続けています。 動的型付き言語であるJavaScriptに静的型の安全性（コンパイル時にバグ・間違いを発見することができる能力）を与えることで、TypeScriptはJavaScriptによる開発の効率を上げてくれます。 裏にJavaScriptがあるという特性もあり、TypeScriptは「部分的に静的型チェックをする」というような挙動をサポートしています1。詳しくは後述しますが、これによりJavaScriptからTypeS
TypeScriptのエラーメッセージを見やすくしてくれるVSCode拡張機能「Pretty TypeScript Errors」の紹介
type User = { id: number; name: string; notes: { title: string; tags: string[]; }[]; }; type GetUsers = () => User[]; export const getUsers: GetUsers = () => { return { id: 1, notes: { title: "test book", tags: ["test", "hoge", "fuga"], }, }; }; すると vscode 上ではこんな感じにエラーが出てきます。 1 行程度のメッセージならまだしも、少し長いメッセージになると改行もなく読みづらい上に、エラーコードもプログラム（PROBLEMS）タブからコピペする手間がかかります。 Pretty TypeScript Errors によって解決されること P
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
TypeScript で書く React コンポーネントを基礎から理解する - Qiita
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
TypeScript + VSCodeで快適プログラミング｜erukiti
JavaScript大好きの皆様ごきげんよう。 今回は、JavaScriptのスーパー強い版であるTypeScriptとVSCodeの組み合わせがとても快適である！という記事をお送りします。 JavaScriptJavaScriptは、RubyやPHPなどと同じ、いわゆる動的型付け言語です。 const hoge = (arg) => console.log(arg + 1) hoge(1) // 2 hoge('1') // 11 hoge([1, 2]) // 1,21この hoge という関数は引数 arg に、数字、文字、配列などどういう型のデータでも突っ込めますが、配列を入れた場合の挙動とか、誰得な感じがするので、数字だけを入れたいとします。 const hoge = (arg) => { if (typeof arg === 'number') { console.log(ar
次にJSガッツリ書くときは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厨（同僚談）になっているyprestoです。 AndroidでKotlinがどんどん採用されていくのを横で指を加えて見てるわけには行かないので、JSにもTypeScriptをぶち込みました。SwiftかKotlinを書いたことがある人ならばすっと馴染むと思います。 新しく書くJSはもう基本的にTSで書いてます（botすらTypeScriptに書き換えて引かれましたｗ）。ちょうど1年前からガッツリ使っていたので知見を垂れ流すフェーズに入ります。 完全な初級というよりは、ちゃんと使いたい中級な人向けに、基本的な使
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
type-challenges/README.ja.md at main · type-challenges/type-challenges
React.FC使う必要ある？ - Qiita
サーバーサイドエンジニアも知っておくべきフロントエンドの今
VSCodeでTypeScript/Node.jsの開発環境を作る（UT・カバレッジ・ログ出力・リリース手順含む） - Qiita