Ts src что это

Атрибут src в JavaScript: Что это и Зачем он Нужен?

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

Понимание атрибута src

Атрибут src, что расшифровывается как «source» (источник), в первую очередь связан с HTML-тегами, которые требуют загрузки внешних ресурсов, таких как теги

Зачем нужен атрибут src в JavaScript?
1. Разделение кода

Атрибут src позволяет разделять код JavaScript на отдельные файлы. Это удобно, когда вы разрабатываете большие веб-приложения, поскольку вы можете разбить код на логические блоки и подключать их при необходимости. Это способствует поддерживаемости и управляемости проекта.

2. Кеширование

При использовании атрибута src браузеры могут кэшировать внешние JavaScript-файлы. Это означает, что после первой загрузки страницы браузер сохраняет файл JavaScript в кэше. Когда пользователь переходит на другие страницы вашего сайта, файл JavaScript не загружается снова, а берется из кэша. Это увеличивает скорость загрузки и экономит трафик.

3. Многократное использование

Использование атрибута src позволяет многократно использовать один и тот же JavaScript-файл на разных страницах вашего сайта. Это устраняет необходимость дублирования кода и обеспечивает единообразие и консистентность в вашем приложении.

4. Сторонние библиотеки

Атрибут src также используется для подключения сторонних JavaScript-библиотек и фреймворков. Это позволяет разработчикам использовать готовые решения для решения различных задач без необходимости писать весь код с нуля.

Пример использования атрибута src

В этом примере мы подключили внешний JavaScript-файл «script.js» с помощью атрибута src. Этот файл будет загружен и выполнен браузером при загрузке страницы.

Заключение

Атрибут src в JavaScript играет важную роль, позволяя подключать внешние JavaScript-файлы и реализовывать разделение кода, кеширование, многократное использование и использование сторонних библиотек. Это мощный инструмент в веб-разработке, который способствует эффективному созданию и управлению интерактивными веб-приложениями.

Если вы хотите освоить JavaScript, советуем начать обучение на курсах в онлайн-школах. 2 курса по JavaScript, на которые стоит обратить внимание:

• Курс «Fullstack-разработчик на JavaScript» в онлайн-школе Нетология. За 2 месяца обучения вы научитесь программировать на JavaScript и TypeScript — сможете самостоятельно создавать сайты и веб-приложения. Освоите передовые технологии — React, Node.js, Docker, Express.js, Nest.js, Firebase, MongoDB. Сможете начать работать уже через 6 месяцев обучения. На курс действует скидка 40%, а по нашему промокоду u4ionline вы получите доп. скидку 5% (введите промокод в специальное поле на странице курса на сайте Нетологии).
• Курс «JavaScript» в онлайн-школе Skillbox. С помощью JavaScript вы сможете создавать интерактивные элементы на сайте. Например, всплывающие подсказки, галереи, выпадающие меню и формы. Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей. На курс действует скидка 40%, а если вы активируете наш промокод u4ionline, перейдя по этой ссылке, вы получите скидку 60%, после чего выберите этот курс и оставьте заявку на обучение.

JavaScript и фронтенд-разработчик тесно связаны, поскольку JavaScript является одним из ключевых языков программирования, используемых для создания интерактивных и динамических элементов на веб-страницах. 5 курсов по frontend-разработке с трудоустройством после обучения, на которые стоит обратить внимание:

• Профессия Frontend-разработчик в онлайн-школе Skillbox. На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины. На курс действует скидка 40%, а если вы активируете наш промокод u4ionline, перейдя по этой ссылке, вы получите скидку 60%, после чего выберите этот курс и оставьте заявку на обучение.
• Курс Frontend-разработчик в онлайн-школе Нетология. За 13 месяцев обучения вы освоите востребованную IT-профессию — научитесь создавать сайты и проектировать интерфейсы с нуля. Соберёте портфолио из 5 проектов. Сможете начать работать по специальности уже через 6 месяцев обучения. На курс действует скидка 40%, а по нашему промокоду u4ionline вы получите доп. скидку 5% (введите промокод в специальное поле на странице курса на сайте Нетологии).
• Курс Фронтенд-разработчик в Яндекс Практикуме. Вы научитесь писать код для сайтов и веб-сервисов — с нуля за 10 месяцев. Сможете разрабатывать сайты и веб-сервисы на HTML, CSS и JavaScript. Сделаете первые шаги или смените направление в IT. В Яндекс Практикуме нет скидок на курсы, зато можно начать обучение бесплатно, а затем принять решение продолжать ли учёбу.
• Курс «Frontend-разработчик: быстрый старт в профессии» в онлайн-школе GeekBrains. Вы получите базовые знания и на практике научитесь создавать сайты и приложения, проектировать интерфейсы и работать со сложными инструментами frontend-разработчика. Изучите фреймворки и библиотеки, которые упростят вашу работу. Через 9 месяцев обучения вы сможете трудоустроиться. На курс действует скидка 63%, а по промокоду Gdeslon вы получите доп. скидку 5% (сообщите промокод менеджеру онлайн-школы GeekBrains).
• Курс «Профессия: Frontend-разработчик» в онлайн-школе ProductStar. Вы научитесь создавать удобные и эффектные сайты, приложения и сервисы. Освоите одну из самых актуальных профессий и станете востребованным специалистом для любой IT компании. В данный момент на курс действуют скидки от 55% до 58% в зависимости от выбранного тарифа.

