「プロを目指す人のためのTypeScript入門」読書感想文 - Qiita
ある日の我が家にて 娘（6歳）「ねぇ、パパ？」 ワイ「なんや？娘ちゃん」 娘「この絵本の、表紙の文字が読めないの」 ワイ「おお、ほなワイが読んであげるで」 ワイ「どの絵本や？見せてみ」 娘「はい、これ」 ワイ「おお、この絵本か」 ワイ「ファッ！？」 ワイ「娘ちゃん、これ絵本とちゃうで」 ワイ「技術書やで」 娘「そうなんだ」 娘「それで、その英語の部分は何て読むの？」 ワイ「これはな、タイプスクリプトって読むんや」 娘「TypeScriptってなぁに？」 ワイ「TypeScriptはな、JavaScriptに静的型システムを加えたプログラミング言語や」 娘「へぇ〜、そうなんだ」 娘「でも、どうしてTypeScriptが必要なの？」 娘「JavaScriptじゃダメなの？」 ワイ「それはな」 ワイ「TypeScriptの方が、ミスに早く気づけて便利なんや」 ワイ「例えば、普通のJavaScri
@ts-expect-errorを自動追加！suppress-ts-errorsの紹介
TypeScript の型チェックを厳格化したいが既存の型エラーが多すぎて、やむなく緩い型チェックにしている方へ改善の助けになりそうなツールを作ったので紹介です。 🔧 作ったもの プロジェクトのコードベースを走査して、型エラーがあるコードすべてに@ts-expect-error or @ts-ignoreのコメントを追加する suppress-ts-errors という CLI ツールを作りました。 以下の GIF のように npx 経由で簡単に利用できます。 さらに、ts、tsx だけでなくVue SFC のスクリプト部分へのコメント追加にも対応しています。 コードはこちらです。⭐ を貰えると泣いて喜びます。 なぜ作った？ 現職のプロジェクトにて型チェックを厳格化できていない（strict: trueにできていない）という状況を改善したいと思ったからです。 型チェックのルールを修正する
TypeScriptで作ったpackageをesbuildを使ってnpmに公開するまで
const { build } = require('esbuild') const { dependencies } = require('./package.json') const entryFile = 'src/index.ts' const shared = { bundle: true, entryPoints: [entryFile], external: Object.keys(dependencies), logLevel: 'info', minify: true, sourcemap: false, } build({ ...shared, format: 'esm', outfile: './dist/index.esm.js', target: ['ES6'], }) build({ ...shared, format: 'cjs', outfile: './d
TypeScript におけるモジュール関連オプションの整理
TypeScript 4.7 で “module” という名前で始まる Compiler Option がさらに追加されて、さすがに何が何やら感あるので、役割を軽く整理。 この記事では雑な紹介に留めるので、それぞれの詳細は TSConfig Reference を読みに行ってください。 対応関係ソースコードとそれぞれのオプションが何に作用しているのかを雑に図示するとこんな感じ。 重要なことどのオプションをいじっても、import 指定子 (上図の “./hoge” の部分) がコンパイル時に書き換えられることはない。 これが頭に入っていれば、.mts, .cts といった TypeScript のファイルで import "./foo.cjs" と書くことや、 --moduleSuffixes がソースコードの探索にしか影響しないことに得心できるはず。 --moduleTypeScript
TypeScript: const n=1とconst n:1=1は何が違うのか、なぜ違うのか
両者の違い エディタでホバーするといずれも 1 という型が表示され、一見同じことをしているように思えるかもしれません。しかし、これらは明確に違う型を持ちます。 その前に、すべての変数は、その変数の型とは別に、Type Narrowingという仕組みによって一時的に別の型として取り扱う機能があります。 それぞれ、仮に global type と narrowed type と呼ぶことにします。 すると、const n: 1 = 1 は (global type, narrowed type) = (1, 1) ですが、const n = 1 は (global type, narrowed type) = (number, 1) です。これは以下のようなコードで確認ができます。 const n: 1 = 1; const getN = () => n; // inferred as () =
ts-patternでTypeScriptにパターンマッチングを持ち込み、より型安全な世界へ
0. はじめに 現代のWebアプリケーションの開発言語として、TypeScriptはファーストチョイスの一つです。特殊なケースを除き、フロントエンドの開発言語にはTypeScriptが選ばれるため、言語を統一するメリットを優先し、バックエンドにもTypeScriptが採用されるケースはよく見られます。 またReactがClass Componentを捨てFunction Componentを採用した事件が象徴するように、現代のプログラミングパラダイムのトレンドとして関数型プログラミングがあります。そもそもJavaScriptの出自は、関数型言語をブラウザに搭載できると聞いてNetscapeへ入社したブレンダンアイク氏が、オブジェクト指向言語であるJavaのような言語を会社から要求され、開発したというものです[1]。そのためか、JavaScriptは未だ関数型言語としては未成熟で、関数型プロ
OpenAPI定義からTypeScript型を生成し、フロントエンド・バックエンド間でスキーマ駆動開発
最近、案件でGraphQLを使ったスキーマ駆動開発を行ったところ体験が非常に良かったため、OpenAPIでもスキーマ駆動開発を試してみました。 普及度でいうとOpenAPI Generatorの方が高そうですが、今回はAspidaエコシステムに乗ってみます。 Aspidaファミリーのopenapi2aspidaでOpenAPI YAMLファイルからTypeScriptの型定義を生成し、フロントエンド・バックエンドでimportして利用するようにします。また、バックエンドフレームワークにExpressを使用しているという前提で、express-openapi-validatorを設定しOpenAPIスキーマを元によしなにバリデーションするようにします。 Aspida選定の理由 OpenAPI GeneratorがJava製なのに対し、AspidaはTypeScript製のため、フロントエンド
GraphQL Code Generator(graphql-codegen) おすすめ設定 for TypeScript
GraphQL Code Generator v3 以降で標準となった Client preset では設定が大きく異なります。 この記事は Client preset を使わない前提の内容になっているため、注意が必要です。 Client preset 用の設定は別記事で紹介します。 全体 生成物をフォーマッタにかける graphql-codegen には Lifecycle Hooks という仕組みがあり、いくつかの用意された hook ポイントで任意のコマンドを実行できる。 これを使って生成されたコードを Prettier 等のフォーマッタに通しておくのがおすすめ。 基本 DO NOT EDIT とはいえ、コードジャンプしてきて生成された型を読みたいケースはよくある。 そういうときのために、人間が見やすいように改行しておいてもらうといい。 typescript plugin, type
中級者になるためのTypeScript習得方法 - ちょっと株式会社 社員ブログ
こんにちは。フロントエンドエンジニアのはしばです。 今回はTypeScript(以下TS)を学習していく際のおすすめの方法についてお話しします。 はじめに昨今のフロントエンド === TSでの開発といっても過言ではないほど密接な関係となっています。 ただ、調べていてもTSの習得に良い教材があまりなく苦労してしまう人も多いと思います(僕もたくさん苦しみながら習得していきました)。 慣れてしまえば「もはやTSがない世界なんて考えられない」となるのですが、慣れないうちは「なんで邪魔ばかりするんだｯ!!!」となってしまうこともしばしば。 そんな人たちが なるべく楽してTSを習得するためにおすすめの行動をまとめます。 ①まず導入する新規の案件に入ったら「今は」JSだけでいける開発でもとりあえずTSで開発できるようにしておきましょう。 うざったかったらルールを緩めにするとか、asやanyで簡易的に実装
JavaScript／TypeScriptランタイム「Deno 1.20」がリリース
「Deno 1.20」では、通信レイヤを最大60％高速化するように最適化すべく、Rust procマクロを活用して既存のRustコードから高度に最適化されたV8バインディングを生成することで、JavascriptとRust間のパフォーマンスを向上している。 DenoのネイティブHTTPサーバがレスポンスボディの自動圧縮をサポートするようになったほか、コードのベンチマークとしてdeno benchサブコマンドとDeno.bench() APIが追加された。また、コードベースの開発に固有のカスタムコマンドを定義および実行するための新たなタスクランナとしてdeno taskサブコマンドが追加されている。 さらに、Denoの設定ファイルにおいてインポートマップファイルを指定できるようになるとともに、HTTPS要求において証明書と秘密鍵を物理ファイルとしてディスクに保存することが非推奨となった。また
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ.React応用編】：くるみ割り書房
🔔「紙+電子セット」は BOOTH にて販売中！ https://oukayuka.booth.pm/items/2367992 📅 2021年 10月に第 3 刷を発行。内容を最新にアップデートしました。 ―― 実践的な React 本として評判の『りあクト！』シリーズ、三部作の第三部「React応用編」です。 第 3.1 版は React 17.0 と TypeScript 4.2、および Create React App 4.0 に対応した最新の内容となっています。 第三部ではまずルーティングを紹介した後、React の難関である副作用処理について本格的に学んでいきます。Redux とその公式スタイルガイド、Effect Hook と組み合わせた非同期処理の書き方、Redux の代替技術、さらに最新の Suspense までを紹介。 なお第一部ではフロントエンドのための Java
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【書評】「プロを目指す人のためのTypeScript入門」 TypeScript をこれから勉強したい人にも、これまで使ってきた人にもおすすめの一冊 | DevelopersIO
TypeScriptのオブジェクトリテラルとオブジェクト型を理解したい - Qiita