または、心配を止めてコンパイラを信頼することを学んだ方法

Brendan Eichがわずか10日間でNetscape Navigator 2.0用のJavaScriptの最初のバージョンを作成したとき、彼はSlack Desktopアプリが本発明をどの程度使用するかをほとんど予想していませんでした。 ネイティブコードと常に対話し、Windows、macOS、Linuxで動作するマルチスレッドデスクトップアプリケーションには、JavaScriptコードベースのみを使用します。



大規模なJavaScriptコードベースの管理は簡単ではありません。 Node.jsの別のスレッドを介してコールバックを取得するために、ChromeブラウザーのJavaScript JavaScriptからObjective-Cに渡す際にオブジェクトを渡すたびに、すべてのピースがまとめられていることを保証する必要があります。 デスクトップの世界では、小さなエラーがアプリケーションのクラッシュを引き起こす可能性があります。 この目的のために、 TypeScript （静的に型付けされたJavaScriptのスーパーセット）を実装し、心配せずにコンパイラを愛して生きる方法をすぐに実現しました。 私たちだけでなく、Stack Overflowの開発者への調査では、TypeScriptが3番目に人気のあるプログラミングテクノロジーであることが示されています 。 静的型チェックがどれだけ高速になっているのかを考えて、経験と技術を共有したいと思います。

静的解析が助けになります

以前は、 JSDocを使用して関数の署名を文書化していました。 コメントでは、クラス、関数、変数を適切に使用する目的と方法を説明しました。 この方法には問題がないわけではありません。 コード自体を見ると、JavaScript Promisesの解決方法を理解するのは困難です。 コードの作成者がすべてを正しく文書化し、後でコードを変更した人が文書を正しく更新したことを信頼する必要があります。 数え切れないほどのモジュールと依存関係を持つ複雑なシステムでは、関数が記述されているファイルを開かなくても、関数を簡単に破ることができます。



状況を改善するために、 静的型チェックの機会を与えることにしました。 静的チェックはコードの実行を変更しません。代わりに、コードを分析し、可能な場合は型を計算し、プログラムが送信される前に開発者に警告します。



静的型チェックは、 Math.random()



が文字列メソッドtoLowerCase()



含まない数値を返すことを理解しています。







意図をより明確に示すために、このようなタイプコントローラーのユーザーは、これらのタイプを手動で宣言して、プログラムの動作を人とマシンに伝えることにより、システムを支援できます。 以下のコードは、「ユーザー」オブジェクトのインターフェースと、ユーザーの年齢を取得することになっているメソッドを定義します。 静的型チェックは、そのようなコードを分析し、 undefined



プロパティが常に存在するのを待つなど、典型的な人的エラーについて警告することができます。







興味深いことに、コードは実行時に変更されません。つまり、静的型チェックはエンドユーザーに追加コストを課しません。 上記の実行例は、古典的なJavaScriptのように見えます。







スマートタイプコントローラーは、コードに対する自信を高め、プログラムを実稼働環境に送信する前に一般的なエラーをキャッチし、コードベース自体がより適切に文書化できるようにします。

Slack DesktopコードベースのTypeScriptへの移植

静的解析とコンパイラを組み合わせたMicrosoft TypeScriptを使用することにしました。 最新のJavaScriptは有効なTypeScriptです。つまり、1行のコードを変更せずにTypeScriptを使用できます。 これにより、重大なバグや新しい関数の作業を停止することなく、コンパイラーと静的分析を早い段階で有効にすることで「段階的な型付け」を実装できました。



実際には、コードを変更せずに分析とコンパイラを有効にすると、TypeScriptはコードをすぐに理解しようとします。 サードパーティの依存関係に使用できる組み込み型と型定義を使用して、コードのフローを分析し、誰も気付いていない微妙なエラーを指摘します。 TypeScriptがコードを理解できない場合、 any



と呼ばれる特別な型を想定し、さらに先へ進みます。



最初の計画では、ファイルを1つずつゆっくりと移植し、可能な場合はより具体的な型定義を使用して標準JavaScriptを拡張しました。インターフェイスを追加し、クラスメソッドをプライベートまたはパブリックとして定義し、列挙型を宣言しました。 その過程で、予期しない2つの発見がありました。



まず 、コード変換中に見つかった小さなバグの数に驚きました。 型チェックを使用し始めた他の開発者と話をして、これがすべての人に起こることを喜んで聞きました：人が書く行が増えるほど、プロパティでタイプミスをすることは避けられなくなり、親またはネストされたオブジェクトは一定であると仮定するか、非標準エラーオブジェクトを使用します。