Настройка рабочего окружения¶

Иногда может потребоваться выполнить компиляцию TypeScript кода с помощью одного компилятора tsc. Именно поэтому текущая глава посвящена его установке, конфигурированию и запуску. Кроме того, она расскажет как спрятать длинные команды, изобилующие различными флагами компилятора, за коротенькими, определенными в package.json.

Настройка рабочего окружения¶

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

Кроме того, html и css используют в чистом виде по большей части только в образовательных целях. В реальных проектах используют их более продвинутые аналоги, такие как, например, jade или sass, которые, так же, как TypeScript, нуждаются в компиляторах. Также приложения не обходятся без шрифтов, иконок и изображений, которые в целях оптимизации принято предварительно обрабатывать. Поэтому современный процесс разработки не представляется возможным без специализированных сборщиков, таких как webpack или gulp.

gulp относится к так называемым task runner’ам, использование которых требует императивного определения задач для каждого отдельного процесса, самостоятельной настройки отлова ошибок. В свою очередь webpack — это настоящий комбайн, конфигурирование которого больше напоминает декларативный стиль. Но поскольку книга посвящена языку TypeScript, текущая глава будет ограничена рассмотрением сборки проекта при помощи одного компилятора tsc.

Сборка проекта с помощью tsc (TypeScript compiler)¶

Первым делом нужно создать директорию, в данном случае это будет директория с названием typescript-with-tsc, содержащая две поддиректории src и dest. В первой будут находиться исходные файлы с расширением .ts, которые будут преобразованы в файлы с расширением .js и помещены во вторую директорию.

Теперь нужно открыть консоль в рабочей директории и выполнить инициализацию npm, в данном случае — ускоренную.

npm init -y 

На этот момент в директории должен появиться файл package.json. После инициализации npm установим компилятор TypeScript, выполнив в консоли следующую команду:

npm i -D typescript 

После успешной установки прежде всего нужно выполнить конфигурирование TypeScript. Для этого следовало бы выполнить в консоли:

tsc init 

Но, так как TypeScript установлен только локально, следует указать путь к нему:

./node_modules/.bin/tsc --init 

После этого в директории должен появиться файл tsconfig.json, точную настройку которого можно произвести после прочтения главы, посвященной опциям компилятора (глава Опции компилятора), а пока просто укажем нужные настройки. В сгенерированном файле tsconfig.json будет очень много опций, большинство из которых закомментировано, но в итоге должно получиться нечто подобное:

 1 2 3 4 5 6 7 8 9 10 11

 "compilerOptions":  "target": "es5", "module": "system", "outFile": "./dest/build.js", "rootDir": "./src" >, "exclude": [ "/node_modules/" ] > 

Теперь можно приступить к dev сборке. Для этого нужно открыть файл package.json и в поле script прописать команды для пакетного менеджера npm.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

 "name": "typescript-with-tsc", "version": "1.0.0", "description": "", "main": "index.js", "scripts":  "build": "./node_modules/.bin/tsc --project ./tsconfig.json --watch", "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC", "devDependencies":  "typescript": "^2.5.2" > > 

Осталось только создать в директории src файл index.ts и запустить процесс разработки, выполнив в консоли команду:

npm run build 

После этого в папке dest должен появиться скомпилированный index.js, а при изменении файлов в директории src преобразование должно запускаться автоматически. Сразу стоит обратить внимание на то, как именно компилятор понимает, какие файлы компилировать.

Для примера, создадим в директории src файл hello-world.ts, в котором объявим функцию, возвращающую приветствие.

1 2 3 4 5

// Файл hello-world.ts export function getMessage(): string  return 'Hello World!'; > 

