Что такое документ-декларация?

заявлениедокумент Сразуда ДаватьjsДополнение к кодудобрыйтип аннотации. Таким образом, файл js не будет запрашиваться с «отсутствующим типом» в среде компиляции ts.

Чтобы объявить переменную, используйте ключевое слово Declare, чтобы указать тип глобальной переменной после ее объявления, например:

// packages/global.d.ts
declare var __DEV__: boolean
declare var __TEST__: boolean

Студенты, прочитавшие исходный код vue3, должны знать, что это переменные в vue. Приведенный выше код указывает, что такие переменные, как __DEV__, являются глобальными, и их типы помечаются таким образом, независимо от того, какой файл ts в проекте используется __DEV__. , переменная ts будет скомпилирована. Все устройства будут знать, что она имеет логический тип.

Где находится файл декларации?

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

дляИзбегайте некоторых странных проблем, Рекомендуется поместить его в корневой каталог существования..

Файлы объявлений, написанные другими (@types/xxx)

когда мы используем npm и другие инструменты управления пакетами, устанавливаем сторонние пакеты из,Некоторые сумки не TypeScript Написано, естественно экспортироваться не будет TypeScript файл декларации. В этом случае, если будет введен такой пакет, будет сообщено об ошибке компиляции (без установки allowJS——allowJS да TypeScript 1.8 Представлен элемент компиляции)。

Например, когда мы устанавливаем пакет jquery и ссылаемся на него через npm install jquery --save, TypeScript сообщит об ошибке.

Вы можете установить соответствующие объявления с помощью npm install @types/jquery или самостоятельно определить файл .d.ts и объявить jquery как модуль. '

Весь мир не да TypeScript Там написано очень много пакетов. существовать TypeScript До крупномасштабного применения у сообщества есть более 90% сверху JavaScript библиотеке или на основе Flow Написана библиотека (на основе React). если не DefinitelyTyped В проектах эти библиотеки хотят обеспечить поддержку типов, несомненно, только путём полного рефакторинга кода. Это не реалистично и не необходимо. Даже если ты из дома TypeScript Написать из,Если вы не экспортировали документ с выпиской,такжеда Бесполезныйиз。（TypeScript По умолчанию файл декларации не будет экспортирован, а будет только скомпилирован и выведен. JavaScript документ）。因此 TypeScript Решение должно быть предоставлено для этой ситуации, а также для двух вариантов, описанных выше:

1. Установите @types
2. Собственный declare модуль) просто да TypeScript Официально предложено из,

яизРекомендуется попробовать использовать @types Заявление под,Реальностьсуществовать Нет,Тогда используйте второй метод. Стоит отметить, что не все пакеты можно решить таким способом. могу решить изда DefinitelyTyped Организация написала определенный пакет, Хорошей новостью является то, что да довольно популярен, и сумки практически доступны. Если вы хотите проверить, что посылка не существует @type можно получить доступ под https://microsoft.github.io/TypeSearch/ хостингсуществоватьgithub на Definitely Типовой (далее ДТ) проект да Github год octoverse Отчет —Постоянный клиент, один из десяти лучших складов с наибольшим количеством участников — — известный как GitHub review Самое большое количество проектов. Подробности см. в разделе «[Перевод]». DefinitelyTyped Автоматизированная трансформация управления: https://juejin.cn/post/6977281038263255054》

TypeScript После серии исследований мы последовательно предложили тсд (устарело), ​​типизации (устарело), ​​наконец существуют TypeScript 2.0 время переставило определение тип, предложенный DefinitelyTyped。

Учитывая мощь DefinitelyTyped, не будет преувеличением сказать, что DefiniteTyped снова делает TypeScript великолепным.

DefinitelyTyped Просто дапозволять тебе "определение типадокумент(*.d.ts)",Опубликовать в npm , а с помощью редактора (или плагина) вы можете обнаружить JS Статические типы в библиотеках.

определение типдокументизс .d.ts В конце концов, он в основном используется для определения типа.

определение типа

Мы можем использовать type для определения переменных типа:

// базовый тип
type UserName = string

// присвоение типа
type WebSite = string
type Tsaid = WebSite

Вы можете видеть, что type фактически может определять типы в различных форматах, а также комбинироваться с другими типами.

// объект
type User = {
  name: string;
  age: number;
  website: WebSite;
}

// метод
type say = (age: number) => string

// добрый
class TaSaid {
  website: string;
  say: (age: number) => string;
}

Конечно, мы также можем использовать interface 定义я们изсложныйдобрыйформа,существовать TS Мы также можем непосредственно определить interface：

interface Application {
    init(): void
    get(key: string): object
}

Интерфейс очень похож на тип (или класс).

• type иззначениеда Определить пользовательскиедобрыйформа,когда TS 提供Даватьтыиз Базадобрыйформа都Нет满足изкогда,Можно использовать type 自由组合出тыизновыйдобрыйформа,
• интерфейс должен быть внешним выходным интерфейсом。

