Getting started with TypeScript in Visual Studio Code


This post might be useful to someone who has just started learning TypeScript and wants to setup easily and fast an environment for doing course assignments or little educational projects. This is definitely NOT for JavaScript professional.

There are a couple of options for development environment one might select from.

  • TypeScript Playground is a great tool to play with TypeScript during watching some lecture or presentation. However your code is in the browser and you are limited to the amount of code you can effectively write and store. For example, it will be inconvenient to use playground during accomplishing assignments fro TypeScript course.

  • Visual Studio Community Edition. But to be honest, it is too bloated and heavy for this task. It will constantly distract you from accomplishing your tasks with huge amounts of options while hiding essential stuff. And in case you are not on Windows machine you don’t even have this option.

  • Text editors. There are tones of them. Like Atom, Emacs, Sublime, Notepad++ to name a few. All of these tools are nice and dandy but they don’t have TypeScript support from a box.

  • And finally goes Visual Studio Code which I would recommend because:

    • It is free and open source
    • It runs on every platform and obviously on yours as well
    • It is lightweight and innovative (for example it does not exploit tabs)
    • It has cool design (subjective)
    • It has direct integration with Git
    • It has TypeScript support i.e. it shows derived types of code expressions and performs code completion
    • It has folder based projects, which means you don’t have to create and support project file like in Visual Studio


  • Install Visual Studio Code. Which should be easy, right? Just run an installer.
  • Install Node. Also just an installer. Don’t be scared, it’s just simple program which will execute JS code. For JS development, you will need it anyway. Running code in the browser will require more ceremony. I love running my little educational programs from the command line like in good old university days :-).
  • Install TypeScript. It is even easier. Just run in the command prompt npm install -g typescript. This will install TypeScript globally on your computer, i.e. now you can run the compiler from every folder.
  • Create a folder for your project.
  • Open Visual Studio Code, File->Open Folder… Select your folder. Now you can create your TypeScript file with .ts extension. Note how Visual Studio Code recognizes TypeScript and provides correct autocomplete.

    • Save your file and it will be ready to be compiled and run. Open command prompt in the folder of your project and type tsc -w yourfilename.ts. The compiler option -w will make compiler working in watch mode, i.e. it will watch your file changes and in case of some change it will automatically recompile. Generated code is placed into yourfilename.js. Now you just run node with JS file as an input to see the result of code execution. And here we go! (my file is named prog.ts in the screenshot)
    • You will probably have more than one TS file. But you will always have one which includes others. To compile everything you need to invoke compiler only for this single TS file.

Learning more about Visual Studio Code

There is a lot of materials on the internet which will help you learning about VS Code. But I would like to recommend John Papa’s article which I find to be a nice and easy introduction to what you can do with VS Code.


Amazing 10 tools for remote software developer

