Создание программы на Typescript в WebStorm

@Эллина888 · Регистрация: 06.11.2016

Студворк — интернет-сервис помощи студентам

Подскажите, пожалуйста, как в WebStorm написать простейшую программу hello world на typescript. Непонятно, что делать с конфигом, как вообще это скомпилировать. Хотелось бы увидеть пошаговое руководство.

Qwerty_Wasd · 21.02.2019, 01:46

Эллина888, почему бы не воспользоваться официальной документацией и туторами самих JetBrains ? - https://www.jetbrains.com/help... pport.html. Там и "пошаговое руководство", и ссылки на соответствующие ресурсы.

@Эллина888 · 21.02.2019, 01:55 **[ТС]**

Qwerty_Wasd, потому что, создавая проект по этим инструкциям, я не смогла даже слово вывести. Абсолютно ничего непонятно

Qwerty_Wasd · 21.02.2019, 03:56

Эллина888, .... не знаю что Вам на это ответить... точнее нет - знаю, но не стану.
В общем так, черт с ним, поставил себе WebStorm. В нем кстати поддержка TS по умолчанию, но можно подключить бандл, установленный глобально в Node npm install -g typescript.

1. ставим WebStorm(далее WS)
2. ставим Node.js(далее нода), npm.
3. открываем WS
4. создаем проект
5. CTRL+ALT+S - настройки
6. Ищем Languages and Frameworks > TypeScript
7. Должна быть включена поддержка пакета(галочка) и подключены нода\бандл - скрины
8. правой кнопкой по папке проекта, new > html file
9. правой кнопкой по папке проекта, new > typescript file
10. появится сообщение сверху что-то типа "компилить в js?" - тыкаем в ОК
11. далее пишем уже на этом злосчастном синтаксисе )) - скрин
12. открываем страничку в браузере - проверяем - скрин

Всё это написано по ссылке, что я Вам предоставил. Не так сложно, не правда ли?

@8Observer8 · 21.02.2019, 04:12

I use VSCode as text editor but I compile TS from Integrated Terminal in VSCode or sometimes I use "Far Manager" to compile from command line.

Maybe it will be useful for you. When you will have questions about TS and you will want to place a few files in Sandbox you can use my little step-by-step instruction: A few TypeScript files on Sandbox

Добавлено через 2 минуты
There are a lot of ways how to compile a few TS files for usage in browser. For example: Gulp - TypeScript

Qwerty_Wasd · 21.02.2019, 04:19

8Observer8, hi!
I think, topicstarter willn't understand you

She can't readed simple manual in english.
By way, I use too VSCode with package TS on Node

I'm pleased read your stuff.

@Эллина888 · 21.02.2019, 09:59 **[ТС]**

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

@8Observer8 · 21.02.2019, 13:44

Сообщение от Qwerty_Wasd

I think, topicstarter willn't understand you She can't readed simple manual in english.

Yes, I know, but it is not difference for me, because she is not one who see this theme. Maybe it will be useful for someone. My goal is to train in English and do no use Russian and think in English. It is not my problems. She has a head with brain she can understand that she can copy a text to http://translate.google.com If she does not understand English and she does not know how to translate from English to Russian (for example, she learn German or French in school and University like me) she cannot use TypeScript because the biggest part of information: documentation, books and tutorials and so on is in English.

Translate Google translates:

Несколько файлов TypeScript в песочнице

В нашем примере есть несколько файлов TypeScript. Мы хотим разместить эти скрипты в Песочнице.

Вот результат на Песочнице: щелчок. Откройте консоль отладки в своем браузере, чтобы увидеть результат: «Ctrl + Shift + J» в Chrome.

В консоли отладки вы увидите следующие сообщения:

Прямоугольник был создан
Прямоугольник был нарисован

Создайте эти файлы в песочнице:

Program.ts

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Rectangle } from "./Rectangle";
 
export class Program
{
    public static Main(): void
    {
        // Create a rectangle
        let rectangle = new Rectangle();
 
        // Draw the rectangle
        rectangle.Draw();
    }
}
Program.Main();

Rectangle.ts

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export class Rectangle
{
    public x: number;
    public y: number;
 
    public constructor(x: number = 0, y: number = 0)
    {
        /* ... */
        console.log("Rectangle was created");
    }
 
    public Draw(): void
    {
        /* ... */
        console.log("Rectangle was drawn");
    }
}