тип не может быть унаследован, но интерфейс может:

interface BaseApplication {
    appId: number
}

export interface Application extends BaseApplication {
  init(): void
    get(key: string): object
}

declare

Наиболее известное использование объявления — это использование его для сторонних js-библиотек для определения. типа,машинописный текст лучше понимает введение в использование js,

Объявление может создавать переменные в файлах *.d.ts, объявление может ограничивать область действия только самого внешнего слоя:

declare var foo: number;
declare function greet(greeting: string): void;
declare namespace tasaid {
  // Не здесь declare
  interface blog {
    website: 'http://tasaid.com'
  } 
}

По сути, определения верхнего уровня должны использовать declare, class такжеда：

declare class User {
  name: string
}

namespace

Чтобы предотвратить дублирование типов, используйте namespace Используется для разделения блоков областей и разделения повторяющихся типов.,верхний уровеньиз namespace нуждаться declare Результат перемещения во внешнюю среду, подпространство имен Нетнуждаться declare。

// пространство имен
declare namespace Models {
  type A = number
  // ребенокпространство имен
  namespace Config {
    type A = object
    type B = string
  }
}

type C = Models.Config.A

Как найти определение в TypeScript

При каких обстоятельствах определение не будет найдено и будет сообщено об ошибке, аналогичной приведенному выше примеру?

Определение пакета типаиз find

Это как node из пакета найти да первое существование текущей папки с документами найти node_modules, существование ищется рекурсивно. Если его невозможно найти, перейдите к верхнему каталогу, и это то же самое, что и верхний каталог проживания. TypeScript добрыйформа查找такжедадобрыйпохожийиз Способ。

В частности, да:

