Como usar uma biblioteca externa não datilografada de datilografada sem .d.ts?

100

Eu os defini em meu arquivo .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>

Então, em test.js: 

 var myTree = Tree.tree({})

Mas o texto digitado erra dizendo: "Não é possível encontrar o nome 'Árvore'"

Eu também tentei compilar --module amde colocar import Tree = require("model/tree");no topo do arquivo test.js, mas deu erro novamente: Cannot find external module 'model/tree'.no entanto, claramente deve ser uma importação válida, veja aqui onde foi definido: https://github.com/marmelab/tree .js / blob / master / src / main.js

Eu não quero escrever arquivos .d.ts para cada arquivo javascript externo Quero uso, é que a sério o que Typescript quer que eu faça?

requirejs typescript Blub
fonte
1
Você não precisa gravar arquivos .d.ts. Consulte stackoverflow.com/questions/27273489/… para obter um exemplo
xmojmr
interessante, isso ainda exigiria que eu declarasse objetos. Tive a impressão de que o Typescript era totalmente compatível com javascript. Eu acho que faz sentido do ponto de vista do Typescript, de alguma forma ele precisa ler o código e se não tivesse referências bem, seriam erros.
Blub

Respostas:

124

Não quero escrever arquivos .d.ts para cada arquivo javascript externo que desejo usar. É isso mesmo que o Typescript quer que eu faça?

Não. A solução mais simples / rápida é simplesmente dizer que existe alguma variável Treepor aí. Isso é tão simples quanto:

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

TypeSafety é uma escala móvel no TypeScript. Nesse caso, você está apenas dizendo ao compilador que existe algo chamado Treeque você gerenciará e não se importará com a segurança de muitos tipos além do fato de que está lá .

Mais

IMHO: A linha declare var Tree:any;é uma sintaxe muito mais simples do que outras ferramentas de veficiation JS teriam que escrever para declarar seu uso de variáveis ​​que não estão presentes em seu código.

Atualizar

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

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

declare var Tree: ITreeFactory; // magic...
Basarat
fonte
Ele estava reclamando para mim quando usei esse método. Tive de usar o método que Anton descreve a seguir. Sua milhagem pode variar! Obrigado pela resposta basarat.
Tiz
você também pode especificar o tipo como uma interface em vez de qualquer outra que forneça uma melhor inteligência.
Akash Kava
24

Você mesmo pode definir 'require' e usar o recurso de dependência amd não documentado do TypeScript:

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

A diretiva 'amd-dependency' dirá ao compilador para incluir seu módulo para "definir" os argumentos no código gerado: veja um exemplo aqui .

Você também pode verificar um artigo muito bom que explica como usar o TypeScript com RequireJS.

Mas observe que sem escrever definições de TypeScript adequadas para seu código existente, você não receberá nenhuma informação de tipo e, portanto, não obterá verificações de segurança de tipo, preenchimento de código avançado em ferramentas e assim por diante. Portanto, sua 'Árvore' será na verdade do tipo 'qualquer' e será uma peça JS dinâmica dentro de outro código TS.

Anton
fonte
Não é uma boa ideia ao usar o webpack, o webpack exigirá que este módulo esteja presente durante a transpilação ...
Akash Kava