小白学前端之TypeScript环境安装|8月更文挑战

简介: 这里用 npm 工具安装 TypeSctipt

网络异常,图片无法展示
|

安装


这里用 npm 工具安装 TypeSctipt

sudo npm install -g typescript

这里的 -g 是代表安装到全局环境,如果没有这个的话只会安装到当前执行命令的目录下

执行完命令后,测试下有没有安装成功可以在终端输入 tsc -v

➜  ~ tsc -v
Version 4.3.5

看到上面的输出就代表 TypeScript 安装成功了

运行一个 ts 文件

浏览器并不能直接运行 TypeScript,需要经过 TypeScript 编译器编译成 JavaScript 后才能运行

网络异常,图片无法展示
|

在当前目录下新建一个以 .ts 结尾的文件

新建 test.ts 文件,在文件里输入内容:

var msg:string = 'hello world!'
console.log(msg)

然后编译这个 test.ts 文件

tsc test.ts

编译完成后,会在当前目录下生成一个同名的 js 文件,里面的内容为:

var msg = 'hello world!';
console.log(msg);

然后我们用 nodejs 来运行这个 js 文件

node test.js
# 输出
hello world!

使用 ts-node

如果觉得每次手动编译 ts 文件很麻烦,那么就可以使用 ts-node 这个插件了,它会在内部直接帮你编译 ts 文件然后再直接运行,省去手动编译的步骤

安装 ts-node

sudo npm install -g ts-node

运行 ts 文件

ts-node test.ts
# 输出
hello world!

如果你不想安装到全局的话,可以去掉 -g 参数,这样的话就只会安装到当前文件夹下

在当前文件夹下会生成一个 node_modlues 文件夹,里面有你安装的一些 node 插件模块

这时如果你要编译 ts 文件的话,就要使用 ./node_modules/.bin/ts-node 这个脚本了

运行 ts 文件

./node_modules/.bin/ts-node test.ts
# 输出
hello world!
相关文章
|
3天前
|
JavaScript 前端开发 IDE
TypeScript在前端项目的渐进式采用策略
该文介绍了渐进式采用TypeScript在前端项目中的策略。首先,通过将JS文件扩展名改为TS并添加类型注解,如在`utils.js`中添加类型。接着,配置`tsconfig.json`,包括目标版本、模块系统、输出目录等。高级配置涉及路径别名、JSON导入、库文件等。然后,集成TypeScript到构建流程,如Webpack,安装`ts-loader`并调整配置。利用类型定义,包括安装第三方库的类型定义包,自定义类型定义或使用社区定义。最后,逐步迁移其他模块至TypeScript,强化类型检查,并确保IDE支持。
5 0
|
4天前
|
JavaScript 前端开发 IDE
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
|
5天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
5天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 的内置数据类型有哪些?
【5月更文挑战第1天】【Web 前端】TypeScript 的内置数据类型有哪些?
|
5天前
|
JavaScript 前端开发 安全
【Web 前端】使用 TypeScript 有什么好处?
【5月更文挑战第1天】【Web 前端】使用 TypeScript 有什么好处?
|
5天前
|
JavaScript 前端开发 安全
【Web 前端】TypeScript 的特点是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 的特点是什么?
|
5天前
|
JavaScript 前端开发 IDE
【Web 前端】什么是 TypeScript ?
【5月更文挑战第1天】【Web 前端】什么是 TypeScript ?
|
5天前
|
前端开发 JavaScript 安全
【TypeScript技术专栏】TypeScript在微前端架构中的应用
【4月更文挑战第30天】微前端架构通过拆分应用提升开发效率和降低维护成本,TypeScript作为静态类型语言,以其类型安全、代码智能提示和重构支持强化这一架构。在实践中,TypeScript定义公共接口确保跨微前端通信一致性,用于编写微前端以保证代码质量,且能无缝集成到构建流程中。在微前端架构中,TypeScript是保障正确性和可维护性的有力工具。
|
5天前
|
JavaScript 前端开发 数据可视化
前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts
前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts
46 0
|
5天前
|
JavaScript 前端开发 IDE
TypeScript在大型前端项目中的价值与实践策略
【4月更文挑战第7天】本文探讨了TypeScript在大型前端项目中的价值和实践策略。 TypeScript通过静态类型检查、代码提示、接口与泛型提高代码质量和开发效率。在大型项目中,可采用逐步迁移策略,制定类型规范,利用IDE特性,并维护类型定义文件。通过CI/CD和培训分享,团队能充分发挥TypeScript优势,提升项目可维护性、可扩展性和开发效率。
23 0