I used to be university educator and enterprise developer. You know, the one who only uses tools from Microsoft, visits a lot of meetings and whose main communication tool is face-to-face communication. Then I have radically changed my working environment – I started working from home and now my office is few centimeters from my bed. Which is really great! But it was a challenge for me, at first, to get started with working remotely. So, if you are in quite a similar situation and you need to collaborate with distributed team – here is the list of tools which I was taught to use by my new team (a lot of thanks for engineering team at StrategicVision).

  1. Slack/Skype/Hangouts. These tools cover messaging starting from specialized team communication in Slack to pretty generic communication in Hangouts. Very basic use of these tools is free. I use Skype most of the time and its pretty fine for textual and video communication. There is also an ability to share screens. One can also do video conference if needed. It all just works.
  2. GitHub. This thing is just awesome! I have never seen such a great thing to work collaboratively with code! You have all the history of your code, issues tracking, wiki pages and integrations with every continuous integration system you like. To see how powerful it is, just look how I can point you to exact line in my code here.  I can drop such a link in Skype conversation and discuss code with my buddy.
  3. TeamViewer. Extremely useful tool for doing pair programming or pair debugging or pair solving of some issues. All participators in the conference can share their screens and control computers of their buddies as if they were sitting next to each other. You can give it a try right now, it’s free for non-commercial use (and no, they don’t pay me for advertisement :-)).
  4. Puush. Great tool for sharing pictures. During discussions with your buddies, you can just press key combination which Puush understands and it will instantly take a screenshot, upload it to the web and copy link to it to your clipboard.  All you have to do then is to paste this link to Skype and you are done! Your colleague can see the screenshot. It takes only a second! Unfortunately if you don’t pay for the service they keep the picture on their servers no longer than one month, therefore, I can’t show you an example of my screenshot. But for all other purposes it’s more than enough!
  5. Workflowy. Want to take notes during planning sprint, meeting, stand-up and share them with your peers? Than Workflowy is for you. It is ridiculously simple and powerful tool, which helps you construct bullet points with any depth and focus on whatever sections you want. For example, here I will share with you the list of tools, which I mention in this article. And guess what? You never have to press save button! It just does it for you automatically.
  6. Kanbanflow. If you have distributed team and want to visualize some kind of agile board, where you have something like stickers with tasks on them which you can move from “To Do” column to “Done” column, then Kanbanflow is for you. You can create a board which everybody in the distributed team seeing it online and observing changes. And even more than that, Kanbanflow supports Pomodoro technique, which I am a big fun of.  But see it yourself:
  7. Google Docs. Are you still using Microsoft Word and PowerPoint for doing presentations? Very well, these are really great tools! But if for any reason you don’t want to pay for these products, install and maintain them (like I do, I love wen everything is in the browser and I don’t have to bother about software maintenance anymore), just use Google Docs. I tell you, during 6 months of my remote work it was no moment when I wanted my MS Office stuff back. I was completely satisfied with what they had to offer. I did presentations to students, wrote test cases in word documents (and shared them in docx format, btw) even done some statistics in spreadsheets (turned out it supports many math and statistics functions).
  8. Google Drive. Of course, when you work together you want to share files with colleagues. You also probably want to have your files available everywhere. No problems! Google Drive sometimes seems to me as some kind online machine where I can create folders, store files and do whatever I want with these files using Google Docs. For me, who started working with computers in 2000 using Win 95 it is just marvelous service. And for free!
  9. ScreenToGif. I really like using video recording to demonstrate reproduction of the bug, or demonstrate how the bug manifests itself. It is extremely useful to have a little video which demonstrates everything instead of a list of bullet points describing reproduce steps. And video becomes irreplaceable in case of reporting UI bugs or flaws. There are many tools to record video, but usually, they are heavyweight and you have to send it to your buddy or store somewhere in online storage. ScreenToGif gives you an ability to treat video as a gif image. Hence, you can easily place it in some kind of document or presentation or, well, in Puush! This is what we do on my team. We shoot the video and with one click upload it to the internet using Puush. And then we just share links to the video as if it was just a picture. Fast and effective. Watch for example how to use map function in JavaScript to multiply each element of array by 5 (to see animation, click on the picture): map_function_in_js
  10. ZoomIt is a little utility by Mark Russinovich which can do screen zoom and annotation during technical presentations that include application demonstrations. ZoomIt runs unobtrusively in the tray and activates with customizable hotkeys to zoom in on an area of the screen, move around while zoomed, and draw on the zoomed image. Although very useful even during off-line presentations, having it on during on-line discussions with your peers  makes things less painful for people, especially if you have a screen with a large resolution.

All of mentioned above tools can be replaced with some analog, for example, Google Drive with MS OneDrive, Google Docs with MS Office Online, Workflowy with Trello and so on. I just write here about tools I use and which I can prove work just fine for everyday programmer’s work. If you start your remote work – use this set of tools as kickoff toolset and then find some analog if you want to. Enjoy your freedom!


Як правильно вчитися?

brain-trainingВибачте, якщо розчарую, але насправді я не знаю як правильно вчитися. Однак є люди, які проводять наукові дослідження у цій сфері та володіють науковими фактами щодо процесу навчання. Вони склали пречудовий курс, який стисло викладає основні здобутки у вивченні процесів навчання, і абсолютно безкоштовно доступний на Coursera. Оскільки навчання – це невід’ємна частина роботи програміста, і оскільки зовсім скоро я знову викладатиму курс з APL програмування для SimCorp (до речі, приходьте на навчання, кому цікаво), то я вирішив цей курс пройти. Дуже рекомендую його усім, хто знає англійську і кому доводиться часто навчатися. Для тих, кому бракує часу і для себе у майбутньому, хочу викласти тут основні ідеї, які мені здаються цікавими. Ще раз підкреслюю, що ці ідеї є науково підтвердженими фактами, а не емпіричними порадами, а посилання на результати досліджень можна знайти в матеріалах курсу.