Важный момент заключается в том, что компилятор не будет обращать на этот файл внимание, пока он не будет задействован в программе, то есть не будет импортировать в index.ts

1 2 3

import  getMessage > from './hello-world'; console.log(getMessage()); // Hello World! 

Такое поведение называется Tree Shaking, и если по каким-либо причинам его нужно переопределить, то для этого нужно поправить конфигурацию компилятора, определив параметр includes , представляющий массив ссылок на файлы, которые необходимо компилировать независимо от их использования проектом.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14

 "compilerOptions":  "target": "es5", "module": "system", "outFile": "./dest/build.js", "rootDir": "./src/" >, "include": [ "./src/__/*.ts" ], "exclude": [ "/node_modules/" ] > 

Очень часто бывает так, что при разработке в коде используются библиотеки, которых не должно быть в конечной сборке. Можно было бы каждый раз переписывать конфигурационный файл tsconfig.json, но есть способ сделать это элегантнее. Разделение dev сборки от prod осуществляется путем создания ещё одного конфигурационного файла. Назовем его tsconfig.prod.json и поместим в корне проекта. Стоит добавить, что конфигурационные файлы можно размещать где угодно, главное при запуске компилятора указать путь к нужному конфигу с помощью опции —project . Если это не сделать, компилятор будет искать файл tsconfig.json в той директории, из под которой он был запущен.

tsc -b --project ./tsconfig.json 

Заголовочные файлы

Для установки связи с внешними файлами скриптов javascript в TS служат декларативные или заголовочные файлы. Это файлы с расширением .d.ts , они описывают синтаксис и структуру функций и свойств, которые могут использоваться в программе, не предоставляя при этом конкретной реализации. Их действие во многом похоже на работу файлов с расширением .h в языках C/C++. Они выполняют своего рода роль оберток над библиотеками JavaScript.

Рассмотрим, как мы можем использовать заголовочные файлы. Иногда в программах на javascript используются глобальные переменные, которые должны быть видны для всех функций приложения. Например, пусть на веб-странице (или во внешнем подключаемом файле javascript) в коде js определена переменная:

      
Приложение на TypeScript
    

В данном случае для простоты переменная определена веб-странице, хотя она также могла быть определена во внешнем подключенном js-файле.

И, допустим, мы хотим использовать эту переменную message в коде TypeScript в файле app.ts:

console.log(message);

При запуске приложения компилятор TS не сможет скомпилировать программу, так как для кода TS глобальная переменная пока не существует. В этом случае нам надо подключать определение глобальной переменной с помощью декларативных файлов. Для этого добавим в проект новый файл, который назовем globals.d.ts и который будет иметь следующее содержимое:

declare let message: string;

С помощью ключевого слова declare в программу на TS подключается определение глобальной переменной.

То есть у нас получится следующая структура проекта:

• app.ts
• globals.d.ts
• index.html

Компиляция

Если мы компилируем, передавая компилятору в консоли название файла:

tsc app.ts

То в этом случае компилятор не найдет автоматически файл globals.d.ts. В этом случае нам надо в файле app.ts явно указать расположение файла globals.d.ts с помощью директивы reference

/// console.log(message);

Если же мы полагаемся на файл конфигурации tsconfig.json, просто выполняя команду

Подобным образом мы можем подключать другие компоненты кода JavaScript — функции, объекты, классы. Рассмотрим их подключение.

Функции

Пусть на веб-странице в коде js объявлены две следующие функции:

let message = «Hello TypeScript!»; function hello() < console.log(message); >function sum(a, b)

Функция hello() выводит значение переменной message на консоль, а функция sum() возвращает сумму двух чисел.

И, допустим, в коде TS мы хотим вызывать эти функции:

hello(); let result = sum(2, 5); console.log(result);

В этом случае подключение в файле globals.d.ts выглядело бы так:

declare function hello(): void; declare function sum(a: number, b: number): number;

Подключение объектов

Пусть в коде JavaScript есть следующий объект:

const tom = < name: "Tom", age: 37, print()< console.log(`Name: $Age: $`); > >

Используем этот объект в коде typescript:

tom.print();

В этом случае определение объекта в файле globals.d.ts выглядело бы так:

declare const tom: void>;

Подключени сложных объектов

Однако может возникнуть сложность с подключением более сложных объектов. Например, пусть есть такой объект javascript:

var points = [< X: 10, Y: 34 >, < X: 24, Y: 65 >, < X: 89, Y: 12 >];

