皆さんこんにちは。早速ですが、TypeScriptのmoduleオプションはご存じでしょうか。moduleオプションは、例えば次のような値をサポートしています。 commonjs umd es2015 esnext node16 nodenext 皆さんは、moduleオプションが何を設定するオプションなのか一言で説明できますか？ 実は、TypeScriptの熟練者であってもmoduleオプションを一言で説明することは難しいはずです。なぜなら、そもそもこのmoduleオプションが複数の異なる意味で使われており、もはや一言で説明できるようなものではなくなってしまったからです。 この記事では、TypeScriptのメンテナーが書いた次のGitHub issueをベースに、moduleオプションを取り巻く状況を説明します。 moduleオプションの意味とは 昔はmoduleオプションの意味は明確
The FullScreenMario project burned brightly for a few short weeks in October 2013 after Boing Boing lauded it as “a pretty impressive example of what HTML5, in-browser functionality can do.” A few days later, it went viral on Reddit and by November, attention turned to scrutiny, and Nintendo took the project down with a DMCA request. Josh Goldberg speaks of his former project with a bit of pride—i
このようにさまざまなデコレータが用意されていますが、今回はサンプルで利用するデコレータに絞って説明します。他のデコレータについては、NestJSの公式ドキュメントなどを参照してください。 依存性注入（DI） 依存性注入（DI、Dependency Injection）とは、クラスの依存関係を解決する仕組みです。NestJSでは、依存性注入を使ってクラスの依存関係を解決します。 クラスの依存関係とは、クラスが他のクラスに依存している関係のことです。例えば、次のようなクラスAがあったとします。このクラスは他のクラスに依存していません。@Injectable()デコレータを使って、サービスを定義します。 @Injectable() class A { constructor() {} } そして、次のようなクラスBがあったとします。このクラスは、@Inject()デコレータを使って依存性を注入し
At work we have a number of front-end projects that are worked on by different project teams. Each of these projects are designed by our internal designer and had a lot common with them (same inputs, buttons designs etc). Up until now, we had no shared style-sheets or components. Components across projects were created from scratch, rewritten or copy pasted over each time. I saw a real need for an
Babel で学ぶ TypeScript トランスパイル何気ない生活の中で「 TypeScript をパースしたい！」という感情が湧き上がって Babel のパーサーをちょっと触ったのも何かの縁なので、 AST とトランスパイラについて書きます。 そもそも AST とは Abstract Syntax Tree の頭文字を取って AST です。日本語で言うと抽象構文木ですね。アスパラギン酸アミノ基転移酵素ではありません。 フロントエンドエンジニアであれば Tree と聞いて思い出すのは DOM Tree や CCSOM Tree だと思いますが、同じ意味合いの Tree です。 具象構文木から不必要な情報（カッコなど）を取り除いた構文木が抽象構文木であり、構文解析によって作られます。 JavaScript においては、 Babel というライブラリが @babel/parser (故 ba
パッケージを使う人にもTypeScriptによる型の享受を目指すパッケージを公開するときは、動作する形で公開するのが前提なのでjsにする必要があります。つまりコンパイルは必須です。ですがせっかくTypeScriptで作ったのだからパッケージの型情報も提供しましょう。 型定義ファイルも出力する型定義ファイルを一緒に出力しましょう。そのためにはtsconfig.jsonにあるdeclarationの項目をtrueに変更します。
そんなオプションあったんですか TypeScript2.7で追加されたらしい。 デフォルトでtrueとなるオプション。 Announcing TypeScript 2.7 | TypeScript まずはどうなるかチェック tsconfig.jsonにesModuleInterop: falseをセットした時と、esModuleInterop: trueをセットした時で違いを見る。 オプションなし //controller.ts //falseの場合、CommonJSはrequireで読み込まなければならない import commonjs = require('../CommonJS') import esmodule from '../EsModule1' import * as esmodule2 from '../EsModule2' const commonobj = new c
Node.jsの普及によって、JavaScript/TypeScriptはフロントエンドだけの実装言語ではなくなりました。 Express等のWebサーバーや、Lambda等のサーバーレス環境でバックエンド処理として使われることが当たり前になりました。 最近はもっとバリエーションが増えていますが、一般的にバックエンドサービスだとRDBアクセスが定番モノと言えます。 ここでは、そんなJavaScript/TypeScript向けのORマッパーのTypeORMをご紹介します。 TypeORMはフルスタックのORマッパーで、特に実装言語としてTypeScriptを利用すると、その型付け機能をフル活用できます[1]。 もちろん、PostgreSQL、MySQL、Oracle、SQL Server等のメジャーなRDBはフルサポートされています。 また、実験的(experimental)ではありますが
この記事は 2020 年 9 月開催の技術書典9 に合わせて刊行された『りあクト！ TypeScript で始めるつらくない React 開発 第3版【Ⅰ. 言語・環境編】』の中の「2-9. モジュールを読み込む」の前半の内容を理解・分解・再構築したものです。 https://oukayuka.booth.pm/items/2368045 私たちは React や Vue.js のコードで気軽に import / export を書いて他のファイルの中身を読み込んでいますが、それができるようになるまでにどんな歴史的経緯があったか、そして実際にはそれがどのように変換され動作しているのかが物語風にわかるようになっています。 なおオリジナルの本では厳密なキャラ付けがなされているのですが、ここでは別の世界線の 2 人の会話と考えてください。
はじめに @babel/preset-typescriptというBabelのプリセットが出て以来、tscコマンドではなくBabelによって、TypeScriptで書いたコードをJavaScriptに変換できるようになりました。既にtscコマンドを日常的に使いながらTypeScriptを書いている人には影響はないですが、これからTypeScriptで書いてみようという人（かつ、既にBabelに慣れている人）にとっては、TypeScriptとの付き合い方の選択肢が増えたことになります。 この記事では、Babelでできるようになった事の範疇や、今まで通りにtscコマンドに担ってもらう事について、設定例を交えながら整理していきます。 前提として、Babelのバージョンは7が対象です。 @babel/preset-typescriptが出る前は 大まかに示すと、TypeScriptでコードを書く際は
このエントリの内容 このエントリは、javascriptの型チェックをすることができるtypescriptの機能 @ts-check について紹介し、個人的に感じた便利なところや使い所を紹介していきます。 このエントリの読者は以下のような人を想定しています。 レガシーな環境でTypeScriptを導入しづらいが、複雑化するコードベースを少しでも楽に保守したい人 TypeScriptに興味があるが、昨今のjsのツールチェインについていけず、とりあえず試してみたい人 @ts-checkとは @ts-checkとは、JavaScriptファイルの先頭に //@ts-check というコメントをすることで、TypeScriptコンパイラや、TypeScriptを標準で型チェックできる VSCode により、JavaScriptファイルに対してTypeScript相当の型チェックを行う事ができる仕組
※近所（同じ港区内）のあのIT企業さんからお声をかけていただきました。登壇予定です。 ※某商業誌さんから執筆依頼がありましたが、有料ですと気が引けるのでお断りしました。 Vimで書いている人はもういないから、そろそろTypeScript（自転車の補助輪）を外していこうという話。 Visual Studio Code は下のリンクからインストールできる。これが前提。 VS Code で // @ts-check が利用できる。 ※Denoの話を知らない人は、これを読むと良い。 DenoがTypeScriptの使用をやめる5つの理由 （Denoは、Node.jsの作者であるライアン・ダールによって作成され、V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、JavaScript及びTypeScriptのランタイム環境である。セキュリティと生産性に焦点を当てている） ※T
背景 注意) サーバサイドはC#で書く前提です。 こんなご時世なのでサーバとクライアントを通信させない、なんて事は滅多にないでしょう。 その際皆さんは通信の中身というかコンテンツ、要するにWEB APIの場合はhttpのbodyですが、をどのような形で定義/シリアライザして運用しているでしょうか？ おそらく大多数がJSONとしてシリアライズされた文字列を乗っけて通信させていると思います。 めんどくさいのが、どのようにクライアントとサーバ間のシリアライズされたデータの型の整合性を取るか、という事です。プロパティ名をタイポしてシリアライズでこけたりね、あると思います。 JSONを使う場合、もっとも素朴にはサーバ側で定義した型のプロパティ名などをぺちぺち手作業でクライアント側にもコピペして、型も一致するように手動でアノテーションしていくという事でしょう。 ちょっとしたプロトタイプくらいならこれで
こんにちは。キャスレーコンサルティング LS（リーディングサービス）部の清水（皓）です。 業務で自動テスト環境を構築する機会があり、Selenium＋ImageMagick＋C#でブラウザテストを書きました。 私はコーディングするのは好きですが、テストを行うことは苦手です。 しかし、書いたコードはテストしないと、頭の中で繰り返し書いたコードを思い出し、 バグを見つけてしまい、夜も眠れなくなってしまいます。 そこで、品質と生産性、心の安定を求めて他のテストツールにも興味が湧いたのですが、 今回はその中でも色々と便利に使えそうな、WebdriverIOを勉強中のTypeScriptで使ってみました。 TypeScript、WebdriverIO、Seleniumで自動テスト環境を構築し、テストを自動化していきましょう。 自動テスト環境を整備することで、リグレッションテストが効率化され、新規開発
TypeScriptの型システムは不完全です。 型システム上しょうが無い所も、どうしてそうなってるのって所もあります。 この記事では共通認識となっているようなものから、あまり認知されていないものも含め、TypeScriptの安全性の穴になり得る所を紹介します。 tsconfig.json 項目が大量にありますが、この記事では型安全性に大きく影響のあるオプションのみ紹介します。 strict このオプションが無効だと型安全性が大幅に失われます。 具体的にはnull | undefinedが無かったことにされたり、暗黙のanyが大量発生したりします。 なんでデフォルトがfalseなんですか？ 詳しくはこの記事を読んでください。 noUncheckedIndexedAccess このオプションがfalseの場合、インデックスシグネチャへのプロパティーアクセスが型安全ではなくなります。 const
概要 この記事では Visual Studio を使って、ASP.NET Core + TypeScript を使い package.json で取得したモジュールを呼び出す方法=webpackを使う方法を説明します。 Visual Studioを使っていないプログラマーにはそのまま役には立ちませんが webpack の使い方を知ることはできると思います。 Visual Studioは npmのプロジェクトをpackage.jsonやnode_modulesなど含めて素のまま扱うからです。 前提 前提１．Visual Studio 2019 この記事の内容を実際に試すには、Visual Studio 2019が必要です。 この記事の内容は Visual Studio 2019 (16.8.3)で確認しています。 前提２．Node.js がインストールされている Node.js がインスト
React TypeScript Cheatsheet の Useful Patterns by Use Case の Wrapping/Mirroring に答えが書かれていました。 自分は function でなく const で作成することが多い(どっちが良いんですかね？)ので、以下のように書くのが良さそうです。 import React, { ComponentPropsWithoutRef, FC } from "react"; export type ButtonProps = ComponentPropsWithoutRef<"button"> & { specialProp?: string; }; const Button: FC<ButtonProps> = ({ specialProp, ...props }: ButtonProps) => { console.lo
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=
2019.08.02 に関西Node学園 7時限目で発表したスライドです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
