TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
TypeScript Clearly & Quickly
2024-01-01 quick-lint-js is a JavaScript bug finder. Today, version 3.0 makes it also a TypeScript bug finder! quick-lint-js complements TypeScript with beginner-friendly messages and fast linting. install quick-lint-js 🌐 try in browser code on GitHub Example code used in this article has been adapted from various open source projects, including some Copyright Tiny Technologies, Inc. and Copyrigh
モジュール解決 | TypeScript 日本語ハンドブック | js STUDIO
このセクションは、基本的なモジュールの知識があることを前提にしています。 詳しい情報については、モジュールのドキュメントを参照してください。 相対(Relative) vs 非相対(Non-relative)モジュールimport モジュール解決の方針 拡張モジュール解決フラグ モジュール解決のトレース --noResolveの使用 よくある質問 モジュール解決は、importが何を参照するのかを把握するために、コンパイラを利用するプロセスになります。 import { a } from "moduleA";のようなimport文について考えてみてください。 aの使用するために、コンパイラは正確に何が提供されているのかを知る必要があり、 またmoduleAの定義を調べる必要もあります。 ここで、コンパイラは"moduleAはどのような形状をしていますか?"と尋ねます。 これは一見単純なよう
【OpenAPI】APIスキーマから勝手に型がつくaxiosを作って幸せになる【openapi-typescript】
はじめに axiosの型付けはどうやらそれなりに頭を悩ませる課題のようです。 実際にuhyo氏のTwitterでのTypeScriptコミュニティにて以下のような質問がありました。 私もaxiosの型付けに悩まされた一人です。 最近それなりに幸せに型付けできる方法が整理できたので、自身の備忘録も兼ねてまとめます。 前提として、openapiファイルが用意されていることとします。 コード例は下記レポジトリに配置しております。 幸せになるとは何か 結論から言うと次のような型の補完が効き、かつ型安全なaxiosのrequest APIのカスタムAPIを作る事です。 URLパスの補完が効いていて、 実装されているHTTPメソッドの補完も効いており、 パラメータの型も補完され、 レスポンスの型も手に入るrequest APIです。 見た目上は、request APIですので、axiosのドキュメント
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
なぜ default export を使うべきではないのか？
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
この TypeScript が Hello, world! のくせに慎重すぎる - Qiita
この記事は npm へ公開可能なパッケージを TypeScript で作成しながら、JS/TS 開発で良く使われるツールを紹介する記事です。 typescript-npm-starter という名前の Hello, world! パッケージを公開するという体で話を進めます。
Convert JSON to Swift, C#, Java, C++ and more • quicktype
Convert JSON into gorgeous, typesafe code in any language. Generate models and serializers from JSON, schema, and GraphQL for working with data quickly & safely in any programming language. Generate Code Now { "people": [ { "name": "Atticus", "high score": 100 }, { "name": "Cleo", "high score": 900 }, { "name": "Orly" }, { "name": "Jasper" } ] }Provide sample JSON files, URLs, JSON schemas, or Gra
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
JS知識ほぼ0からTypeScript入門してる - たにしきんぐダム
この記事は CAMPHOR- Advent Calendar 2016 23日目の記事です。 JS知識ほぼ0は言い過ぎかもしれないが、いわゆるモダンJSというものには縁遠く、つい最近まで jQuery をブラウザからぽちぽちダウンロードして適当に ajax とか使う人生を送ってまいりました。(当然フレームワークとか使ったことない) まさしくこの記事みたいな状況 kikuchi1201.hateblo.jp 最近 TypeScript を書く機会があって、開発環境は用意されてるのでなんとなく書けるけど、エコシステムとかいろいろ全くわかってなくてこのまま旧石器時代然としたJavaScriptを書いていてはまずい気がすると思って勉強することにしました。 目標は TypeScript を使ってこんなんを作る、テストも書こうね(こんなのに何をテストするんだ) この記事では主に環境構築~DOM操作のテ
JavaScript Decorators - Qiita
JavaScript, TypeScript界隈におけるDecoratorsについて取り上げます。 JavaScriptとDecorators JavaScriptでは馴染みのなかったDecoratorsが目に触れるようになったのはAtScript発表の際だったと記憶しています。 AtScript AtScriptとは、2014年10月23日、ng-europeにて発表されたTypeScriptを包含する「新構文」です。 docs.google.com | Keynote AtScript YouTube | Miško Hevery - Keynote on AtScript at ng-europe 2014 このときの例文を引用します。 @Directive({ selector: ['[blink]'] }) class Blink { constructor(element:El
TypeScriptとECMAScript 6 - Qiita
来たる8/23(土)にLL Diverというイベントでmozaic.fm出張版があって、そこで適当にTypeScriptの何かを話す予定なので、ECMAScript 6の予習をしていきます。 司会のJxck先生は知識量豊富なので予習していかないとボコられて恥を晒して死んじゃうからね！ あんどうやすしさんは優しいと思うんだけど！！ 参考資料 わかめのECMAScript6のはてブ ECMAScript 6のドラフト(ログ) ECMAScript 6で提案されたもの ECMAScript 6 compatibility table es6-shim ECMAScript6をまるっと学ぶ。重要用語とか、仕様策定の進め方とか、新機能とか。 traceur-compiler入門 ECMAScript6をまるっと学ぶ。はすごい参考になったのでぜひ読むべきそうすべき。 この辺りをガシガシ読んでこの記事を
Announcing TypeScript 1.0 - TypeScript - Site Home
TypeScript 1.0 Today, we’re happy to announce TypeScript 1.0. First, we want to give a big “thank you!” to everyone who has helped us over the last year and a half to meet this goal. Together, we’ve grown a language, tools, and a community around creating large-scale JavaScript applications. To help grow this community further, we’re opening up TypeScript for contributions from the community start
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flowtype Introduction