Нам нужно скомпилировать эти файлы в AMD. Для этого создайте файл «tsconfig.json» в Песочнице:

tsconfig.json

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "compilerOptions": {
        "module": "amd",
        "outDir": ".",
        "sourceMap": true
    },
    "include": [
        "*.ts"
    ],
    "exclude": [
        ""
    ]
}

Создайте файл RequereConfig.ts в Песочнице:

RequireConfig.ts

JavaScript
1
2
3
4
5
6
7
8
requirejs.config({
    baseUrl: "."
});
 
requirejs(["Program"], (Program) =>
{
 
});

Добавьте файл require.min.js в файл index.html:

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>A few TypeScript files on sandbox</title>
    <script data-main="RequireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
 
<body>
    <h3>See the console output. Press "Ctrl+Shiprt+J" in the Chrome browser.</h3>
</body>
 
</html>

Вот результат на Песочнице: щелчок. Откройте консоль отладки в своем браузере, чтобы увидеть результат: «Ctrl + Shift + J» в Chrome.

В консоли отладки вы увидите следующие сообщения:

Прямоугольник был создан
Прямоугольник был нарисован

Постскриптум Если вам нужно работать локально, вам нужно выполнить следующие команды:

npm init -y
npm i -D @types/requirejs

P.S.S. Прочтите эту книгу, чтобы узнать больше о AMD и RequireJS: Mastering TypeScript - 2nd Edition - Nathan Rozentals

Qwerty_Wasd · 21.02.2019, 16:59

Не по теме:

Эллина888, не за что :)
Обращаю также Ваше внимание - 8Observer8 оставил Вам перевод с его ресурсов, ссылки на которые он Вам дал. Почитайте, как будет время :)

@8Observer8 · 21.02.2019, 17:48

It is the most common problem for anyone who starts to study TS. They cannot include a few ".js" files after compilation to <script> tags in "index.html".

It is very simple in JS. You have two files in JS and you can include them in "index.html"

Output:

Hello, Ivan

PHP/HTML
1
2
3
4
5
6
7
8
<html>
 
<head>
    <script src="js/sayHello.js"></script>
    <script src="js/main.js"></script>
</head>
 
</html>

sayHello.js

JavaScript
1
2
3
4
function sayHello(name)
{
    console.log("Hello, " + name);
}

main.js

JavaScript
1
2
3
4
5
function main()
{
    sayHello("Ivan");
}
window.onload = main;

But if you rewrite these files in TypeScript:

sayHello.ts

JavaScript
1
2
3
4
export function sayHello(name: string)
{
    console.log("Hello, " + name);
}

main.ts

JavaScript
1
2
3
4
5
6
7
import { sayHello } from './sayHello';
 
function main()
{
    sayHello("Ivan");
}
window.onload = main;

And if you compile them to JavaScript:

tsc ts/main.ts ts/sayHello.ts --outDir "dist"

You cannot just include this files in "index.html":

PHP/HTML
1
2
3
4
5
6
7
8
<html>
 
<head>
    <script src="dist/sayHello.js"></script>
    <script src="dist/main.js"></script>
</head>
 
</html>

You will see this errors in the browser debug console:

Uncaught ReferenceError: exports is not defined
at sayHello.js:2

Uncaught ReferenceError: exports is not defined
at main.js:2

@8Observer8 · 21.02.2019, 18:09

There are a few ways to solve this problem:

You can concatenate all generated ".js" files in one bundle.js file using: Webpack, Gulp, Grund and so on. For example, see this official instruction: Gulp - TypeScript
You can compile to AMD modules and use RequreJS to load them. For example, see my instruction: A few TypeScript files on Sandbox
You can use Browserify to concatenate all generated ".js" files in one bundle.js file

I will show you how to use Browserify. Install Browserify using this command:

npm install browserify -g

You can create bundle.js using this command:

browserify dist/main.js dist/sayHello.js -o dist/bundle.js

You will see "bundle.js" in the "dist" folder. Now you can include "bundle.js" in "index.html" using <script> tag:

PHP/HTML
1
2
3
4
5
6
7
<html>
 
<head>
    <script src="dist/bundle.js"></script>
</head>
 
</html>

Open "index.html" file in a browser and you will see "Hello, Ivan" in the browser debug console.

@8Observer8 · 21.02.2019, 18:35

Эллина888, thank you very much. I helped me to create the awesome instruction for beginners in my blogs:

CyberForum: Browserify TypeScript
GameDev: Browserify TypeScript

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@Эллина888 1 / 1 / 0 Регистрация: 06.11.2016 Сообщений: 68

	Создание программы на Typescript в WebStorm 21.02.2019, 01:31. Показов 7189. Ответов 11 Метки нет (Все метки) Подскажите, пожалуйста, как в WebStorm написать простейшую программу hello world на typescript. Непонятно, что делать с конфигом, как вообще это скомпилировать. Хотелось бы увидеть пошаговое руководство. 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	21.02.2019, 01:46
	Эллина888, почему бы не воспользоваться официальной документацией и туторами самих JetBrains ? - https://www.jetbrains.com/help... pport.html. Там и "пошаговое руководство", и ссылки на соответствующие ресурсы. 0

@Эллина888 1 / 1 / 0 Регистрация: 06.11.2016 Сообщений: 68
	21.02.2019, 01:55 [ТС]
	Qwerty_Wasd, потому что, создавая проект по этим инструкциям, я не смогла даже слово вывести. Абсолютно ничего непонятно 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	21.02.2019, 03:56
	Сообщение было отмечено Эллина888 как решение Решение Эллина888, .... не знаю что Вам на это ответить... точнее нет - знаю, но не стану. В общем так, черт с ним, поставил себе WebStorm. В нем кстати поддержка TS по умолчанию, но можно подключить бандл, установленный глобально в Node npm install -g typescript. 1. ставим WebStorm(далее WS) 2. ставим Node.js(далее нода), npm. 3. открываем WS 4. создаем проект 5. CTRL+ALT+S - настройки 6. Ищем Languages and Frameworks > TypeScript 7. Должна быть включена поддержка пакета(галочка) и подключены нода\бандл - скрины 8. правой кнопкой по папке проекта, new > html file 9. правой кнопкой по папке проекта, new > typescript file 10. появится сообщение сверху что-то типа "компилить в js?" - тыкаем в ОК 11. далее пишем уже на этом злосчастном синтаксисе )) - скрин 12. открываем страничку в браузере - проверяем - скрин Всё это написано по ссылке, что я Вам предоставил. Не так сложно, не правда ли? Миниатюры 2

@8Observer8 9036 / 2937 / 493 Регистрация: 05.10.2013 Сообщений: 7,960 Записей в блоге: 216
	21.02.2019, 04:12
	I use VSCode as text editor but I compile TS from Integrated Terminal in VSCode or sometimes I use "Far Manager" to compile from command line. Maybe it will be useful for you. When you will have questions about TS and you will want to place a few files in Sandbox you can use my little step-by-step instruction: A few TypeScript files on Sandbox Добавлено через 2 минуты There are a lot of ways how to compile a few TS files for usage in browser. For example: Gulp - TypeScript 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	21.02.2019, 04:19
	8Observer8, hi! I think, topicstarter willn't understand you She can't readed simple manual in english. By way, I use too VSCode with package TS on Node I'm pleased read your stuff. 0

@Эллина888 1 / 1 / 0 Регистрация: 06.11.2016 Сообщений: 68
	21.02.2019, 09:59 [ТС]
	Qwerty_Wasd, спасибо вам большое, я пыталась разобраться с конфигом, ничего не выходило, а так всю настройку производила также. 0

Qwerty_Wasd
	21.02.2019, 16:59
	Не по теме: Эллина888, не за что :) Обращаю также Ваше внимание - 8Observer8 оставил Вам перевод с его ресурсов, ссылки на которые он Вам дал. Почитайте, как будет время :) 0

@8Observer8 9036 / 2937 / 493 Регистрация: 05.10.2013 Сообщений: 7,960 Записей в блоге: 216
	21.02.2019, 18:35
	Эллина888, thank you very much. I helped me to create the awesome instruction for beginners in my blogs: CyberForum: Browserify TypeScript GameDev: Browserify TypeScript 0

Создание программы на Typescript в WebStorm

Решение