Мозок працює у двох різних режимах – фокусованому і розслабленому. І цей розслаблений режим, у якому людина ні на чому не зосереджується, відіграє важливу роль у процесі навчання і розв’язування задач. Тому для того, щоб краще навчатися, необхідно міняти режими. Фокусований режим найкраще підходить для механічної роботи, роботи з тим, з чим ми так чи інакше раніше стикались. А от розслаблений режим, під час якого нейронні зв’язки випадково формуються, найкраще підходить для розв’язання творчих завдань. Практична тут порада така: якщо відчуваєш що товчешся на одному місці й не можеш чогось зрозуміти чи придумати розв’язання якоїсь задачі чи проблеми (наприклад щось чомусь не так працює як ти очікуєш), варто замінити фокусований режим на розслаблений. Вийти пройтися, випити кави, прийняти душ. Мені важко пояснити як це відбувається, але раптом виникають нові ідеї. Ось на днях, пів години мучився над куском коду, покинув і пішов штангу потягати. Поки йшов – на думку спало два рішення, одне з яких, прийшовши після заняття, я і реалізував.

Бути пробудженим, тобто не спати – шкідливо для мозку, бо в рідинах всередині нього створюються отруйні для мозку метаболічні структури. Під час сну клітини мозку трохи зменшуються й організмові легше виводити через міжклітинну рідину ці метаболічні відходи. Крім того під час сну закріплюються нейронні зв’язки й мозок відпрацьовує отриману інформацію. Практичний висновок: хочеш гарно вчитися та успішно програмувати – гарно і достатньо спи, хай там що тобі намагається нав’язати масова культура, коли програмісти гасять каву і кодять увесь день і всю ніч.

Зволікання (procrastination) – природна реакція людини, яка не дуже хоче приступати до якоїсь неприємної для себе роботи. Вона починає ходити за чаєм, перевіряти пошту, проглядати Facebook, обговорювати з приятелем останні політичні події й таке інше. Однак щойно людина починає цю роботу робити, ментальний дискомфорт зменшується або зникає. І навпаки тривале зволікання призводить до ментального невдоволення собою: “день минув, а я нічого не зробив!”. Практична порада: активно борися зі зволіканням. Для цього є чудова техніка Pomodoro про яку я писав у іншому пості і яку сам активно використовую.

Науково доведено що нові нейронні зв’язки людський мозок може встановлювати навіть у похилому віці. А отже кожен, хто хоче стати кращим у чомусь, може це зробити. Практична порада: не дозволяй собі звалитися у статичне мислення, тобто переконати себе у тому, що щось тобі не дано. Ти можеш стати кращим у будь-якій галузі у якій ти хочеш стати кращим ніж є сьогодні, навіть якщо тобі за 60, навіть якщо у тебе був крововилив у мозок. Ти можеш розвиватися як програміст, для цього лише потрібна наполеглива праця над собою. Це називають гнучким мисленням, (agile mindset) і про нього Linda Rising робить дуже цікаві презентації.

Практика створює міцні нейронні зв’язки. Банально, кожен знає, але я попри своє знання наробив купу помилок. Я надто багато усього вивчав просто читаючи книги й навіть не витрачаючи час на вправи, мені здавалося, що вони мене лише затримують. Результат – нейронні зв’язки дуже слабкі й вивчене забуто майже відразу. Практична порада: у навчанні більше покладайся на практику та активну участь. Чим більш абстрактний предмет вивчення (наприклад математика), тим важливіша практика для зміцнення нейронних зв’язків. Іншими словами learn by doing!

Розподілене у часі повторення вивченого матеріалу створює міцніші нейронні зв’язки ніж зубріння його, скажімо в один день. Це як качати усі м’язи в один день, а тоді тиждень лежати на дивані – не надто вдала ідея. Тому практична порада: якщо треба щось гарно запам’ятати – повторюй матеріал щодня протягом тижня. Це дасть кращий ефект ніж повторення матеріалу сім разів ввечері одного дня. Я це збагнув ще у школі. У мене були проблеми з вивченням віршів і я постійно збивався розповідаючи вірша, якщо лише не вивчав його протягом тижня повторюючи щодня.

Експерименти зі щурами показали, що щур при взаємодії з іншими щурами створює більше міцних нейронних зв’язків ніж щур, що сидить сам у клітці. Тому практична порада: намагайся працювати й навчатися у різноманітному і яскравому оточені. Ой, а я працюю з дому. Я як раз той самотній щур у клітці… Але на щастя для мене, дослідження довели, що заняття спортом може компенсувати усамітнення (звісно не в соціальному аспекті, а в аспекті розвитку мозку). Таким чином, щоб бути кращим програмістом і учнем, взаємодій з іншими яскравими людьми, а також відривай якомога частіше свій зад від крісла і займайся спортом.

Ха! З’явилася стаття на DOU такої ж тематики і більш повна. Згортаюся, продовження не буде :-).