Typescript уроки для начинающих

The TypeScript Handbook

Over 20 years after its introduction to the programming community, JavaScript is now one of the most widespread cross-platform languages ever created. Starting as a small scripting language for adding trivial interactivity to webpages, JavaScript has grown to be a language of choice for both frontend and backend applications of every size. While the size, scope, and complexity of programs written in JavaScript has grown exponentially, the ability of the JavaScript language to express the relationships between different units of code has not. Combined with JavaScript’s rather peculiar runtime semantics, this mismatch between language and program complexity has made JavaScript development a difficult task to manage at scale.

The most common kinds of errors that programmers write can be described as type errors: a certain kind of value was used where a different kind of value was expected. This could be due to simple typos, a failure to understand the API surface of a library, incorrect assumptions about runtime behavior, or other errors. The goal of TypeScript is to be a static typechecker for JavaScript programs — in other words, a tool that runs before your code runs (static) and ensures that the types of the program are correct (typechecked).

If you are coming to TypeScript without a JavaScript background, with the intention of TypeScript being your first language, we recommend you first start reading the documentation on either the Microsoft Learn JavaScript tutorial or read JavaScript at the Mozilla Web Docs. If you have experience in other languages, you should be able to pick up JavaScript syntax quite quickly by reading the handbook.

How is this Handbook Structured

The handbook is split into two sections:

