<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Знакомимся с TypeScript. Часть 1

Знакомимся с TypeScript. Часть 1

Сегодня мы поговорим о таком языке программирования как TypeScript. Язык был создан в 2012 в Microsoft году как улучшенная замена JavaScript для написания больших веб-приложений. Необходимость такого языка была обусловлена возрастающей сложностью поддержки крупных проектов, написанных на JavaScript, а также необходимостью в статической типизации и традиционной объектно-ориентированной модели.

Поэтому, если Вы уже знакомы с JavaScript или Javа, то TypeScript покажется Вам очень знакомым.

В TypeScript можно типизировать переменные, свойства, можно создавать полноценные классы, использовать модули и много чего еще о чем мы поговорим в следующих статьях, а в этой статье я покажу Вам как написать первый HelloWorld на TypeScript. Для написания даже такого маленького приложения необходимо выполнить достаточно много ручных манипуляций.

Итак, поехали!

Первое, что нам необходимо сделать - это создать дерево каталогов внутри рабочего каталога. Пример ниже.

D:.
│  package-lock.json
│  package.json
│  tsconfig.json
│  webpack.config.js

├──dist
│    index.html
│    style.css

└──src
     main.ts  

В корне рабочего каталога лежат файлы конфигурации для NodeJS, TypeScript и Webpack. В каталоге dist будут храниться собранные JavaScript файлы приложения, стили, разметка. В src - код приложения. Структуру каталогов внутри src Вы можете организовать самостоятельно.

Далее я приведу содержимое файлов конфигурации, Вам останется только скопировать их в каталог.

Файл package.json

{
  "name": "typescript-first-project",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/bundle.js",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

Файл tsconfig.json - чтобы не задавать настрокий компилятора TypeScript в консоли

{
  "compilerOptions": {
    "target": "es5",                         
    "module": "es2015",                   
    "outDir": "./dist/", 
    "strict": true, 
    "esModuleInterop": true,             
    "jsx": "react"
  }
}

Файл webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/main.ts',
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist'
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

Файл main.ts - код TypeScript

class HelloWorld
{
      // сслылка на DOM элемент
    public app = document.querySelector("#app")
    
    // метод печатающий строку в DOM
    public simpleMethod(): void
    {
        if(this.app) this.app.innerHTML = "Hello World from TypeScript!!!";
    }
}

// вызов
let hello = new HelloWorld()
hello.simpleMethod()

После того, как каркас приложения создан, можно приступить к сборке. Для этого в рабочем каталоге запускаем команду, которая установит необходимые зависимости.

$ npm install

Затем запустим сервер разработки

$ npm run start

После этого можно переходить по адресу http://localhost:8080 и смотреть результат. Особенность сервера разработки в том, что Вам не нужно вручную пересобирать проект. Как только Вы добавите новый файл или измените существующий в каталоге src, он самостоятельно пересоберет и перезагрузит старницу браузера, так что Вы всегда будете видеть актуальный результат. Если же результата нет, то надо сомтреть в консоль на предмет наличия ошибок. Как правило если проект не собриается значит где-то ошибка или нет компилятора tsc.

После того, как Вы написали приложение его надо окончательно собрать.

$ npm run build

В каталоге dist у Вас появится файл bundle.js, который вместе со стилями и разметкой можно выкладывать на хостинг.

Таким образом, в рамках данной статьи я рассказал Вам, как собрать HelloWorld на TypeScript. На этом на сегодня все!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.