Init

TypeScript β€” статичСски Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ JS. Под ΠΊΠ°ΠΏΠΎΡ‚ΠΎΠΌ компилируСтся Π² JavaScript.

site: https://www.typescriptlang.org/

IDE online: https://www.typescriptlang.org/play/?ssl=2&ssc=26&pln=2&pc=48#

НСплохой видСокурс Π½Π° русскком языкС: https://youtube.com/playlist?list=PLqKQF2ojwm3nW-cQeSER79xdpK3vL5c-g

Установка

УстанавливаСм ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ языка Π² систСму глобально (Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ возмоТностями 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

ЗапускаСм, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Π΅Ρ€Π΅Π· NodeJS (Π½Π°Π΄ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ https://nodejs.org/en/):

$ node test.js

ΠŸΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΊΠ° Π² html. Атрибут defer ΠΎΡ‚ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ скрипта Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° вся страница Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ.:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TypeScript</title>
    <!-- Compiled and minified CSS -->
    
    <script src="dist/app.js" defer></script>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

Last updated