• TypeScript Компилятор сначала ищет текущий контекст компиляции. jquery из Определение.
• Если вы не можете найти место для проживания,перейдет к node_modules серединаиз@types (по умолчанию,Каталог можно изменить,Мы упомянем его позже (приезжать) в каталоге и найдем соответствующее имя пакета и документ объявления модуля.

@types/*Файлы объявлений модулей поддерживаются сообществом путем публикации в @types. под космосом：https://github.com/DefinitelyTyped/DefinitelyTyped

Определение переменной типаиз поиска

ипоиск пакетадобрыйпохожий,По умолчанию переменныеопределение типаиз поиск тоже пойдет @types Спускайтесь и ищите. Просто мы не идем напрямую @types Найдите, и да имеет определенный приоритет, Этот процесс аналогичен цепочке прототипов или цепочке задач.

const user: User = { name: "lucifer" };

1. Typescript Затем он сначала будет искать в этом модуле User из Определение.
2. Если вы не можете найти место для проживания, Его можно найти в глобальной области «приехать», и это глобальное значение по умолчанию — да, что относится к из, что означает да. @types Внизизвсеопределение тип. (Обратите внимание, что да на странице каталога может быть в паре с из)

То есть, да Все определения в @types являются глобальными.。когда然ты可以导入 @types Определите экспорт так, чтобы его область действия находилась внутри вашего модуля.

typeRoots и типы

Я сказал это раньше TypeScript по умолчанию импортирует все объявления @types в node_modules.,нодаРазработчики также могут изменить поведение по умолчанию, изменив конфигурацию tsconfig.json..

В tsconfig.json есть две конфигурации, связанные с введением типов.

1. typeRoots: используется для указания значения по умолчаниюиздобрыйформазаявлениедокумент Найти путь,По умолчанию используется node_modules/@types, После указания typeRoots компилятор TypeScript будет импортировать документ объявления из указанного пути вместо danode_modules/@types., Например, следующая конфигурация будет искать операторы из пути ввода. {  "compilerOptions": {    "typeRoots": ["./typings"]  }}
2. types: TypeScript Компилятор импортирует его по умолчанию.typeRootВнизвсеиззаявлениедокумент,Но иногда мы не хотим вводить все определения глобально**,ида Импортируйте только некоторые модули。这种情景Вниз可以Указание имени модуля по типу представляет только те модули, которые нам нужны.,Например, ниже будет представлен только документ с оператором jquery. { "compilerOptions": { "types": ["jquery"] }}

Подводя итог:

1. typeRoots да tsconfig середина compilerOptions элемент конфигурации,typeRoots Следующий пакет будет ts Компилятор автоматически включает typeRoots По умолчанию указывает на node_modules/@types。
2. types и typeRoots То же самое compilerOptions конфигурация,обозначение types После этого наберитеRoots Будут импортированы только указанные пакеты.
3. @types да npm из scope пространство имен,и@babel Похоже на: @types Все пакеты из будут импортированы по умолчанию, вы можете изменить compilerOptions изменить политику по умолчанию.

Интегрированный выпуск

Существует два основных способа публикации определения типа документаприезжать npm:

1. итыиз npm Пакет, объединенный вместе, существует (встроен в определение типадокумент)
2. Опубликовать в npm на @types organization

В первом случае «Установить» автоматически обнаружит и определит определение после завершения пакета. типадокумент。 Последнее, потом нуждаться проходит npm i @types/xxxx Установить, это то, что мы говорили раньше DefinitelyTyped , используется для расширения JS Объявление типа библиотеки.

встроенныйопределение типадокумент

встроенныйопределение типапросто дай тебе определение типадокументи npm Пакеты выпускаются вместе, вообще говоря, определение типадокумент Пусть они все уйдутсуществоватькорневой каталог пакетаиз types каталог, например vue：

Если у вашего пакета есть мастер .js документ,нуждатьсясуществовать package.json Назначенный владелец здесь определение типадокумент。

настраивать types или typeings Свойства указывают на объединение существующих воедино определение типадокумент。 Например, каталог пакета выглядит следующим образом:

├── lib
│   ├── main.js
│   └── main.d.ts # определение типадокумент
└── package.json

pageage.json

{
    "name": "demo",
    "author": "demo project",
    "version": "1.0.0",
    "main": "./lib/main.js",
    // Определение основного определения типадокумент
    "types": "./lib/main.d.ts"
}

Если основное определение в названии документа типа index.d.ts Местоположение находится в корневом каталоге существующего пакета, поэтому оно не используется. types Атрибут указан.

├── lib
│   └── main.js
├── index.d.ts # определение типадокумент
└── package.json

Если вы отправляете пакет, package.json используется в files Слова поля (npm будет основано на files Настройте правила, чтобы решить, какой документ публиковать, а затем вручную установите определение. тип документа Присоединиться:

{
  "files": [
    "index.js",
    "*.d.ts"
  ]
}

Если вы отправляете только каталог второго уровня, поместите определение типа документа в соответствующий каталог второго уровня:

import { default as App } from 'demo/app'

Сообщение в организацию @types

Сообщение в организацию @types из пакета указывает, что исходный пакет не содержит определения тип документа, третья сторона/или первоначальный автор хорошо определяет определение типадокументпосле,Опубликовать в @types середина. Например @types/express。

Статические типы автоматически определяются редакторами (и плагинами) в соответствии с правилами DefinitelyTyped.

@types Ниже из Сумкаdafrom DefinitelyTyped Автоматически публикуется в, через types-publisher инструмент.

Если вы хотите, чтобы ваш пакет был опубликован как @types пакет, нуждаться отправить один pull request приезжать https://github.com/DefinitelyTyped/DefinitelyTyped

существование Подробнее здесь http://definitelytyped.org/guides/contributing.html

Если вы используете TypeScript, используя некоторые JS Упаковка не соответствует изопределению типа документа, вы можете написать его и отправить приехать @types。

Опубликовать в @types organizatio Пакет может пройти https://microsoft.github.io/TypeSearch/ Поиск и получение с помощью npm install --save-dev @types/xxxx Установить:

Особенно рекомендуется прочитать «Официальный вклад в Microsoft». @types Мысли, вызванные пакетом: https://juejin.cn/post/6923379384002805774》

Что такое пространство имен?

Когда использовать пространства имен?

Если вы обнаружите, что пишете все больше и больше функций (функций/классов/интерфейсов и т. д.) и хотите их группировать и управлять ими, вы можете использовать пространства имен. Давайте возьмем в качестве примера «класс».

namespace Tools {
    const TIMEOUT = 100;

    export class Ftp {
        constructor() {
            setTimeout(() => {
                console.log('Ftp');
            }, TIMEOUT)
        }
    }

    export class Http {
        constructor() {
            console.log('Http');
        }
    }

    export function parseURL(){
        console.log('parseURL');
    }
}

Если вы посмотрите внимательно, вы обнаружите, что в пространстве имен также есть экспорт. exportсуществовать Какие функции здесь используются для представленияда Доступен извнеиз:

Tools.TIMEOUT // Сообщить об ошибке, В Инструментах такого атрибута нет.
Tools.parseURL() // 'parseURL'

существоватьjsсерединапространство имен其Реальность Сразудаглобальныйобъект. Если разрабатываемая вами программа хочет предоставить глобальную переменную, вы можете использовать пространство имен;

Справочная статья:

types и @types да Что? https://juejin.cn/post/6863654755248373774

JavaScript и TypeScript пересечение —— определение типадокумент(*.d.ts) https://juejin.cn/post/6844903508991295501

Серия TypeScript

ПерепечаткаЭтот сайтстатья《Подробное объяснение определения типа TS: типы/typeRoots/@types и пространство имен.》, Пожалуйста, укажите источник：https://www.zhoulujun.cn/html/webfront/ECMAScript/typescript/2021_1129_8715.html