Typescript. Начало работы.

Фронтенд розробка JavaScript. -> Typescript. Початок роботи.

Typescript. Початок роботи.

Ініціалізація npm проекту.

npm init

Установка транспілятора

sudo npm install -g typescript

Встановлення та оновлення nodejs та npm.

npm install npm@latest -g
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Перевірка версії.

node -v

Створення файлу конфігурації.

Перша програма app.ts.

function greeter(person) {
    return "Hello, " + person;
}

greeter('Dima')

Компіляція.

tsc app.ts

Або вказуючи повний шлях.

./node_modules/.bin/tsc

Початкова сторінка

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="app.js"></script>
    </body>
</html>

Додавання веб-сервера.

npm install lite-server --save

Іноді виникає помилка permission denied, mkdir ‘/home/user/.npm для усунення видаліть папку .npm

Запуск веб-сервера.

./node_modules/.bin/lite-server

Створення конфігураційного файлу tsconfig.json

У цьому файлі визначаються:

  • Вхідна (коренева) директорія проекту;

  • Вихідна директорія;

  • Опції компілятора;

  • Визначаються які файли включати та вимикати з компіляції.

    { “compilerOptions”: { “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “module”: “commonjs”, “target”: “ES5”, “outDir”: “built”, “rootDir”: “src” } }

якщо ви вказуєте файл для компіляції явно, то конфігураційний файл ігнорується!

Список усіх налаштувань typescript

Перенесем app.ts файл в папку src.

Запуск транспілятора у режимі відстеження змін (watch).

tsc -w

Виключення та включення каталогів з процесу стеження (tsconfig.json).

{
"compilerOptions": {
    ....
},
"include": [
    "**/*"
],
"exclude": [
    "node_modules",
    "**/*.spec.ts"
]}

У цьому прийнято такі умовні позначення.

    • будь-яка кількість символів, за винятком роздільника каталогів

? - один будь-який символ, за винятком роздільника каталогів

**/ - всі підкаталоги

Повна версія

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "noImplicitAny": false,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Визначення типу значення, що передається.

function greeter(person: string) {

Спроба передати неправильний тип.

let user = [0, 1, 2];
document.body.innerHTML = greeter(user);

src/app.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Визначення типу значення, що повертається.

function greeter(person: string): number {
    return "Hello, " + person;
}   
src/app.ts:8:1 - error TS2322: Type 'number' is not assignable to type 'string'.

Модульність

Визначимо бібліотечну функцію src/lib/function.ts.

export function sayHello( name ) {
    return `Hello {$name}`;
};

Імпортуємо її у головному модулі app.js.

import { sayHello } from './lib/function';

console.log(sayHello());

Отримуємо помилку у консолі. 

app.js:2 Uncaught ReferenceError: exports is not defined

Це означає, що js не знає конструкцію exports і для цього необхідно використовувати завантажувач модулів, наприклад SystemJS.

Встановлення.

npm install systemjs@0.19.22 --save

Шаблон

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title>
        <script src="node_modules/systemjs/dist/system.js"></script>
    </head>
    <body>
        <script>
            SystemJS.config({
                defaultJSExtensions: true
            });
            SystemJS.import('built/index.js');        
        </script>
    </body>
</html>

При компіляції на льоту (всередині браузера без запуску TSC).

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title>
        <script src="node_modules/systemjs/dist/system.js"></script>
        <script src="node_modules/typescript/lib/typescript.js"></script>
    </head>
    <body>
        <script>
            SystemJS.config({
                transpiler: 'typescript',
                    packages: {
                    src: {
                          defaultExtension: 'ts'
                        }
                    }
            });
            SystemJS.import('src/index.ts');

        </script>
    </body>
</html>