JavaScriptで中規模開発を行うためにTypeScript3(とYarn, DefinitelyTyped, Jest, CircleCI)を導入するTypeScriptCircleCIJeststandard はじめに TypeScriptはJavaScriptに静的型付けを導入したスーパーセット(上位互換)な言語です。 静的型付けされるのでJavaScriptより大規模な開発に向いています。 僕自身が小規模案件より中規模案件を担当することが増えてきていて、今後ももっと中規模案件を管理するためにTypeScriptの導入を進めています。 新しい言語ということでまだまだ枯れていないTypeScriptなのですが「2018年現在、とりあえずTypeScript書きたいな」という場面のために何をすれば良いかをまとめてみました。 TypeScript本体は2018年8月時点でバージョン3.
JavaScriptでも静的な型が求められるようになりTypeScriptやFlowが使われるようになってきました。 しかし、それらが無かったころのJavaScriptのコードやトランスパイラを使わずに開発している人はいてると思います。 この記事はコードの変更なしでJSDocのみで型検査をする方法を紹介します。 TL;DR JSDocの型定義で型チェックをする TypeScriptのallowJsとcheckJsを使う 必要に応じてd.tsをインストールする JSDocの型定義 TypeScriptやFlowが登場するより前からJSDocは存在します。JavadocやPHPDocのJavaScript版のようなものです。 そのJSDocは型定義が書けるようになっています。 エディタによってはJSDocの型定義で型のチェックを行ってくれることもあります。 JSDocについては@use JSD
プリミティブ型 プリミティブ型としてNumber, Boolean, String, Void, Null, Undefinedが用意されている。 ソースコード中では以下のように書かれる。 number boolean string void(変数としては定義不可) null(同上) undefined(同上) 宣言では小文字を使う。(JavaScriptにNumber, Boolean, Stringという型が存在しており、TypeScriptでは暗黙で変換されるが小文字で書いておく。 Any型 従来のJavaScriptの変数型。 コンパイルエラーにならない。 濫用すべきではないが、JSONを扱う場合や、止むを得ずチェックを回避するためキャストするなどの用途にも使用。
タイトル通りのことをやっていきます。だいぶコアな内容ですがめちゃくちゃ開発捗る組み合わせなのでお勧めです。 参考にしたのはこのページです Using TypeScript with AngularJS and Web API 長くなるので2つに記事を分けます VisualStudio2013で進めていきます。無料のVS2013 Express for Webでも問題ないです。 VS2013のセットアップが済んだら、TypeScript for VisualStudioをインストールします TypeScript for Visual Studio 2012 and 2013 VS2013→TSforVSの順番でインストールしないとテンプレートが読み込まれないことがあるので、すでにインストールしていたら再インストールしたほうがいいかもです。 ここまで出来たらVS2013を起動して新しいプロジェ
(150522追記)最新のチュートリアルをまとめたAngularJSモダンプラクティスを掲載しました。この記事は2014年2月に掲載したとてもふるい記事です。最新記事をどうぞご覧ください。 この記事は記録のため残します。 AngularJSはチュートリアルに沿ってただ書くだけにするとすぐFat Controllerになる、とは他でも指摘されていますが、複数のコントローラを実装し始めた辺りから問題となってくるのが処理の重複です。すぐにでも一つのファイルにまとめて参照したいところです。 この記事(お前のAngular.jsはもうMVCではない。と言われないためのTutorial)やこの記事(AngularJSをTypeScriptで書くときのあれこれ)にはずいぶんと助けられましたが、ここで自分なりのTypeScriptでの書き方についてまとめておきます。 Factoryの例 クラスやメソッドの
この記事はすでに古い情報ですのでご注意ください。 2018年02月01日 に誤字を修正したリクエストを受け入れてから閲覧する方が多くなっていますが この記事の投稿日は 2014年05月06日 です。 随時更新します。 CoffeeScriptを使う理由 TypeScriptを使う理由 AltJSを使わない理由 Dartを使う理由 仕事でTypeScriptを使う場合の説得材料まとめです。 なぜJavaScriptではいけないのか クラス定義がないからです みんな大好きオブジェクト指向をするために必須なのにJavaScriptではクラスは書けません。 いや、正確には書けます。
追記 (2018/09/05) 現在では、 TypeScript 2.8 で導入された Conditional Types を利用したよりよい方法があり、これを使うと最後に書いた「この方法の制限」も克服できます。 上の記事の内容はかなり難易度が高いですが、これを理解しておくと Conditional Types への理解がかなり深まるので、おすすめです。(途中で僕のことにも言及してくれていて、ちょっと嬉しかったです) 追記終わり。 keyof の概要 issue: https://github.com/Microsoft/TypeScript/issues/1295 PR: https://github.com/Microsoft/TypeScript/pull/11929 PR の説明文を省略して簡単に示すと、以下のような機能。 interface Thing { name: strin
この記事はすでに古い情報ですのでご注意ください。 2018年02月01日 に誤字を修正したリクエストを受け入れてから閲覧する方が多くなっていますが この記事の投稿日は 2014年05月06日 です。 随時更新します。 CoffeeScriptを使う理由 TypeScriptを使う理由 AltJSを使わない理由 Dartを使う理由 仕事でTypeScriptを使う場合の説得材料まとめです。 なぜJavaScriptではいけないのか クラス定義がないからです みんな大好きオブジェクト指向をするために必須なのにJavaScriptではクラスは書けません。 いや、正確には書けます。
前の2つのエントリは、このエントリを調べたいための準備だったのです。 Javascript の yield と generator TypeScript の async/await を理解する その1 Promise やっと本編のasync / await について書くことができます。 Promise で非同期処理の順序性を保証してみる。 Promise によって、非同期処理の書きやすさが一段アップしましたが、async/wait の登場によってさらに素晴らしいものになりました。まずは、Promise で非同期のコード書いてみます。 function waitAndAnswer(message:string) : Promise<any> { console.log("Wait for 3 second."); return new Promise((resolve, reject) =>
こんにちはソウゾウ社な@vvakameです。 TypeScript 2.8.1がアナウンスされました。 What's new in TypeScriptも更新されているようです。 破壊的変更もあるよ! 今回からこの辺に僕が試した時のコードを投げておくことにしました。 変更点まとめ Conditional types(条件付きの型) Conditional types T extends U ? X : Y みたいなの書ける Conditional typesでの型推論 Type inference in conditional types infer の導入 ある型に式を当てはめた結果、得られた型推論の型を新たな型パラメタとして利用可能 type ReturnType<T> = T extends (...args: any[]) => infer R ? R : T; こういう R が新
[Visual Studio Code][TypeScript][Windows] VSCodeでTypeScriptの開発環境を整えるJavaScriptNode.jsTypeScriptVisualStudioCode 個人的に使用する機会があったので環境構築方法をまとめ。 Windows向けの記事になります。(たぶんLinuxとかでもある程度は一緒かと思います) ※普段は組み込みLinux向けにC/C++を使ってる人間なので、メンテされてない可能性がありますのでご注意ください 検証環境(2017/02/25) Windows 10 Visual Studio Code 1.9.1 Node.js v6.10.0 LTS TypeScript v2.2.1 1. Visual Studio Code(以下VSCode)の環境整備 1.1. VSCodeのインストール 前提としてVSCo
今日はTypeScript2.8で導入されたConditional typesについて書きます。 TypeScriptの型システムへの機能追加という意味では、keyofやMapped Types以来の変更と言ってよいでしょう。 お察しのとおり、こういう機能追加をぶち込んでくるのはAnders Hejlsberg御大です1。
こんにちはソウゾウ社な@vvakameです。 今回はちょっと遅くなってしまいました…。 TypeScript 2.7.1がアナウンスされました。 What's new in TypeScriptも更新されているようです。 破壊的変更もあるよ! 変更点まとめ クラスのフィールドの初期化チェックをより厳密に行う Stricter class property checks --strictPropertyInitialization が追加 --strict に含まれる ? 無しの場合コンストラクタ内で初期化しないとダメ 変数末尾に ! をつけることで初期化チェックを割愛できる Definite assignment assertions CommonJSなモジュールのimportがbabelとか互換になる Easier ECMAScript module interoperability -
この記事を書いたのは2016年のことでした。それから2年。 いつの間にか日本語チュートリアルが消えたし、結構未だにいいねを押してくださるので更新することにしました。(2018/2/2) reactの本家ドキュメントが日本語化されたため更新します。 (2019/4/11) はじめに タイトルみたいなことを考えていました。 実際補完が効くのはかなり有効でしたが、チュートリアル通りにいかない点が多々出ました。 結局色んな所を見るはめになりました でも総合してTypeScriptに向いているフレームワークだと思ったので詰まったところと解決方法を纏めてみることにしました TypeScript自体も学習コストが凄く低くて(ES2015 + 型)素敵だったのでいいと思いました。 追加で使うツール類 なし 今なら以下で試せます。 stackblitz オンライン版VisualStudioCode的な(コー
最初に知るべきこととして、Flow も TS も型システムのセマンティクスがよく似ている。 Redux & Typescript typed Actions with less keystrokes の 記事のかなり魔術的なコード、実は flow でも ts でもそのまま動いたりする。 自分は両方頻繁に使うので(flow寄りだが)、どういうコードを書くと手戻りが少ないか、考えながらコードを書いてるか書き出してみる。 お断り flowtype と typescript の、特に typescript 的なベストプラクティスに反する可能性がある。 完全にコンパチにするのは不可能だが、極力似たイディオムを使う。 どれも「極力頑張る」という感じで原則禁止というわけではない。大事なのは相互にコードを持ち出す時のポータビリティ。最悪なのは型がないという状態。 あと自分は TypeScript の非標準
この記事は第2のドワンゴ Advent Calendar 2017 22日目の記事です。 ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています、 @misuken です。 はじめに ここ1年半くらいは、主に ViewComponent(VC) と ContainerComponent(CC) 周りのアーキテクチャ設計、コンポーネント設計、実装を担当しています。 生放送のHTML5プレーヤーなどを開発してきました。 第1回 ニコ動/ニコ生 HTML5化への奮闘~ドワンゴ流動画配信サービスのつくりかた~ 今回はニコニコ生放送のViewComponent周りがどのように作られているのかを紹介したいと思います。 内容としては大体こんな感じです。 VCを中心とした設計から実装の流れ CSS Modulesを使いつつコンポーネントとデザインを柔軟に組み合わせられる仕組み ニコニコ生放送のコ
これは ML Advent Calendar 2017 の 4日目の記事です。VS Code も絡むのでそっちにも登録してしまいましたw はじめに MLを使いならば、操作敵意味論を理解しなくてはならない。 操作敵意味論を理解するには、論理型言語を理解しなくてはならない。 MLでPrologを実装できれば論理型言語を理解していると言ってよいはずだ。 論理型言語の動作を理解するためにはデバッガがあると便利なはずだ。 しかし、デバッガを作るノウハウが我々にはない。 よって、我々はOCamlによるデバッガを作るサンプルを作成することにしたのである。 1. VS コードのデバッガサンプル(PHPバージョン) これは簡単なアセンブラ言語を作ってそのデバッガを作るサンプルプロジェクトである。 通常は、TypeScriptでDebug Extensions を書くのですが、簡単な標準入出力で VS Cod
Redux Advent Calendar 2016 の15日目です。ちきさんです。 前置きと反省 この記事は僕がQiitaに投稿した中で最もストックされてしまった Reduxの概念をRxJSとTypeScriptで理解する(初心者向け) をリライトしたものです。 今振り返ると前回の記事にはいくつか問題がありました。 ステートとReducerにPromiseを持ち込むのはやはり筋が良くなかった。 Actionのdispatch順を無視して非同期が解決した順に処理が流れる構造になっていた。 1に関しては当初は問題ないと思っていたのですが僕も年を取り、その考えは若気の至りだったのではないかと考えるようになった次第です。 2は要件によってはそれで良いと思うのですが、それでも基本的にはdispatch順に処理する方がより期待される挙動であろうと思った次第です。 「RxJSでReduxを書く」という
diff --git a/tslint.json b/tslint.json index eb5d66a..2b86576 100644 --- a/tslint.json +++ b/tslint.json @@ -1,99 +1,3 @@ { - "extends": ["tslint-react"], - "rules": { - "align": [ - true, - "parameters", - "arguments", - "statements" - ], - "ban": false, - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "curly": true, - "eofline": false, - "forin": true, - "indent": [ tru
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く