【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() // 编译不通过
相关推荐
旺仔Sec20 分钟前
2026年度河北省职业院校技能竞赛“Web技术”(高职组)赛项竞赛任务
运维·服务器·前端
用户40993225021221 分钟前
Vue的Class绑定对象语法如何让动态类名切换变得直观高效?
前端·ai编程·trae
GIS之路1 小时前
GIS 数据转换:GDAL 实现将 CSV 转换为 Shp 数据(一)
前端
武清伯MVP1 小时前
深入了解Canvas:HTML5时代的绘图利器(一)
前端·html5·canvas
一水鉴天1 小时前
整体设计 定稿 之24 dashboard.html 增加三层次动态记录体系仪表盘 之2 程序 (Q208 之1)
前端·html
_杨瀚博1 小时前
微信支付集成_JSAPI
前端
polaris_tl1 小时前
react beginwork
前端
亮子AI2 小时前
【css】列表的标号怎么实现居中对齐?
前端·css
梦想的旅途22 小时前
媒体文件(图片/文件)的上传与管理:获取 Media ID 的技术细节
前端·http·servlet
一水鉴天2 小时前
整体设计 定稿 之22 dashboard.html 增加三层次动态记录体系仪表盘 之1
前端·html