5.1 Создание первого TypeScript файла
Теперь, когда TypeScript установлен, мы можем приступить к созданию первого файла на TypeScript.
Шаг 1: Создание проекта
1. Создайте новую директорию для вашего проекта и перейдите в нее:
mkdir my-first-typescript-project
cd my-first-typescript-project
2. Инициализируйте новый проект npm, чтобы создать файл package.json:
npm init -y
Шаг 2: Создание TypeScript файла
- Создайте новый файл с расширением .ts, который будет содержать ваш TypeScript код. Назовем его hello.ts.
- В этом файле напишем простой код, который выводит сообщение в консоли:
// hello.ts
function greet(name: string): string {
return `Hello, ${name}!`;
}
const user = 'World';
console.log(greet(user));
В этом примере мы объявляем функцию greet(), которая принимает параметр name типа string и возвращает строку с приветствием. Затем мы создаем переменную user и вызываем функцию greet, передавая в нее значение переменной user.
Шаг 3: Компиляция TypeScript файла
Для компиляции TypeScript файла в JavaScript используйте команду tsc, за которой следует имя файла. В нашем случае это hello.ts.
tsc hello.ts
После выполнения этой команды в той же директории появится файл hello.js, содержащий скомпилированный JavaScript код.
Шаг 4: Запуск скомпилированного файла
Теперь мы можем запустить скомпилированный файл hello.js с помощью Node.js:
node hello.js
Вы увидите вывод в консоли:
Hello, World!
- Node.js (она же просто node) — это программа умеющая выполнять JavaScript-код
- hello.ts – это файл с TypeScript-кодом, который мы написали
- hello.js – это файл с JavaScript кодом, который сгенерировал tsc на основе hello.ts
Понимание скомпилированного JavaScript кода
Посмотрим на скомпилированный JavaScript код, который был сгенерирован TypeScript компилятором:
// hello.js
function greet(name) {
return "Hello, " + name + "!";
}
var user = 'World';
console.log(greet(user));
Как видно, TypeScript компилятор преобразовал наш TypeScript код в эквивалентный JavaScript код. Он удалил аннотации типов, поскольку они не поддерживаются в JavaScript, но сохранил основную логику программы.
5.2 Работа с более сложными примерами
Давайте рассмотрим немного более сложный пример, чтобы увидеть, как TypeScript справляется с другими возможностями, такими как интерфейсы и классы.
Шаг 1: Создание нового TypeScript файла
Создайте новый файл person.ts и добавьте в него следующий код:
// person.ts
interface Person {
firstName: string;
lastName: string;
age: number;
}
class Student implements Person {
constructor(
public firstName: string,
public lastName: string,
public age: number
) {}
getFullName(): string {
return `${this.firstName} ${this.lastName}`;
}
}
const student = new Student('John', 'Doe', 25);
console.log(`Student: ${student.getFullName()}, Age: ${student.age}`);
В этом примере мы создаем интерфейс Person, который описывает структуру объекта человека. Затем мы создаем класс Student, который реализует (implements) этот интерфейс. У класса Student есть конструктор, который принимает три параметра, и метод getFullName, который возвращает полное имя студента.
Шаг 2: Компиляция и запуск
Скомпилируйте файл person.ts в JavaScript:
tsc person.ts
Затем запустите скомпилированный файл person.js с помощью Node.js:
node person.js
Вы увидите вывод в консоли:
Student: John Doe, Age: 25
Инкрементальная компиляция
Для удобства разработки можно включить инкрементальную компиляцию, которая автоматически перекомпилирует файлы при их изменении. Для этого используйте флаг --watch при компиляции:
.0
tsc --watch
Теперь компилятор будет следить за изменениями в скомпилированных файлах и автоматически их перекомпилировать.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