从今天开始,持续更新typescript入门教程系列....

目前ts越来越火,主流的前端框架,好比angular,vue 3均是采用ts来编写,所有很多公司的项目都是用ts来写的,所有是时候认真学习ts
ts来源于微软公司,越是大的公司,越是大的项目,越是推荐使用ts来编码,ts是js的超集,在js上面增加一些内容,相对于js,ts具有以下的优点:

  • 支持面向对象方法,之前js实现面向对象是通过prototype,function实现的,有点繁琐。ts提供了Class,Interface
  • 类型检查。ts能够在编译的阶段就可以发现错误,减少bug率。在实际开发中,需要将ts编译成js,而且目前浏览器支持的是es5版本
  • 自带文档特性。通过类型注解,很容易知道某一个参数或者变量是什么类型
  • IDE或者是编辑工具支持良好(自动完成提示)

总的来说ts=js+type+(一些其他特性:枚举,接口等)
使用ts之前,首先需要安装node,安装好node之后会自带npm,npm是node包管理工具,其可以下载一些社区常用的包,我们通过npm来安装ts编译工具typescript , npm install typescript -g
编写一个ts文件:index.ts,通过下面命令行工作tsc index,.ts,就可以将index.ts编译成index.js,最后在浏览器中运行(ts是没法在浏览器中运行的,必须进行编译)

var a:number a=10 console.log(a)

上面就是定义了a的变量类型是number类型,如果这时候传string类型赋值给a,编译器就会保存
数据类型主要有:

  • number,string,boolean,Array

示例,定义数组有两种方法:

let myArr1:string[]=["st1","st2"] let myArr2:Array<string>=["st1","st2"]

也可以给函数参数添加类型限制,这时如果传入的参数个数和类型和定义的形参不匹配,编译时候就会报错:

const add=(a:number,b:number)=>{     return a+b } console.log(add(2,4))

也可以为函数返回值添加类型

const add=(a:number,b:number):number=>{     return a+b }

也可以给函数加上默认的参数,如果函数的返回值是空,可以设置返回值类型是void

const add=(a:number=8,b:number=10):void=>{     console.log(a+b) }

也可以设置可选参数,如下:这时候b可以传可以不传

const add=(a:number=8,b?:number):void=>{      console.log(a+b) }

如果需要将一个变量设置为任何类型。可以使用any,但是尽量少用any

let a:any; a=10; a="str" a=[1,2,3]

如果需要设置一个变量为两种或者更多类型,可以使用联合类型的方式,|

let a:number |