• The Handbook The TypeScript Handbook is intended to be a comprehensive document that explains TypeScript to everyday programmers. You can read the handbook by going from top to bottom in the left-hand navigation. You should expect each chapter or page to provide you with a strong understanding of the given concepts. The TypeScript Handbook is not a complete language specification, but it is intended to be a comprehensive guide to all of the language’s features and behaviors. A reader who completes the walkthrough should be able to:
  • Read and understand commonly-used TypeScript syntax and patterns
  • Explain the effects of important compiler options
  • Correctly predict type system behavior in most cases

  In the interests of clarity and brevity, the main content of the Handbook will not explore every edge case or minutiae of the features being covered. You can find more details on particular concepts in the reference articles.

  The Handbook is also intended to be a concise document that can be comfortably read in a few hours. Certain topics won’t be covered in order to keep things short.

  Specifically, the Handbook does not fully introduce core JavaScript basics like functions, classes, and closures. Where appropriate, we’ll include links to background reading that you can use to read up on those concepts.

  The Handbook also isn’t intended to be a replacement for a language specification. In some cases, edge cases or formal descriptions of behavior will be skipped in favor of high-level, easier-to-understand explanations. Instead, there are separate reference pages that more precisely and formally describe many aspects of TypeScript’s behavior. The reference pages are not intended for readers unfamiliar with TypeScript, so they may use advanced terminology or reference topics you haven’t read about yet.

  Finally, the Handbook won’t cover how TypeScript interacts with other tools, except where necessary. Topics like how to configure TypeScript with webpack, rollup, parcel, react, babel, closure, lerna, rush, bazel, preact, vue, angular, svelte, jquery, yarn, or npm are out of scope — you can find these resources elsewhere on the web.

  Before getting started with The Basics, we recommend reading one of the following introductory pages. These introductions are intended to highlight key similarities and differences between TypeScript and your favored programming language, and clear up common misconceptions specific to those languages.

  Источник

  Изучение TypeScript — Полное руководство для начинающих. Часть 1 — Введение и примитивные типы данных

  Всем привет. Меня зовут Лихопой Кирилл и я — Fullstack-разработчик.

  Представляю вашему вниманию cвою первую статью на Хабре, a точнее перевод англоязычной статьи, на тему изучения TypeScript (TS, Тайпскрипт).

  С начала этого года я начал изучать TS, и меня заинтересовала эта статья, так как в ней все разложено «по полочкам», без лишней воды и сложных определений. В следствие этого родилась идея сделать ее перевод, чтобы начинающие разработчики могли ознакомиться с этой статьей, но уже на русском языке. Итак, приступим.

  В последние несколько лет TypeScript обретает все большую популярность. Более того, на многих вакансиях от программистов требуется знание TypeScript.

  Однако не стоит бояться — если вы уже знаете JavaScript, то вам не составит большого труда освоить TypeScript.

  Даже если вы не планируете изучать TypeScript, знакомство с ним позволит вам глубже понять JavaScript и стать лучше, как разработчик.

  В этой статье (серии статей) вы узнаете:

  • Что такое TypeScript, и почему мне нужно изучить его?
  • Как создать проект с использованием TypeScript.
  • Главные концепты TypeScript (типы, интерфейсы, дженерики (обобщенные типы), утверждение типов и многое другое).
  • Как использовать TypeScript с React’ом.

  Я также создал PDF-шпаргалку и постер, которые суммируют эту статью. Они помогут вам быстро понять и освежить в памяти все концпеты и синтаксис TypeScript.

  Прим. переводчика: в скором времени будет выпущен перевод данной шпаргалки.

  

  Что такое TypeScript?

  TypeScript — это расширенная версия JavaScript. То есть он содержит в себе все то же самое, что и JavaScript, но с некоторыми дополнениями.

  Главная причина использовать TypeSciprt — это возможность добавить статическую типизацию к JavaScript. Тип переменной со статической типизацией не может быть изменен после ее объявления. Это может предотвратить БОЛЬШОЕ количество багов.

  С другой стороны, JavaScript — динамически типизированный язык, то есть типы переменных могуть изменяться. Например:

  // JavaScript let foo = "Привет"; foo = 55; // тип переменной foo изменяется со строки на число - никаких проблем // TypeScript let foo = "Привет"; foo = 55; // ERROR - тип переменной foo не может быть изменен

  TypeScript не воспринимается браузерами, поэтому его надо скомпилировать в JavaScript с помощью TypeScript Compiler (TSC) — мы обсудим его чуть позже.

  Стоит ли TypeScript того?

  Почему вам нужно использовать TypeScript

  • Исследование показало, что TypeScript может обнаружить 15% самых частых багов.
  • Читаемость — намного проще видеть, что делает код. А при работе в команде проще видеть, что делают другие разработчики.
  • Популярность — знание TypeScript позволит вам расширить круг вакансий, на которые вы сможете претендовать.
  • Изучение TypeScript даст вам лучшее понимание и новый взгляд на JavaScript.

  Недостатки TypeScript

  • Написание кода на TypeScript занимает большее время, чем на JavaScript,так как необходимо типизировать переменные. Так что в небольших проектах, возможно, оно не стоит того.
  • TypeScript необходимо компилировать, а это занимает время, особенно в больших проектах.

  Однако время, которое вы потратите на написание более точного кода и компиляцию будет более чем компенсировано тем, сколько багов могло бы быть в вашем коде.

  Для большинства проектов — средних и больших — TypeScript сэкономит вам много времени и сил.

  Более того, если вы уже знаете JavaScript, то изучение TypeScript не составит вам большого труда. Он станет отличным инструментом в вашем арсенале.

  Как настроить TypeScript проект

  Установка Node и компилятора TypeScript (TSC)

  Для начала убедитесть, что Node глобально установлена на вашей машине.

  Затем, глобально установите компилятор TypeScript на вашей машине следующей командой:

  Убедитесь, что установка прошла успешно (если да — то команда вернет номер версии).

  Как компилировать TypeScript

  Откройте любой текстовые редактор и создайте TypeScript-файл (например, index.ts).

  Напишите какой-нибудь код на JavaScript или TypeScript:

  let sport = 'Футбол'; let >Мы можем скомпилировать это в JavaScript следующей командой:

  TSC скомпилирует код в JavaScript-файл index.js :

  var sport = 'Футбол'; var >Если вы хотите изменить название файла:

  tsc index.ts —outfile file-name.js

  Если вы хотите, чтобы TSC компилировал ваш код автоматически, при изменениях, добавьте флаг “watch” (-w):

  Интересная особенность TypeScript — он сообщает об ошибках в вашем текстовом редакторе, пока вы пишете код, но он все равно всегда скомпилирует ваш код — в независимости от того, есть в нем ошибки, или нет.

  Например, следующий пример вызывает ошибку TypeScript:

  var sport = 'Футбол'; var = '5'; // Ошибка компилятора - Error: Type 'string' is not assignable to type 'number'.

  Однако если мы попытаемся скомпилировать код с помощью tsc index , код скомпилируется, несмотря на ошибку.

  Это важное преимущество TypeScript: он предполагает, что разработчик знает больше. Несмотря на то, что TypeScript выдает ошибку, это не отразится на компиляции вашего кода. Он скажет, что есть ошибка, но делать с ней что-то или нет — решать вам.

  Как настроить файл конфигурации TypeScript

  Файл конфигурации TS должен находиться в корневой директории вашего проекта. В этом файле мы можем указать корневой файл, опции компилятора и насколько строго мы хотим, чтобы TypeScript делал проверку в нашем проекте.

  Сначала создаейте файл конфигурации TS:

  После этого, в корневой директории, у вас должен появиться файл tsconfig.json .

  Вот пример некоторых опций, о которых стоит знать (если вы используете frontend-фреймворк с TypeScript, то о большинстве этих вещей уже позаботились):

  < "compilerOptions": < . /* Модули */ "target": "es2016", // Измените на "ES2015", чтобы скомпилировать в ES6 "rootDir": "./src", // Откуда компилировать "outDir": "./public", // Куда компилировать (обычно папка, которая разворачивается на сервере) /* Поддержка JavaScript */ "allowJs": true, // Позволяет компилировать JS-файлы "checkJs": true, // Проверяет типы в JavaScript-файлах и сообщает об ошибках /* Emit */ "sourceMap": true, // Создать source map файлы для готовых файлов JavaScript (хороошо подходит для дебаггинга) "removeComments": true, // Игнорировать комментарии >, "include": ["src"] // Компилировать только файлы из папки src > 

  Скомпилировать все и наблюдать за изменениями:

  Напоминание: если вы указываете входные файлы в коммандной строке (например, tsc index ), файлы tsconfig.json будут игнорироваться.

  Типы данных в TypeScript

  Примитивы

  В JavaScript примитивы значение — это данные, которые не являются объектами и не имеют методов. Всего есть 7 примитивных типов:

  Примитивы иммутабельны: они не могут быть изменены. Важно не путать сами примитивы и переменные, объявленные, как примитивы. Переменной может быть назначено новое значение, но текущее значение не может быть изменено, так же, как могут быть изменены объекты, массивы и функции.

  let name = 'Денис'; name.toLowerCase(); console.log(name); // Денис - метод строки не может изменить саму строку let arr = [1, 3, 5, 7]; arr.pop(); console.log(arr); // [1, 3, 5] - метод массива изменяет массив name = 'Анна' // присваивание дает примитиву новое (не измененное) значение

  В JavaScript все примитвные значение (кроме null и undefined) имеют объектные эквиваленты, которые являются оболочкой для примитивов. Эти объекты-оболочки — String, Number, BigInt, Boolean и Symbol. Они имеют методы, которые позволяют манипулировать примитивами.

  Теперь поговорим о TypeScript. В TypeScript мы можем указывать у переменной нужный нам тип данных с помощью : type после объявления переменной. Это называется объявлением типа, или подписью типа. Например:

  let id: number = 5; let firstname: string = 'Денис'; let hasDog: boolean = true; let unit: number; // Объявление переменной без присваивания значения unit = 5;

  Однако в большинстве случаев, лучше не указывать тип явно, так как TypeScript автоматически присваивает тип переменной (вывод типа).

  let // TS знает, что это число let firstname = 'danny'; // TS знает, что это строка let hasDog = true; // TS знает, что это логическое значение hasDog = 'yes'; // ERROR - TS выдаст ошибку

  Также мы можем задать переменной объединенное значение. Объединенный тип — это переменная, которой можно присвоить более одного типа.

  let age: string | number; age = 26; age = '26';

  Подписывайтесь, чтобы не пропустить следующие части!

  Источник