【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() // 编译不通过
相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript