Устанавливаем поддержку языка в систему глобально (чтобы можно было пользоваться возможностями typescript из консоли)
npm install -g typescript
Создание и настройка проекта
npm и typescript
Создание проекта:
$ npm init
или создания проекта по умолчанию:
$ npm init -y
Добавляем зависимости
$ npm install -D typescript
(-D — значит добавление зависимости для разработки, можно использовать --save-dev)
Как результат в package.json увидим в разделе devDependencies зависимость от typescript
Структура проекта
Про настройку этого всего см
./src — для ts-скриптов
./dist - для скомпиленных js-файлов
tsconfig.json
Служит для настройки компилятора TypeScript.
Инициализация конфига (tsconfig.json) для typescript (чтобы каждый ts-скрипт не прогонять через tsc вручную, как описано далее в примере):
$ tsc --init
Интересные настройки
{
"compilerOptions": {}, // настройки компилятора
"exclude": ["./test.ts", "./src/test2.ts"], // Те файлы, которые мы захотим исключить на этапе компиляции
"include": [
"./src/**/*" // Указываем какие файлы и директории хотим компилить
],
"files": [
"./app.ts" // Можно перечислять отдельные файлы
]
}
По умолчанию, в exclude входит директория node_modules. Ее отдельно указывать не надо.
Про compilerOptions:
{
"compilerOptions": {
"target": "es6", // По умолчанию es5, но es6 уже работает почти во всех браузерах
"module": "commonjs", // Используется при настройке webpack (пока хз это о чем)
"outDir": "./dist", // Куда класть скомпиленные js
"rootDir": "./src", // Где корневая директория с ts-кодом
// "lib": [] // см ниже,
// "allowJs": true, // Использовать если мы ведем разработку на JS
// "checkJs": true, // и хотим использовать только некоторые фичи TS
// "jsx": "preserve" // При разработки на React совместно с TS
// "sourceMap": true, //
}
}
Про lib
Разкомменчиваем lib в tsconfig.json.
Допустим в html добавляем кнопку:
<body>
<div class="container">
<button class="btn" id="btn">Click me pls</button>
</div>
</body>
В typescript пробуем обратиться к ней:
const btn = document.querySelector('#btn')
И TypeScript не понимает что за document. Это потому, что в typescript отключен доступ к Browser API (поле lib пустое). Настройка lib регулирует, какие дополнительные надстройки добавить в typescript.
Если lib закомменчино, то по умолчанию все надстройки включаются (то есть у нас таких проблем не будет). Зачем это нужно? Для более тонкой настройки того что может и не может наш скрипт.
Простой пример
Создаем файл test.ts:
const str: string = 'Hello'
console.log(str)
Компилируем через компилятор TypeScript (рядом будет лежать test.js по результату):
$ tsc test.st
Скомпилить все файлы (конфигурируется tsconfig.json):
$ tsc
Чтобы каждый раз не вводить tsc, можно сказать компилятору, чтобы он отслеживал состояние проекта.
В этом случае, все изменение будут сразу скомпилены:
$ tsc --watch
или
$ tsc -w