В чем разница между типом и классом в Typescript?

В чем разница между type и class?

type Point {
  x: number, y: number
}

let p = new Point();

Вышеупомянутые результаты:

'Point' only refers to a type, but is being used as a value here.

Почему это так? Я, конечно, не использую Point как значение, но использую его для создания экземпляра типа.

В каких ситуациях мне нужно использовать type, потому что class не подходит?

Класс TypeScript / JavaScript - это функция. Тип TypeScript - это просто определение, которое помогает компилятору TS проверять код. Он ни на что не транслируется в сгенерированном JS-коде.

axiac 02.07.2018 10:35

@OldGeezer: прочтите комментарий еще раз. Это просто подсказка компилятору. Преобразуется в совершенно ничего в javascript. Вы не можете ничего создать.

Sergio Tulentsev 02.07.2018 10:45
let p: Point = { x: 10, y: 15 }; в ответах Сефе и Тициана был тем, о чем я спрашивал.
Old Geezer 02.07.2018 10:58
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
29
3
11 683
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

class myClass extends myParentClass implements myInterface{

}

let value = new myClass();

// value is from type any and from type myClass and from type myParentClass and from type myInterface. Its class is myClass

Вы можете использовать new только с именами классов. Но Point - это не имя класса, а значение.

class Point{
    private x;
    private y;
    constructor(x,y) {
        this.x = v1;
        this.y = v2;
    }
}

Теперь Point - это класс, и вы можете:

let p = new Point(1,2);
But Point is not a classname, but a value, нет в том-то и дело. Он определяется только в пространстве типов; единственный наиболее важный момент здесь заключается в том, что тип не является значением.
Duncan 02.07.2018 11:15

Вы используете type (или в других случаях interface) для аннотаций типов, чтобы указать структуру объектов JavaScript:

type Point = {
  x: number, y: number
}

function doSomething(p: Point) {
}

let p: Point = { x: 10, y: 15 };
doSomething(p);

Эти аннотации типов подлежат структурной типизации, что означает, что в этом конкретном случае вы можете отбросить аннотацию типа:

let p = { x: number, y: number };
doSomething(p);

Класс - это нечто совершенно иное, что обеспечивает более элегантную альтернативу наследованию прототипа JS:

class Point {
    public x: number;
    public y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    public move(deltaX: number, deltaY: number) {
        this.x = this.x + deltaX;
        this.y = this.y + deltaY;
    }
}

let p = new Point(10, 15);
p.move(1, 2);

Когда вы посмотрите на сгенерированный JS-код, вы быстро заметите разницу:

Объявление type опускается в сгенерированный код.

Определение класса превращено в JS-функцию с наследованием прототипа.

Ответ принят как подходящий

В Typescript есть две разные юниверсы, которые соприкасаются в некоторых точках: пространство значений и пространство типов. Пространство типов - это место, где типы определяются, а типы полностью стираются и не существуют во время выполнения. Пространство значений содержит значения и, очевидно, будет существовать во время выполнения.

Что такое ценность? Литералы значений, переменные, константы и параметры, очевидно, являются значениями. Функции и объявления классов также являются значениями, поскольку у них есть резервный объект среды выполнения, а именно объект функции и конструктор класса (также функция). Перечисления также являются значениями, поскольку они поддерживаются объектом во время выполнения.

Что такое тип? Любое определение с ключевым словом type является типом, а также интерфейсами, объявления классов и перечисляет

Вы заметите, что я упомянул объявления классов в обоих местах. Классы существуют как в пространстве типов, так и в пространстве значений. Вот почему мы можем использовать их как в аннотациях типов (let foo: ClassName), так и в выражениях (например, new ClassName()).

Перечисления также охватывают оба мира, они также представляют тип, который мы можем использовать в аннотации, а также объект среды выполнения, который будет содержать перечисление.

Имена в пространстве типов и пространстве значений не конфликтуют, поэтому мы можем определить как тип, так и переменную с одним и тем же именем:

type Foo = { type: true }
var Foo = { value : true } // No error, no relation to Foo just have the same name in value space 

Объявления классов и перечисления, поскольку они охватывают оба пространства, будут `` использовать '' имя в обоих пространствах, и поэтому мы не можем определить переменную или тип с тем же именем, что и объявление класса или перечисление (хотя мы можем выполнить слияние, но это это другое понятие)

В вашем конкретном случае Point - это просто тип, то, что мы можем использовать в аннотациях типов, а не то, что мы можем использовать в выражениях, которые должны присутствовать во время выполнения. В этом случае тип полезен, поскольку он позволяет компилятору структурно проверить, что литерал объекта может быть назначен типу Point:

let p: Point = { x: 10, y: 15 }; // OK
let p: Point = { x: 10, y: 15, z: 10 }; // Error

Если вы хотите создать класс, вам нужно будет сделать это с помощью ключевого слова class, так как это создаст значение времени выполнения, которое не является просто типом:

class Point{
    constructor(public x: number, public y: number){}
}
let p = new Point(10,10)

любая документация о пространстве типов и пространстве значений?

gaurav5430 19.02.2021 10:13

Для лучшего понимания создаю таблицу всех отличий:

| Description                                             | Type | Interface |
|---------------------------------------------------------|------|-----------|
| Describe functions                                      |   ✔  |     ✔     |
| Describe constructors                                   |   ✔  |     ✔     |
| Describe tuples                                         |   ✔  |     ✔     |
| Interfaces can extend                                   |   ≈  |     ✔     |
| Classes can extend                                      |   ✘  |     ✔     |
| Classes can implement                                   |   ≈  |     ✔     |
| Divide another one of its own kind                      |   ✔  |     ≈     |
| Create a union with another one of its own kind         |   ✔  |     ✘     |
| Be used to create mapped types                          |   ✔  |     ✘     |
| Be mapped over with mapped types                        |   ✔  |     ✔     |
| Expands in error messages and logs                      |   ✔  |     ✘     |
| Be completed                                            |   ✘  |     ✔     |
| Be recursive                                            |   ≈  |     ✔     |
Hint: `≈` means partially

Возможно, для новых версий TypeScript в этой таблице есть некоторые изменения, если есть, пожалуйста, исправьте таблицу, отредактировав текущий пост.

Другие вопросы по теме