我使用了很多自己的和第三方的库。我看到“typings”目录包含一些Jquery和WinRT…但它们是如何产生的呢?
当前回答
这个答案展示了如何在一个独立的函数中使用typescript编译器API:
import ts from 'typescript';
function createDTsTextsFromJsFilePaths(
jsFileNames: string[]
): Record<string, string> {
const options = {
allowJs: true,
declaration: true,
emitDeclarationOnly: true,
};
// Create a Program with an in-memory emit
const createdFiles: Record<string, string> = {};
const host = ts.createCompilerHost(options);
host.writeFile = (fileName: string, contents: string): void => {
const dtsName = fileName.replace('.js', '.d.ts');
createdFiles[dtsName] = contents;
};
// Prepare and emit the d.ts files
const program = ts.createProgram(jsFileNames, options, host);
program.emit();
return createdFiles;
}
////////////// test code below here ///////////////////////////////////
import fs from 'fs'
const jsTest =
`
"use strict"
function x(){
return {
a: 1,
b: ()=>'hello'
}
}
`;
const jsPath = '/tmp/jstest.js';
fs.writeFileSync(jsPath, jsTest);
const createdFiles = createDTsTextsFromJsFilePaths([jsPath]);
for (const dtsName in createdFiles) {
console.log('================');
console.log(dtsName);
console.log('----------------');
console.log(createdFiles[dtsName]);
}
测试的执行会给出结果
================
/tmp/jstest.d.ts
----------------
declare function x(): {
a: number;
b: () => string;
};
该函数来源于类型脚本编译器API指南中的文档
其他回答
正如Ryan所说,tsc编译器有一个switch——声明,它生成一个.d。Ts文件中的。Ts文件。还要注意(排除bug) TypeScript应该能够编译Javascript,所以你可以将现有的Javascript代码传递给tsc编译器。
这个答案展示了如何在一个独立的函数中使用typescript编译器API:
import ts from 'typescript';
function createDTsTextsFromJsFilePaths(
jsFileNames: string[]
): Record<string, string> {
const options = {
allowJs: true,
declaration: true,
emitDeclarationOnly: true,
};
// Create a Program with an in-memory emit
const createdFiles: Record<string, string> = {};
const host = ts.createCompilerHost(options);
host.writeFile = (fileName: string, contents: string): void => {
const dtsName = fileName.replace('.js', '.d.ts');
createdFiles[dtsName] = contents;
};
// Prepare and emit the d.ts files
const program = ts.createProgram(jsFileNames, options, host);
program.emit();
return createdFiles;
}
////////////// test code below here ///////////////////////////////////
import fs from 'fs'
const jsTest =
`
"use strict"
function x(){
return {
a: 1,
b: ()=>'hello'
}
}
`;
const jsPath = '/tmp/jstest.js';
fs.writeFileSync(jsPath, jsTest);
const createdFiles = createDTsTextsFromJsFilePaths([jsPath]);
for (const dtsName in createdFiles) {
console.log('================');
console.log(dtsName);
console.log('----------------');
console.log(createdFiles[dtsName]);
}
测试的执行会给出结果
================
/tmp/jstest.d.ts
----------------
declare function x(): {
a: number;
b: () => string;
};
该函数来源于类型脚本编译器API指南中的文档
正如http://channel9.msdn.com/posts/Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-TypeScript 00:33:52所描述的,他们已经建立了一个工具,将WebIDL和WinRT元数据转换为TypeScript d.ts
下面是一些PowerShell,它创建了一个单独的TypeScript定义文件,一个包含多个*.js文件的现代JavaScript库。
首先,将所有扩展名更改为.ts。
Get-ChildItem | foreach { Rename-Item $_ $_.Name.Replace(".js", ".ts") }
其次,使用TypeScript编译器生成定义文件。会有一堆编译器错误,但我们可以忽略它们。
Get-ChildItem | foreach { tsc $_.Name }
最后,将所有的*.d。Ts文件到一个索引。Ts,删除导入语句并从每个导出语句中删除默认值。
Remove-Item index.d.ts;
Get-ChildItem -Path *.d.ts -Exclude "Index.d.ts" | `
foreach { Get-Content $_ } | `
where { !$_.ToString().StartsWith("import") } | `
foreach { $_.Replace("export default", "export") } | `
foreach { Add-Content index.d.ts $_ }
最后生成一个单独的、可用的index.d.ts文件,其中包含许多定义。
我会寻找支持script#或SharpKit的第三方JS库的现有映射。使用这些c#到。js交叉编译器的用户可能会遇到你现在面临的问题,并且可能已经发布了一个开源程序来扫描你的第三方库并将其转换为框架c#类。如果是这样的话,破解扫描器程序,生成TypeScript代替c#。
如果做不到这一点,将第三方库的c#公共接口转换为TypeScript定义可能比读取源JavaScript更简单。
我特别感兴趣的是Sencha的ExtJS RIA框架,我知道已经发布了为script#或SharpKit生成c#解释的项目
推荐文章
- 从元组/数组值派生联合类型
- 如何在Angular2 ngSwitch语句中使用typescript enum值
- 找到合成属性@panelState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。
- Angular 2+和debounce
- 在TypeScript箭头函数中指定返回类型
- 如何使用jQuery与TypeScript
- Angular 2模板中的标签是什么意思?
- Typescript接口-可能使“一个或另一个”属性要求?
- 如何扩展/继承组件?
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- Typescript ReferenceError: exports没有定义
- React组件中使用TypeScript的默认属性值
- Angular 5 -复制到剪贴板
- TypeScript枚举对象数组
- Angular 2显示和隐藏一个元素