JavaScript требует много времени для изучения, потому что API постоянно обновляются вместе с документацией по мере развития языка. Есть также много фреймворков и библиотек для обзора и развития вас, как разработчиков.
JavaScript по-прежнему остается одним из самых популярных языков программирования в мире и всегда будет пользоваться большим спросом. Он занял первое место в опросе Stackoverflow 2021, тогда как TypeScript занял 7-е место. Итак, если JavaScript так популярен и востребован во всем мире, зачем вообще изучать TypeScript?
Каким бы хорошим ни был JavaScript, этот язык по-прежнему имеет много недостатков по сравнению с другими современными языками программирования. И, к сожалению, есть много людей, которым просто не нравится JavaScript по разным причинам.
TypeScript — это в основном современный способ разработки проектов JavaScript, где язык компилируется в необработанный JS, поэтому ваш код может быть прочитан браузером и другими разработчиками, которые могут не знать TypeScript.
TypeScript направлен на решение многих проблем, которые есть у JavaScript, что делает язык намного ближе к другим современным языкам программирования.
Между ними довольно много различий, мы расскажем о некоторых из них здесь.
TypeScript может помечать ошибки во время компиляции в процессе разработки. Это действительно хорошая функция, потому что у вас меньше шансов получить ошибки во время написание кода, когда ваше приложение создано и запущено. JavaScript способен видеть эти ошибки только во время выполнения, поэтому отладка, скорее всего, будет намного медленнее, поскольку теперь вы выполняете больше ненужных проверок. Улучшенные инструменты, доступные в TypeScript, обеспечивают гораздо лучший опыт при написании кода.
JavaScript использует динамическую типизацию, тогда как TypeScript использует статическую типизацию. При динамической типизации вы можете переназначать переменные, потому что тип данных может измениться. Это невозможно со статической типизацией, потому что тип данных определен, что означает, что если попытаетесь назначить другой тип данных, вы увидите ошибку компиляции. Есть плюсы и минусы для каждого метода.
1 2 3 4 5 6 |
// This is valid JavaScript code let num = 10; num = "10"; |
1 2 3 4 5 6 |
// You will get the error Type 'string' is not assignable to type 'number'. let num: number = 10; num = "10"; |
TypeScript может использовать интерфейс в коде, который в значительной степени описывает структуру объекта в приложении. Он определяет общий синтаксис, который требуется для объекта, поэтому вы можете использовать его для документации и отслеживания ошибок в редакторе кода.
Стоит отметить, что компилятор TypeScript не будет преобразовывать синтаксис интерфейса в JavaScript. Он используется только для проверки типов, также известной как «утиная типизация» или «структурное подтипирование».
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Describe the shape of objects in your code. interface Series { id: number; seriesName: string; releaseDate: number; } // Use the interface for type checking in your object. const series: Series = { // The id needs to be a number id: 1, // The series name needs to be a string seriesName: 'The Book of Boba Fett', // The release data needs to be a number releaseDate: 2021, }; console.log(series); |
Node.js использует модули CommonJS по умолчанию, и любой, кто знаком с ним, знает о require
синтаксисе. По сравнению с тем, когда вы используете Node.js с TypeScript, у вас есть возможность использовать операторы require
или import
и . export
Конечно, есть способы заставить его работать и в нативном JavaScript, если вы проведете исследование.
Модули JavaScript CommonJS
1 2 3 4 |
const express = require('express'); |
Модули TypeScript ES
1 2 3 4 |
import express from 'express'; |
При использовании TypeScript вы получаете доступ к tsconfig.json
файлу, который позволяет вам изменять множество настроек, включая расширение target
. Это позволяет вам установить версию языка JavaScript для выходных файлов JavaScript. Например, это могут быть ES2015, ES2016, ES2017 и т. д.
TypeScript довольно удивителен, но у него есть несколько недостатков, о которых вы должны знать. Во-первых, TypeScript не работает в браузере, поэтому вам нужно скомпилировать свой код в JavaScript, прежде чем вы сможете его использовать.
К счастью, у TypeScript есть компилятор, поэтому, когда вы настроите его, он автоматически скомпилирует ваши файлы TypeScript в JavaScript, и, к счастью, это быстрый процесс. Таким образом, вам не нужно беспокоиться о том, что вам придется ждать несколько минут, пока ваш код скомпилируется, процесс обычно выполняется за секунды.
Другим недостатком является тот факт, что вам придется писать немного больше кода, особенно если вы хотите иметь статическую проверку типов. Недостатка в этом нет, потому что вы пишете более производительный и лучший код, который сделает его более удобным в сопровождении.
Еще кое-что, что вам нужно знать, это то, что вам потребуются некоторые пакеты объявления типа наряду с некоторыми обычными пакетами, которые вы используете. Пакеты объявления типов описывают встроенные объекты. Файлы объявлений дают вам способ объявлять типы или значения, поэтому нет необходимости предоставлять какие-либо реализации для значений.
Это не всегда будет так, потому что в некоторых пакетах уже есть определения типов, но не во всех. Это легче понять в приведенном ниже примере Express Node.js.
JavaScript-экспресс-приложение
1 2 3 4 |
npm i express |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Home Route'); }); const port = process.env.PORT || 3000; app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`)); |
Приложение TypeScript Express
1 2 3 4 |
npm i express @types/express @types/node |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import express, { Response, Request } from 'express'; const app = express(); app.get('/', (req: Request, res: Response) => { res.send('Home Route'); }); const port = process.env.PORT || 3000; app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`)); |
TypeScript хорошо поддерживается, и если вы предпочитаете редактор кода Visual Studio Code, то TypeScript рассматривается как первоклассный помощник, потому что Microsoft разработала редактор кода и язык.
Практически все популярные фреймворки JavaScript также поддерживают TypeScript. Сюда входят React, Angular, Vue и Svelte. Фреймворк express.js также совместим с TypeScript, как и другие фреймворки Node.js. Так что на самом деле ничто не мешает вам использовать TypeScript во внешнем и внутреннем интерфейсе вашего приложения.
Еще одним преимуществом является тот факт, что теперь вы можете использовать модули ES на внутреннем и внешнем интерфейсе. Например, если вы создаете приложение с серверной частью Node и интерфейсом React. Теперь вы можете использовать операторы import
и export
для обоих, и вам больше не нужно использовать require
операторы модулей CommonJS.
Можно попробовать изучить TypeScript у Scrimba, а также можно пройти еще один хороший курс по TypeScript на Udemy. Если вы уже знаете JavaScript, вам не потребуется много времени, чтобы освоить TypeScript. Кроме того, если вы новичок в JavaScript или все еще изучаете основы, вам лучше подождать, пока у вас не появится больше опыта, прежде чем изучать TypeScript.
Изучите TypeScript бесплатно
Понимание TypeScript — выпуск 2022 г.
Учите сначала JavaScript и только после его практики беритесь за TypeScript, иначе вы просто потратите время зря.
Всем успехов! Учитесь и практикуйтесь! Все получится!
Источник статьи: http://dev.to/