Why TypeScript

Чому TypeScript?

Існує два головних бонуса TypeScript:

Надає систему типів optional type system для JavaScript.
Надає функціональность, яка буде втілена JavaScript в наступних версіях на основі сучасного JavaScript

Ці бонуси повинні мотивувати вас на навчання.

The TypeScript type system

Система типів в TypeScript

Ви можете бути здивовані "Навіщо додавати типи в JavaScript?"

Використання типізації може суттєво покращити якість вашего коду та зробити його набагато стабільним. Великі команди (Google, Microsoft, Facebook) постійно приходили до цього висновку. Зокрема:

Типи підвищують вашу спритність під час виконання рефакторингу. Для компілятора краще виловлювати помилки, ніж мати збій під час виконання.
Типізація це одна з найкращих форм створення документації які існують. Сигнатура функції — це теорема, а тіло функції — доказ.

Однак типи мають манеру бути надмірно церемоніальними. TypeScript робить бар’єр входу якомога нижче. Ось як:

Your JavaScript is TypeScript

Ваш JavaScript це TypeScript.

TypeScript забезпечує безпеку типу під час компіляції для вашого коду JavaScript. Це не дивно, враховуючи його назву. Чудово те, що типи абсолютно необов’язкові. Ваш JavaScript код в файлі .js може бути перетворений на файл .ts и TypeScript зможе повернути вам все ще коректний .js еквівалент початкового JavaScript файла. TypeScript це новий поверх над JavaScript з опціональною перевіркою типів.

Types can be Implicit

Типи можуть бути неявними.

TypeScript намагатиметься вивести якомога більше інформації про тип, щоб забезпечити вам безпеку типу з мінімальними витратами продуктивності під час розробки коду. Наприклад, цей приклад TypeScript знає, що "foo" має тип number та поверне помилку:

var foo = 123;
foo = '456'; // Error: cannot assign `string` to `number`

// Is foo a number or a string

Така поведінка є досить корисною. Якщо ви робите щось, як показано в цьому прикладі, тоді в решті вашого коду, ви не можете бути впевнені fooє number чи string. Ця проблема більш типова для проекту з великою кількістю файлів. Більш детально ми зануримося в цю тему далі.

Types can be Explicit

Типи можуть бути неявними.

Як ми відмітили раніше, TypeScript намагається зробити код найбільш безпечним. Однак ви можете використовувати анотації, щоб:

Допомогти компілятору та, що важливіше, задокументуйте матеріал для наступного розробника, який має прочитати ваш код (це, можливо, будете і ви в майбутньому!).
Забезпечити те, що компілятор бачить, те, що ви думали, що він повинен бачити. Тобто ваше розуміння коду відповідає алгоритмічному аналізу коду (здійсненому компілятором).

