如何不使用tsc编译来执行TypeScript代码

简介: 如何不使用tsc编译来执行TypeScript代码

通常在编写完TypeScript代码以后总是需要通过其内置的CLI来编译为JavaScript文件,再通过node来执行,当然也有简化操作的库,如:ts-node。下面就来探索一下如何实现类似ts-node可以直接执行TypeScript的功能吧。


前提概要:


1. 涉及知识点:

  1. NodeJs:require函数
  2. TypeScript:Compiler API


2. 任务拆解:

  1. 如何让Node认识Ts文件;
  2. 如何让Ts文件变为Js文件。


3. require函数的执行过程: module.js

  1. Module.prototype.require(path):
  1. 根据传入path来确定待加载模块的绝对路径;
  2. 执行模块加载(顺序:1. 优先缓存,2. 内置模块,3. 生成实例并存入缓存)
  1. Module.prototype.load(filename):
  1. 通过文件名称识别后缀为.js,.json,.node的文件并读取内容;
  2. 通过Module内置的_compile函数进行模块化编译。


如何识别ts文件:


  1. module中如何识别js文件:
Module._extensions['.js'] = function(module, filename) {
  var content = fs.readFileSync(filename, 'utf8');
  module._compile(stripBOM(content), filename);
};
复制代码
  1. 仿照module的源码处理来实现识别ts文件:
const fs = require('fs');
require.extensions['.ts'] = function (module, filename) {
    var content = fs.readFileSync(filename, 'utf8');
    console.log(filename);
    console.log(content);
};
require('./index.ts')
复制代码


将TypeScript代码转义为JavaScript代码,下图为Ts Compiler API的Wiki内容截图提供了最简单的实现API:


1.png

const ts = require('typescript');
// 编译前的Ts内容
const content = `
enum PersonType {
    MAN = 1,
    WOMAN = 2,
}
if (PersonType.MAN === 1) {
    console.log('hello ts');
}
`;
const { outputText } = ts.transpileModule(content, {
    compilerOptions: { module: ts.ModuleKind.CommonJS }
})
// 编译后的Js内容:
/*
var PersonType;
(function (PersonType) {
    PersonType[PersonType["MAN"] = 1] = "MAN";    
    PersonType[PersonType["WOMAN"] = 2] = "WOMAN";
})(PersonType || (PersonType = {}));
if (PersonType.MAN === 1) {
    console.log('hello ts');
}
*/
console.log(outputText);
复制代码


Ts执行器完整代码:


// ts-actuator.js
const path = require('path');
const fs = require('fs');
const ts = require('typescript');
// 从命令行获取下标为2的参数(待执行的ts文件名称)
const filePath = process.argv[2];
// 增加支持.ts文件后缀的检测
require.extensions['.ts'] = function (module, filename) {
    // 得到绝对ts文件的路径并读取内容
    const fileFullPath = path.resolve(__dirname, filename);
    const content = fs.readFileSync(fileFullPath, 'utf-8');
    // 通过Ts提供的transpileModule将Ts字符串转为Js字符串
    const { outputText } = ts.transpileModule(content, {
        compilerOptions: { module: ts.ModuleKind.CommonJS }
    })
    // 将得到的Js字符串进行模块编译
    module._compile(outputText, filename);
}
// 执行模块的require函数
require(filePath);
复制代码


结语:


看了光哥的文章,自己写了两遍找了找感觉,很神奇


相关文章
|
2月前
|
JSON JavaScript 前端开发
如何使用代码注释:关于JavaScript与TypeScript
TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
46 5
|
3月前
|
JavaScript 前端开发 安全
揭秘TypeScript的魔力:它是如何华丽变身为JavaScript的超能英雄,让您的代码飞入全新的编程维度!
【8月更文挑战第22天】在Web开发领域,JavaScript是最主流的编程语言之一。但随着应用规模的增长,其类型安全和模块化的不足逐渐显现。为解决这些问题,微软推出了TypeScript,这是JavaScript的一个超集,通过添加静态类型检查来提升开发效率。TypeScript兼容所有JavaScript代码,并引入类型注解功能。
38 2
|
3月前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
57 0
|
3月前
|
JavaScript
TypeScript——使用npm安装和编译
TypeScript——使用npm安装和编译
39 0
|
4月前
|
存储 Rust JavaScript
Rust 问题之TypeScript 代码,变量 s 存储在栈内存中还是堆内存中如何解决
Rust 问题之TypeScript 代码,变量 s 存储在栈内存中还是堆内存中如何解决
|
5月前
|
前端开发 JavaScript 安全
微前端架构采用 TypeScript 提升开发效率和代码可靠性
【6月更文挑战第12天】微前端架构采用 TypeScript 提升开发效率和代码可靠性。TypeScript 的类型安全防止了微前端间的类型错误,智能提示与自动补全加速开发,重构支持简化代码更新。通过定义公共接口和使用 TypeScript 编写微前端,确保通信一致性与代码质量。在构建流程中集成 TypeScript,保证构建正确性。总之,TypeScript 在微前端架构中扮演关键角色,推荐用于大型前端项目。
71 4
|
5月前
|
JavaScript 编译器
35.【TypeScript 教程】编译选项
35.【TypeScript 教程】编译选项
45 2
|
5月前
|
JavaScript
TypeScript编译(tsconfig.json配置)
TypeScript编译(tsconfig.json配置)
|
6月前
|
监控 JavaScript 数据挖掘
TypeScript代码示例:构建灵活可扩展的员工上网管控平台
使用TypeScript构建的员工上网监控平台示例展示了如何通过`InternetMonitoringPlatform`类实现实时监控、数据分析和数据自动提交。类包含`monitorInternetActivity`用于监控行为,`analyzeData`用于分析数据,`autoSubmitToWebsite`借助axios库将数据POST到网站。此平台旨在提高企业安全性和效率。
159 3
|
6月前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
74 0