Для данного массива объектов в файле globals.d.ts мы можем определить соответствующий отдельному объекту интерфейс и подключить массив объектов некоторого интерфейса, который содержит два свойства X и Y:

interface IPoint < X: number; Y: number; >declare var points: IPoint[];

И в TS мы сможем использовать этот массив:

for (let point of points) < console.log(`Точка с координатами X = $Y = $`); >

Консольный вывод браузера:

Точка с координатами X = 10 Y = 34 Точка с координатами X = 24 Y = 65 Точка с координатами X = 89 Y = 12

Подключение классов

Рассмотрим последний пример — подключение в typescript классов, определенных в javascript. Пусть в коде JavaScript определен следующий класс Person:

class Person < constructor(name, age)< this.name = name; this.age = age; >display() < console.log(this.name, this.age); >>

Для этого класса в файле globals.d.ts определим следующее объявление класса:

declare class Person

Для класса прописываем все его поля и методы, при этом методы (в том числе конструктор) не имеют реализации, для них только определяются параметры и их типы и тип возвращаемого значения.

И в коде TypeScript используем этот класс:

let tom = new Person("Tom", 37); tom.display(); // Tom 37 console.log(tom.name); // Tom

Основы TypeScript: компилятор TypeScript (tsc) и tsconfig.json

Добро пожаловать в первую часть серии из десяти частей, посвящённой основам TypeScript. В этой первой части мы рассмотрим компилятор TypeScript ( tsc ) и файл конфигурации ( tsconfig.json ).

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

Компилятор TypeScript ( tsc )

1. Что такое tsc

tsc — это компилятор TypeScript. Он принимает TypeScript код (файлы .ts или .tsx ) и компилирует его в JavaScript код (файлы .js ), который может быть выполнен средой выполнения JavaScript.

2. Как установить tsc

Вы можете установить tsc глобально с помощью npm (Node Package Manager/Менеджер пакетов Node), выполнив команду:

npm install -g typescript

3. Компиляция TypeScript кода

После установки tsc вы можете компилировать TypeScript файлы, выполнив следующую команду в терминале:

tsc yourfile.ts

4. Параметры компилятора

tsc поставляется с различными параметрами компилятора, позволяющими настроить процесс компиляции. Например:

tsc - target ES5 - outDir ./dist

Эта команда устанавливает целевую версию ECMAScript на ES5 и указывает каталог для вывода .js файлов как ./dist .

tsconfig.json

1. Что такое tsconfig.json

tsconfig.json — это файл конфигурации для проектов TypeScript. Он позволяет указать параметры компилятора, включить/исключить файлы и настроить другие параметры для вашего TypeScript-проекта.

2. Создание файла tsconfig.json

Вы можете создать файл tsconfig.json вручную в корне проекта или использовать команду tsc —init для генерации базового файла конфигурации.

3. Параметры компилятора в tsconfig.json

В tsconfig.json могут быть включены различные параметры компилятора. К числу распространённых относятся:

• compilerOptions : Определяет параметры компилятора.
• include : Указывает массив шаблонов файлов для включения в компиляцию.
• exclude : Указывает массив шаблонов файлов, которые нужно исключить из компиляции.
• extends : Позволяет расширить другой конфигурационный файл.

4. Пример tsconfig.json

 
"compilerOptions":  
"target": "es5", 
"module": "commonjs", 
"outDir": "./dist" 
>, 
"include": [ 
"src/**/*.ts" 
], 
"exclude": [ 
"node_modules" 
] 
>

Этот пример устанавливает целевое значение ES5, систему модулей — CommonJS, каталог для вывода — ./dist , включает все файлы TypeScript в каталог src и исключает каталог node_modules .

Использование tsconfig.json позволяет поддерживать согласованную конфигурацию во всем проекте TypeScript и упрощает процесс компиляции, избавляя от необходимости указывать опции при каждом запуске команды tsc .

Основы TypeScript

1. Основы TypeScript: компилятор TypeScript ( tsc ) и tsconfig.json
2. Основы TypeScript: JavaScript в сравнении с TypeScript
3. Основы TypeScript: Примитивы и базовые типы
4. Основы TypeScript: Неявные и Явные типы, Утверждения типов
5. Основы TypeScript: Создание типов, перечислений и интерфейсов
6. Основы TypeScript: Объединение, Литеральные и Размеченные типы
7. Основы TypeScript: Типизация функций и сигнатур
8. Основы TypeScript: Any , Void , Never , Null , Строгие проверки Null
9. Основы TypeScript: ООП практика, классы и наследование