arquivo de declaração TypeScript
Como um superconjunto de JavaScript, o TypeScript inevitavelmente precisa se referir a outras bibliotecas JavaScript de terceiros durante o processo de desenvolvimento. Embora as classes e métodos da biblioteca possam ser chamados por meio de referências diretas, os recursos do TypeScript, como verificação de tipo, não podem ser usados. Para resolver esse problema, é necessário remover as funções e os corpos dos métodos nessas bibliotecas e manter apenas a declaração do tipo de exportação e gerar um arquivo de declaração descrevendo a biblioteca JavaScript e as informações do módulo. Ao fazer referência a esse arquivo de declaração, vários recursos do TypeScript podem ser emprestados para usar o arquivo de biblioteca.
Se quisermos usar uma biblioteca de terceiros, como jQuery, geralmente obtemos um elemento cujo id é foo assim:
$('#foo');
// 或
jQuery('#foo');
Mas no TypeScript, não sabemos o que é $ ou jQuery:
jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.
Neste momento, precisamos usar a palavra-chave declare para definir seu tipo para ajudar o TypeScript a julgar se o tipo do parâmetro que passamos está correto:
declare var jQuery: (selector: string) => any;
jQuery('#foo');
O tipo definido por declare será usado apenas para verificação em tempo de compilação e será excluído no resultado da compilação.
O resultado da compilação do exemplo acima é:
jQuery('#foo');
arquivo de declaração
Os arquivos de declaração são sufixados com .d.ts, por exemplo:
kxdang.d.ts
A sintaxe para um arquivo de declaração ou módulo é a seguinte:
declare module Module_Name {
}
O TypeScript apresenta o formato de sintaxe do arquivo de declaração:
/// <reference path = " kxdang.d.ts" />
Claro, não precisamos definir os arquivos de declaração de muitas bibliotecas populares de terceiros. Por exemplo, jQuery já foi definido para nós: jQuery indefinidamenteTyped .
exemplo
O seguinte define uma biblioteca de terceiros para demonstrar:
Código do arquivo CalcThirdPartyJsLib.js:
var Runoob;
(function(Runoob) {
var Calc = (function () {
function Calc() {
}
})
Calc.prototype.doSum = function (limit) {
var sum = 0;
for (var i = 0; i <= limit; i++) {
sum = sum + i;
}
return sum;
}
Runoob.Calc = Calc;
return Calc;
})(Runoob || (Runoob = {}));
var test = new Runoob.Calc();
Se quisermos nos referir ao código acima no TypeScript, precisamos definir o arquivo de declaração Calc.d.ts, o código é o seguinte:
Código do arquivo Calc.d.ts:
declare module Runoob {
export class Calc {
doSum(limit:number) : number;
}
}
Um arquivo de declaração não contém uma implementação, é apenas uma declaração de tipo. Adicione o arquivo de declaração ao TypeScript:
Código do arquivo CalcTest.ts:
/// <reference path = "Calc.d.ts" />
var obj = new Runoob.Calc();
// obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));
A linha a seguir causa um erro de compilação porque precisamos passar um argumento numérico:
obj.doSum("Hello");
Use o comando tsc para compilar o arquivo de código acima:
tsc CalcTest.ts
O código JavaScript gerado é o seguinte:
Código do arquivo CalcTest.js:
/// <reference path = "Calc.d.ts" />
var obj = new Runoob.Calc();
//obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));
Finalmente, escrevemos um arquivo kxdang.html e importamos o arquivo CalcTest.js e a biblioteca de terceiros CalcThirdPartyJsLib.js:
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(kxdang.com)</title>
<script src = "CalcThirdPartyJsLib.js"></script>
<script src = "CalcTest.js"></script>
</head>
<body>
<h1>声明文件测试</h1>
<p>菜鸟测试一下。</p>
</body>
</html>
Quando o navegador abre o arquivo, a saída é a seguinte: