【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() // 编译不通过
相关推荐
华科易迅8 分钟前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏8 分钟前
Next.js 13变化有多大?
前端·react·nextjs
糖炒栗子03269 分钟前
前端项目标准环境搭建与启动
前端
不是az10 分钟前
CSS知识点记录
前端·javascript·css
爱分享的阿Q18 分钟前
GPT6-Spud-AGI前夜的豪赌
前端·easyui·agi
西西小飞龙1 小时前
Less/Sass Mixins vs. Extend
前端·less·sass
syjy21 小时前
(含下载)BeTheme WordPress主题使用教程
前端·wordpress·wordpress建站
Misnice1 小时前
shadcn如何使用
前端·reactjs
h_jQuery1 小时前
vue使用gm-crypto对数据进行sm4加密处理
前端·javascript·vue.js
阿赛工作室2 小时前
Vue中onBeforeUnmount不触发的解决方案
前端·javascript·vue.js