Як використовувати зовнішню бібліотеку без машинопису з машинопису без .d.ts?


100

Я визначив їх у своєму .html-файлі:

<script type="text/javascript" src="bower_components/tree.js/tree.min.js"></script>
<script type="text/javascript" src="bower_components/q/q.js"></script>
<script type="text/javascript" src="test.js"></script>

Потім у test.js:

 var myTree = Tree.tree({})

Але помилка Typescript вимальовує: "Не вдається знайти назву" Дерево ""

Я також спробував скомпілювати --module amdта розмістити import Tree = require("model/tree");у верхній частині файлу test.js, але він знову помиляється: Cannot find external module 'model/tree'.однак, очевидно, це повинен бути дійсний імпорт, див. Тут, де це було визначено: https://github.com/marmelab/tree .js / blob / master / src / main.js

Я не хочу писати файли .d.ts для кожного зовнішнього файлу javascript, який я хочу використовувати, це серйозно те, що від мене хоче зробити Typescript?


1
Вам не потрібно писати файли .d.ts. Див stackoverflow.com/questions/27273489 / ... для прикладу
xmojmr

цікаво, що все одно вимагатиму від мене декларування об’єктів. У мене склалося враження, що Typescript повністю сумісний з javascript. Думаю, це має сенс з точки зору Typescript, йому якось потрібно прочитати код, і якби у нього не було добре посилань, це були б помилки.
Blub

Відповіді:


124

Я не хочу писати файли .d.ts для кожного окремого зовнішнього файлу javascript, який я хочу використовувати, це серйозно те, що від мене хоче зробити Typescript?

Ні. Найпростішим / найшвидшим рішенням є просто сказати йому, що там є якась змінна Tree. Це так просто, як:

declare var Tree:any; // Magic
var myTree = Tree.tree({})

TypeSafety - це ковзна шкала в TypeScript. У цьому випадку ви лише повідомляєте компілятору, що є щось, що називається, Treeяким ви керуватимете і не дбаєте про велику безпеку типів, крім того, що воно є .

Більше

IMHO: Рядок declare var Tree:any;набагато простіший синтаксис, ніж інші інструменти розпізнавання JS.

Оновлення

interface ITree {
    .. further methods and properties...
}

interface ITreeFactory {
    tree(input: { [key: string]: any }): Itree
};

declare var Tree: ITreeFactory; // magic...

Коли я використовував цей метод, мені було скаржитися. Мені довелося скористатися методом, викладеним Антоном нижче. Міляж може відрізнятися! Дякую за відповідь басарат.
Тіз

Ви також можете вказати тип як інтерфейс замість будь-якого, який забезпечить кращий інтеліссенс.
Akash Kava

24

Ви можете самостійно визначити "вимагати" та скористатися незадокументованою функцією залежності від AMD TypeScript:

/// <amd-dependency path="model/tree" />
declare var require:(moduleId:string) => any;
var Tree = require("model/tree");

Директива 'amd-dependency' повідомляє компілятору включити ваш модуль для "визначення" аргументів у згенерованому коді: див. зразок тут .

Ви також можете переглянути дуже хорошу статтю, в якій пояснюється, як використовувати TypeScript із RequireJS.

Але зауважте, що без написання належних визначень TypeScript для вашого існуючого коду ви не отримаєте жодної інформації про тип, а отже, ви не отримаєте перевірок безпеки типу, розширеного заповнення коду в інструментах тощо. Отже, ваше «Дерево» насправді матиме тип «будь-який», і насправді буде динамічним фрагментом JS всередині іншого коду TS.


Не найкраща ідея при використанні webpack, веб-пакет вимагатиме, щоб цей модуль був присутнім під час транпіляції ...
Akash Kava
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.