小白学前端之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!
目录
相关文章
|
13天前
|
JSON 前端开发 开发工具
初探在WSL中设置vim前端开发环境
初探在WSL中设置vim前端开发环境
|
14天前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
21天前
|
JavaScript 前端开发 编译器
TypeScript:一场震撼前端开发的效率风暴!颠覆想象,带你领略前所未有的编码传奇!
【8月更文挑战第22天】TypeScript 凭借其强大的静态类型系统和丰富的工具支持,已成为前端开发的优选语言。它通过类型检查帮助开发者早期发现错误,显著提升了代码质量和维护性。例如,定义函数时明确参数类型,能在编译阶段捕获类型不匹配的问题。TypeScript 还提供自动补全功能,加快编码速度。与 Angular、React 和 Vue 等框架的无缝集成进一步提高了开发效率,使 TypeScript 成为现代前端开发中不可或缺的一部分。
26 1
|
12天前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
31 0
|
1月前
|
资源调度 JavaScript 前端开发
Vue3+TypeScript前端项目新纪元:揭秘高效事件总线Mitt,轻松驾驭组件间通信的艺术!
【8月更文挑战第3天】Vue3结合TypeScript强化了类型安全与组件化开发。面对大型应用中复杂的组件通信挑战,可通过引入轻量级事件发射器Mitt实现事件总线模式。Mitt易于集成,通过简单几步即可完成安装与配置:安装Mitt、创建事件总线实例、并在组件中使用`emit`与`on`方法发送及监听事件。此外,利用TypeScript的强大类型系统确保事件处理器正确无误。这种方式有助于保持代码整洁、解耦组件,同时提高应用的可维护性和扩展性。不过,在大规模项目中需谨慎使用,以防事件流过于复杂难以管理。
58 1
|
18天前
|
前端开发 JavaScript
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
|
1月前
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
|
1月前
|
开发框架 前端开发 JavaScript
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
|
1月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
1月前
|
开发框架 前端开发 JavaScript
在Vue3+TypeScript 前端项目中使用事件总线Mitt
在Vue3+TypeScript 前端项目中使用事件总线Mitt