【typescript基础篇】(第一章)TS环境安装与初体验

TypeScript介绍

  • TS是是由微软2012年开发的一款开源的编程语言
  • TypeScript 是 Javascript 的超集,遵循最新的 ES6、Es5 规范。TypeScript 扩展了 JavaScript 的语法
  • 在js的基础上,为js添加了类型支持

设计目标

  • 遵循当前以及未来出现的ECMAScript规范
  • 开发大型应用,可以编译程纯JavaScript,编译出来的JavaScript可以运行在浏览器上
  • 成为跨平台的开发工具,TypeScript使用Apache作为开源协议,且能够再所有主流的操作系统上安装和执行

TS优势

  • 更早的发现错误
  • 任何位置都有代码提示,增加开发效率
  • 类型系统提升了代码的可维护性,重构更容易
  • 使用最新的ECMAScript语法,最新
  • ts类型推断机制,降低成本

TS劣势

  • 短期投入到工作可能增加开发成本
  • 和有些库的结合不是很完美
  • 学习需要成本,需要理解接口,泛型,类型等知识
  • 集成到自动构建流程中需要额外的工作量

TS与JS的区别

JavaScript TypeScript
动态语言 具有静态语言的特点
编译性语言运行时报错 编译期间报错
弱类型语言,没有类型 强类型语言,类似java, C++等,定义时指明类型
不支持模块、接口、泛型 支持模块、接口、泛型
基本数据类型和引用数据类型 更多的基本数据类型和引用数据类型,如any, never, enum等
在浏览器中直接执行 编译为js后才能在浏览器进行执行

TS环境安装与初体验

安装

js 复制代码
npm install -g typescript
// or
cnpm install -g typescript
// or
yarn global add typescript

运行

js 复制代码
// 编译生成js文件
tsc 文件名称.ts
// 监听文件变化
tsc --watch  

js缺陷的演示

js 复制代码
/* 
  1.没有对类型进行检测
  2.没有对是否传参进行检测
*/
function test(msg) {
  console.log(msg.length);
}

test("邱淑贞") // 可以正常使用
test(666) // undefine
test() // error

采用TS书写同样的代码,我们可以看到,编译器非常友好的对我们进行了提示

ts 复制代码
function test(msg:string) {
  console.log(msg.length);
}

test("邱淑贞") // 可以正常使用
test(666) // 编译不通过
test() // 编译不通过
相关推荐
Days205022 分钟前
简单处理接口返回400条数据本地数据分页加载
前端
Novlan129 分钟前
@tdesign/uniapp 图标瘦身
前端
ManThink Technology32 分钟前
如何使用EBHelper 简化EdgeBus的代码编写?
java·前端·网络
. . . . .1 小时前
shadcn组件库
前端
2501_944711431 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜2 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
css趣多多2 小时前
ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑
前端
_codemonster2 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
寻找奶酪的mouse2 小时前
30岁技术人对职业和生活的思考
前端·后端·年终总结
梦想很大很大2 小时前
使用 Go + Gin + Fx 构建工程化后端服务模板(gin-app 实践)
前端·后端·go