第二に 、エディターとの統合がどれほど強力かを過小評価しました。 TypeScript言語サービスのおかげで、オートコンプリートエディターは状況依存プログラミングをサポートできます。 TypeScriptは、特定のオブジェクトで使用できるプロパティとメソッドを理解するため、エディターも理解できるようになりました。 オートコンプリートシステムは、現在のドキュメントの単語のみを要求しますが、その後は野barに見えます。 Electron BrowserWindowで利用可能なイベントをGoogleで再度検索したことがあります。 Atom 、 Visual Studio Code 、 Sublime、および他のほとんどすべてのエディター用のプラグインがあります。 エディターで直接コードをテストする機能により、すぐに生産性が向上しました。







今後、コードのサポートについて考え、TypeScriptを取り巻くエコシステムを大切にします。 ReactおよびNode / npmエコシステムのアクティブユーザーとしての私たちにとって、大きなプラスはサードパーティライブラリの型定義の可用性です。 インポートされたライブラリの多くは、すでにTypeScriptと互換性があります。 定義がモジュール自体に付属していない場合は、おそらく素晴らしいDefinitelyTypedプロジェクトで見つけることができます。 たとえば、Reactにはタイプ定義が付属していませんが、単純なnpm install @types/react



を使用してnpm install @types/react



され、追加の構成は必要ありません。



TypeScriptにより安定性と安心が向上したため、移行開始後数日以内に、すべての新しいコードに使用するようになりました。 SlackデスクトップアプリケーションのJavaScriptコードの大部分に注釈を付けるには、約6か月かかりました。

信頼コミット

読みやすさと保守性を向上させるために、開発環境のすべてのコードはコミット前にTSLintによって自動的にチェックされます-これは、Gitに変更を追加する前に、ルールに従ってコードが最初に誤った式をチェックすることを意味します implicit any



オプションの使用は許可されていません。つまり、TypeScriptが自動的に検出できない場合、すべてのSlack Desktopコードで明示的に型を指定する必要があります。



ブランチに変更を送信するときが来ると、Gitは最初にコードベース全体をTypeScriptコンパイラーに渡します。TypeScriptコンパイラーは、すべてのコードの構造的および機能的エラーを分析し、async / awaitなどの最新機能をES2016互換コードに変換します。 プルリクエストが開かれるまでに、コードの構造的な依存関係が正しいと確信しています。

怖いかもしれません

私たちにとって、TypeScriptの利点は、存在する欠陥よりも劇的に重要です。 私たちにとって最も具体的なものは、トレーニングのコストです。 通常、強力なタイピング言語を使用する開発者は1〜2時間構文を学習しましたが、TypeScriptのすべての機能を備えたファイルは、純粋なJavaScriptの経験しか持たないプログラマを思いとどまらせることがあります。



この問題の最も明らかな解決策は、変更をゆっくりと展開することです-コードを変更せずにTypeScriptを使用し、いくつかの単純な型宣言を追加し、継承、パラメーター化された型、高度な型（交差、マッピングされた型）などのより複雑な概念を残すことができます特定のモジュール、またはタイピングの後の段階。 最終的に、TypeScriptの最小限の使用でも多くの利点が得られることが経験により示されています。

お返し

Slackでは、オープンソースコミュニティのまともなメンバーになるよう努めています。 最終的に、他の開発者にとってTypeScriptをより簡単にしたいと考えています。 ギャップが見つかった場合、それらを埋めようとします。



まず、Slack独自のelectron-compile



パッケージにより、Electron Apps開発者はelectron-compile



を気にせずにTypeScriptで記述できます。 Slack、Netflix、GitHubなど多くの企業で積極的に使用されているReactive ExtensionライブラリであるRxJSは、Slackの支援を受けてTypeScriptに切り替えました。 開発者が作成した小さなライブラリの多くは、TypeScriptのサポートを徐々に受けています（ spawn-rx 、 electron-spellchecker 、 electron-remote 、 electron-notification-state 、 electron-windows-notificationsなど ）。



TypeScriptの使用を開始するには、 公式ガイドを参照してください 。 実際に小さな移植プロジェクトがどのように見えるかを知りたい場合は、spawn-rx portを見てください 。 Electronアプリケーション用の最初のTypeScriptラインを作成したい場合は、すぐに電子コンパイルとTypeScriptサポートを実装する壮大なelectron-forgeを使用してください-優れたReact / TypeScriptテンプレートが付属しているため、私たちのアーキテクチャはこの開発チームSlack Desktopをとても気に入っています。 クロスプラットフォームアプリケーションを開発するために、最新のWebテクノロジーとネイティブコードを組み合わせることがエキサイティングな仕事であると思われる場合は、ぜひご協力ください ！