Мое начало с TypeScript (первый эпизод первого сезона TS)

Это мой первый пост на medium.com и первая публикация серии статей, которые я собираюсь написать о TypeScript. Я хотел бы пригласить вас, мой дорогой читатель, сопровождать меня в этом путешествии, чтобы мы могли вместе освоить этот навык.

Короче говоря. Получив некоторый опыт работы с JavaScript, я решил начать изучать TypeScript. Меня убедил тот факт, что благодаря TS мы можем писать более чистый и защищенный от ошибок код. Другим преимуществом использования системы типов является меньшее количество тестов, которые нам нужно написать, чтобы убедиться, что наша работа выполнена как можно лучше.

Что такое TypeScript?

TypeScript — это язык программирования с открытым исходным кодом, разработанный Microsoft, который компилируется в JavaScript. Он был выпущен в 2012 году и с каждым годом продолжает набирать подписчиков. Многие разработчики связывают его с Angular, потому что Angular заставляет вас использовать TS.

TS является надмножеством JS, и действительный код JS также действителен для TS. Это как расширение JavaScript.

Ключевым дополнением, которое Ts применяет к JS, является система типов. Если вы не знакомы с «типом», это определение, которое сообщает вам, как предполагается использовать данные. Например, у нас могут быть числовые, строковые или логические типы. JS динамически типизирован, что означает, что переменная может содержать текст, число или даже целый объект с множеством подобъектов. TypeScript строго определяет, что может содержать данная переменная. Он вернет ошибку, если, например, мы попытаемся предоставить текст функции, которая требует числовых значений.

Как создать и настроить проект с помощью TypeScript

Мы можем легко создавать проекты так же, как мы создаем проекты JS. Давайте начнем с создания каталога для нашего нового проекта. Я назову свой проект overlord. Давайте создадим каталог и получим к нему доступ.

mkdir overlord
cd overlord

Затем мы должны создать проект с npm. Если мы используем npm init с флагом -y, нам не нужно отвечать на все вопросы по умолчанию. . После этого шага у нас будет файл package.json с конфигурацией нашего проекта.

npm init -y

Теперь мы должны установить TypeScript, а также определения типов для среды node.js. Мы можем сделать это, как показано ниже.

npm install --save-dev typescript
npm install --save-dev @types/node

В конце мы должны инициализировать TS в нашем проекте. Приведенная ниже инструкция сделает это, а также создаст контекст компиляции и файл tsconfig.json.

tsc --init

Каков контекст компиляции TS?

Контекст компиляции — это имя для группировки файлов TS, которые будут анализироваться компилятором, чтобы определить, что допустимо, а что нет. Он также содержит информацию об используемых параметрах компилятора. Мы можем определить упомянутую группировку или параметры компилятора с помощью файла tsconfig.json.

Параметры компилятора, как их прочитать?

На данный момент ваш tsconfig.json выглядит беспорядочно и содержит много закомментированных параметров. Не беспокойтесь об этом. Мы изменим его, чтобы он выглядел более разборчиво. Вот так это выглядит после изменений.

Это только основные параметры конфигурации. Есть много других. Я рекомендую проверить документацию, чтобы получить больше информации. Вы можете найти это здесь".

Теперь мы рассмотрим эти параметры и объясним, для чего они нужны.

"include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "**/*.test.ts"
  ]

• include — указывает массив имен файлов или шаблонов для включения в программу (какие файлы должны быть включены в процессе компиляции)
• exclude — указывает массив имен файлов или шаблонов, которые следует пропускать при разрешении include (какие файлы следует пропускать при компиляции)

Это означает, что наш компилятор будет искать файлы ts в каталоге src и во всех подкаталогах, но пропустит все файлы с spec.ts или расширение test.ts. Упомянутые расширения являются расширениями тестов.

"compilerOptions": {
    
    "target": "es5",
    
    "module": "commonjs",                     
    
    "lib": ["ESNext"],                        
    
    "allowJs": true,                         
    
    "strict": true,                           
    
    "esModuleInterop": true,                  
    
    "outDir": "lib",
  }

mkdir src

const sayHello = (name:string) => {
  console.log(`Hello ${name}!`)
}
sayHello('Johnny');

tsc

tsc -w