diff --git a/.editorconfig b/.editorconfig index 057417bb4e..8ea6fbd11c 100644 --- a/.editorconfig +++ b/.editorconfig @@ -6,14 +6,14 @@ charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true -[*.{sh,py,pyi,js,json,yml,xml,css,md,markdown,handlebars,html}] +[*.{sh,py,pyi,js,ts,json,yml,xml,css,md,markdown,handlebars,html}] indent_style = space indent_size = 4 [*.{py}] max_line_length = 110 -[*.{js}] +[*.{js,ts}] max_line_length = 120 [*.{svg,rb,pp,pl}] diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ce3572fcb6..5f4579ee7d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -107,8 +107,8 @@ on. [#new members](https://chat.zulip.org/#narrow/stream/95-new-members) with a bit about your background and interests, and we'll help you out. The most important thing to say is whether you're looking for a backend (Python), - frontend (JavaScript), mobile (React Native), desktop (Electron), - documentation (English) or visual design (JavaScript + CSS) issue, and a + frontend (JavaScript and TypeScript), mobile (React Native), desktop (Electron), + documentation (English) or visual design (JavaScript/TypeScript + CSS) issue, and a bit about your programming experience and available time. We also welcome suggestions of features that you feel would be valuable or diff --git a/docs/contributing/code-style.md b/docs/contributing/code-style.md index 582963abdd..f14dde4f03 100644 --- a/docs/contributing/code-style.md +++ b/docs/contributing/code-style.md @@ -145,7 +145,7 @@ string, use the `id` function, as it will simplify future code changes. In most contexts in JavaScript where a string is needed, you can pass a number without any explicit conversion. -### JavaScript var +### JavaScript `var` Always declare JavaScript variables using `var`. JavaScript has function scope only, not block scope. This means that a `var` @@ -153,7 +153,12 @@ declaration inside a `for` or `if` acts the same as a `var` declaration at the beginning of the surrounding `function`. To avoid confusion, declare all variables at the top of a function. -### JavaScript `for (i in myArray)` +#### TypeScript `const` and `let` + +When writing TypeScript, we prefer to use `const` or `let` where +possible. + +### JavaScript and TypeScript `for (i in myArray)` Don't use it: [[1]](http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays), @@ -164,7 +169,7 @@ Don't use it: Remember to [tag all user-facing strings for translation](../translating/translating.html), whether -they are in HTML templates or JavaScript editing the HTML (e.g. error +they are in HTML templates or JavaScript/TypeScript editing the HTML (e.g. error messages). ### State and logs files @@ -212,7 +217,7 @@ we should still avoid extremely long lines. A general guideline is: refactor stuff to get it under 85 characters, unless that makes the code a lot uglier, in which case it's fine to go up to 120 or so. -### JavaScript +### JavaScript and TypeScript When calling a function with an anonymous function as an argument, use this style: diff --git a/docs/git/cheat-sheet.md b/docs/git/cheat-sheet.md index 7db9d752ac..09a1005952 100644 --- a/docs/git/cheat-sheet.md +++ b/docs/git/cheat-sheet.md @@ -24,7 +24,7 @@ See also [fixing commits][fix-commit] - `git fetch origin` - `git fetch upstream` - grep - - `git grep update_unread_counts -- '*.js'` + - `git grep update_unread_counts - log - `git log` - pull @@ -79,7 +79,7 @@ See also [fixing commits][fix-commit] - `git fetch origin`: fetch origin repository - `git fetch upstream`: fetch upstream repository - grep - - `git grep update_unread_counts -- '*.js'`: search all files (ending in `.js`) for `update_unread_counts` + - `git grep update_unread_counts static/js`: Search our JS for references to update_unread_counts. - log - `git log`: show commit logs - `git log --oneline | head`: To quickly see the latest ten commits on a branch. diff --git a/docs/overview/directory-structure.md b/docs/overview/directory-structure.md index af9343d306..feaf4b8ffe 100644 --- a/docs/overview/directory-structure.md +++ b/docs/overview/directory-structure.md @@ -52,9 +52,9 @@ templating systems. ---------------------------------------- -### JavaScript and other static assets +### JavaScript, TypeScript, and other static assets -* `static/js/` Zulip's own JavaScript. +* `static/js/` Zulip's own JavaScript and TypeScript sources. * `static/styles/` Zulip's own CSS. diff --git a/docs/testing/linters.md b/docs/testing/linters.md index 36f6065a35..14130d3645 100644 --- a/docs/testing/linters.md +++ b/docs/testing/linters.md @@ -3,7 +3,7 @@ ## Overview Zulip does extensive linting of much of its source code, including -Python/JavaScript files, HTML templates (Django/handlebars), CSS files, +Python/JavaScript/TypeScript files, HTML templates (Django/handlebars), CSS files, JSON fixtures, Markdown documents, puppet manifests, and shell scripts. For some files we simply check for small things like trailing whitespace, @@ -92,7 +92,7 @@ Most of our lint checks get performed by `./tools/lint`. These include the following checks: - Check Python code with pyflakes. -- Check JavaScript code with eslint. +- Check JavaScript and TypeScript code with eslint. - Check Python code for custom Zulip rules. - Check non-Python code for custom Zulip rules. - Check puppet manifests with the puppet validator. diff --git a/docs/testing/testing-with-node.md b/docs/testing/testing-with-node.md index 48e9847b05..f85358069f 100644 --- a/docs/testing/testing-with-node.md +++ b/docs/testing/testing-with-node.md @@ -1,8 +1,8 @@ -# JavaScript unit tests +# JavaScript/TypeScript unit tests -Our node-based JavaScript unit tests system is the preferred way to -test JavaScript code in Zulip. We prefer it over the -[Casper black-box whole-app testing](../testing/testing-with-casper.html), +Our node-based unit tests system is the preferred way to test +JavaScript/TypeScript code in Zulip. We prefer it over the [Casper +black-box whole-app testing](../testing/testing-with-casper.html), system since it is much (>100x) faster and also easier to do correctly than the Casper system. diff --git a/docs/tutorials/new-feature-tutorial.md b/docs/tutorials/new-feature-tutorial.md index d77936a6fd..619d00134c 100644 --- a/docs/tutorials/new-feature-tutorial.md +++ b/docs/tutorials/new-feature-tutorial.md @@ -114,10 +114,10 @@ Realm setting, in `test_realm.py`). ### Frontend changes -**JavaScript:** Zulip's JavaScript is located in the directory -`static/js/`. The exact files you may need to change depend on your -feature. If you've added a new event that is sent to clients, be sure to -add a handler for it in `static/js/server_events_dispatch.js`. +**JavaScript/TypeScript:** Zulip's JavaScript and TypeScript sources are +located in the directory `static/js/`. The exact files you may need to change +depend on your feature. If you've added a new event that is sent to clients, +be sure to add a handler for it in `static/js/server_events_dispatch.js`. **CSS:** The primary CSS file is `static/styles/zulip.css`. If your new feature requires UI changes, you may need to add additional CSS to this @@ -129,7 +129,7 @@ Handlebars templates located in `static/templates`. Templates are precompiled as part of the build/deploy process. Zulip is fully internationalized, so when writing both HTML templates -or JavaScript code that generates user-facing strings, be sure to +or JavaScript/TypeScript code that generates user-facing strings, be sure to [tag those strings for translation](../translating/translating.html). **Testing:** There are two types of frontend tests: node-based unit diff --git a/docs/tutorials/reading-list.md b/docs/tutorials/reading-list.md index 0372448454..ca0e8669ed 100644 --- a/docs/tutorials/reading-list.md +++ b/docs/tutorials/reading-list.md @@ -140,6 +140,20 @@ Some titles have been shortened for organizational purposes. [TypeScript vs. CoffeeScript vs. ES6]: http://www.slideshare.net/NeilGreen1/type-script-vs-coffeescript-vs-es6 +## TypeScript + +*Tutorial* - [TypeScript handbook section on base types][typescript-handbook] + +[typescript-handbook]: https://www.typescriptlang.org/docs/handbook/basic-types.html + +*Book* - [TypeScript Deep Dive][] + +[TypeScript Deep Dive]: https://basarat.gitbooks.io/typescript/ + +*Guide* - [TypeScript Declaration Files Introduction][] + +[TypeScript Declaration Files Introduction]: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html + ## Git/Version Control Systems (VCS) You may want to take a look first at our [Git and GitHub guide][].