TypeScript використовує анотації типів постфіксів, популярні в інших опціонально анотованих мовах (наприклад, ActionScript і F#).

var foo: number = 123;

Якщо ви робите щось не вірно, компілятор видать помилку:

var foo: number = '123'; // Error: не можу ініціалізовани числову змінну строкою

Ми обговоримо всі деталі синтаксісу анатацій, які підтримує TypeScript в наступних главах.

Types are structural

Типи є структурними.

У деяких мовах (зокрема, номінально типізованих) статичне введення призводить до непотрібної церемонії, оскільки навіть якщо ви знаєте, що код працюватиме добре, семантика мови змушує вас копіювати щось навколо. Ось чому такі речі, як automapper для C# є життєво важливими для C#. У TypeScript ми дійсно хочемо, щоб розробникам JavaScript було легко з мінімальним когнітивним перевантаженням, типи є структурними. Це означає, що duck typing (різновид динамічної типізації, застосовуваної в деяких мовах програмування, коли межі використання об'єкта визначаються його поточним набором методів і властивостей, на противагу успадкуванню від певного класу) є першокласною мовною конструкцією. Розглянемо наступний приклад. Функція iTakePoint2D прийме все, що містить усе те, що вона очікує (x і y):

interface Point2D {
    x: number;
    y: number;
}
interface Point3D {
    x: number;
    y: number;
    z: number;
}
var point2D: Point2D = { x: 0, y: 10 }
var point3D: Point3D = { x: 0, y: 10, z: 20 }
function iTakePoint2D(point: Point2D) { /* do something */ }

iTakePoint2D(point2D); // exact match okay
iTakePoint2D(point3D); // extra information okay
iTakePoint2D({ x: 0 }); // Error: missing information `y`

Type errors do not prevent JavaScript emit

Помилки типу не перешкоджають роботі JavaScript.

Щоб вам було легше перенести ваш код JavaScript на TypeScript, навіть якщо є помилки компіляції, за замовчуванням TypeScript видасть дійсний JavaScript в найкращому можливому варіанті.

var foo = 123;
foo = '456'; // Error: не можу ініціалізовати числовую переменную строкою

буде конвертовано в працюючий js:

var foo = 123;
foo = '456';

Тож ви можете поступово оновлювати свій код JavaScript до TypeScript. Це дуже відрізняється від роботи багатьох компіляторів інших мов і є ще однією причиною переходу на TypeScript.

Types can be ambient

Основною метою розробки TypeScript було зробити можливим безпечне та просте використання існуючих бібліотек JavaScript у TypeScript. TypeScript робить це за допомогою declaration. TypeScript надає вам гнучку шкалу того, скільки зусиль ви хочете докласти до ваших декларацій, що більше зусиль ви докладете, то більше безпеки типів + коду ви отримаєте. Зауважте, що спільнота DefinitelyTyped уже написала визначення для більшості популярних бібліотек JavaScript, які покривають більшості цілей:

Файл визначення вже існує.
Або, принаймні, у вас є широкий список добре перевірених шаблонів декларацій TypeScript, які вже доступні

Як короткий приклад того, як ви створили б власний файл декларації, розглянемо тривіальний приклад jquery. За замовчуванням (як і слід очікувати від хорошого коду JS) TypeScript очікує, що ви оголосите (тобто використаєте десь var) перед використанням змінної

$('.awesome').show(); // Error: cannot find name `$`

Як швидкий фікс ви можете сказати TypeScript що це є дещо з назвою $:

declare var $: any;
$('.awesome').show(); // Okay!

Якщо ви хочете, ви можете спиратися на це базове визначення та надати більше інформації, яка допоможе захистити вас від помилок:

declare var $: {
    (selector:string): any;
};
$('.awesome').show(); // Okay!
$(123).show(); // Error: повинно бути типу string

Ми детально обговоримо деталі створення визначень TypeScript для існуючого JavaScript пізніше, коли ви дізнаєтесь більше про TypeScript (наприклад, такі речі, як interface і any).

Future JavaScript => Now

Майбутній JavaScript => Зараз.

TypeScript надає низку функцій, запланованих у ES6 для поточних механізмів JavaScript (які підтримують лише ES5 тощо). Команда TypeScript активно додає ці функції, і цей список з часом лише розширюватиметься, і ми розглянемо це у окремому розділі. Але як зразок ось приклад класу:

class Point {
    constructor(public x: number, public y: number) {
    }
    add(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
    }
}

var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // { x: 10, y: 30 }

та він підтримує виконистання функції-стрілки:

var inc = x => x+1;

Summary

У цьому розділі ми надали вам мотивацію та цілі розробки TypeScript. Подолавши це, ми можемо копатися в дрібницях TypeScript. [](Interfaces are open ended) [](Type Inference rules) [](Cover all the annotations) [](Cover all ambients : also that there are no runtime enforcement) [](.ts vs. .d.ts)

PreviousДавайте Почнемо NextJavaScript

Last updated 1 year ago

Why TypeScript

Чому TypeScript?

Існує два головних бонуса TypeScript:

Надає систему типів optional type system для JavaScript.
Надає функціональность, яка буде втілена JavaScript в наступних версіях на основі сучасного JavaScript

Ці бонуси повинні мотивувати вас на навчання.

The TypeScript type system

Система типів в TypeScript

Ви можете бути здивовані "Навіщо додавати типи в JavaScript?"

Типи підвищують вашу спритність під час виконання рефакторингу. Для компілятора краще виловлювати помилки, ніж мати збій під час виконання.
Типізація це одна з найкращих форм створення документації які існують. Сигнатура функції — це теорема, а тіло функції — доказ.

Однак типи мають манеру бути надмірно церемоніальними. TypeScript робить бар’єр входу якомога нижче. Ось як:

Your JavaScript is TypeScript

Ваш JavaScript це TypeScript.

Types can be Implicit

Типи можуть бути неявними.

var foo = 123;
foo = '456'; // Error: cannot assign `string` to `number`

// Is foo a number or a string

Types can be Explicit

Типи можуть бути неявними.

Допомогти компілятору та, що важливіше, задокументуйте матеріал для наступного розробника, який має прочитати ваш код (це, можливо, будете і ви в майбутньому!).
Забезпечити те, що компілятор бачить, те, що ви думали, що він повинен бачити. Тобто ваше розуміння коду відповідає алгоритмічному аналізу коду (здійсненому компілятором).

var foo: number = 123;

Якщо ви робите щось не вірно, компілятор видать помилку:

var foo: number = '123'; // Error: не можу ініціалізовани числову змінну строкою

Ми обговоримо всі деталі синтаксісу анатацій, які підтримує TypeScript в наступних главах.

Types are structural

Типи є структурними.

interface Point2D {
    x: number;
    y: number;
}
interface Point3D {
    x: number;
    y: number;
    z: number;
}
var point2D: Point2D = { x: 0, y: 10 }
var point3D: Point3D = { x: 0, y: 10, z: 20 }
function iTakePoint2D(point: Point2D) { /* do something */ }

iTakePoint2D(point2D); // exact match okay
iTakePoint2D(point3D); // extra information okay
iTakePoint2D({ x: 0 }); // Error: missing information `y`

Type errors do not prevent JavaScript emit

Помилки типу не перешкоджають роботі JavaScript.

var foo = 123;
foo = '456'; // Error: не можу ініціалізовати числовую переменную строкою

буде конвертовано в працюючий js:

var foo = 123;
foo = '456';

Types can be ambient

Файл визначення вже існує.
Або, принаймні, у вас є широкий список добре перевірених шаблонів декларацій TypeScript, які вже доступні

$('.awesome').show(); // Error: cannot find name `$`

Як швидкий фікс ви можете сказати TypeScript що це є дещо з назвою $:

declare var $: any;
$('.awesome').show(); // Okay!

declare var $: {
    (selector:string): any;
};
$('.awesome').show(); // Okay!
$(123).show(); // Error: повинно бути типу string

Future JavaScript => Now

Майбутній JavaScript => Зараз.

class Point {
    constructor(public x: number, public y: number) {
    }
    add(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
    }
}

var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // { x: 10, y: 30 }

та він підтримує виконистання функції-стрілки:

var inc = x => x+1;

Summary

PreviousДавайте Почнемо NextJavaScript

Last updated 1 year ago