TypeScript入坑指南(二)

963 阅读3分钟

上一节我们简单讲了Ts的概念、作用以及优缺点,那这一节就正式进入Ts的入门学习:数据类型。

数据类型

Ts的一大亮点就是强类型变量,变量的声明的同时也需要声明它的类型。 类型声明的语法是: + 数据类型,如 :string

TsJs有以下相同的数据类型

  • boolean
  • string
  • number
  • undefined
  • null

boolean类型

布尔值类型,只有两个值,非true即false,业务逻辑判断必不可少

let success: boolean = true
let error: boolean = false

string类型

字符串类型,由单括号或者双括号或者字符串模板括起来的字符

let singleStr: string = 'Ts string'
let doubleStr: string = "Ts string"
let templeteStr: string = `Ts string`

number类型

数值类型,包含整数、小数、二进制、八进制等

let num: number = 1
let floatNum: number = 1.1
let nan: number = NaN

对于数值类型,这里有一个需要注意的点,就是NaN(Not a number),由于种种原因,它在Ts里面也是属于数值类型,编译时不会报错。除此之外还有Infinity(正无穷大)-Infinity(负无穷大)

undefined类型

声明一个变量,但未给它赋值时,变量的类型就是undefined

let u: undefined = undefined
let a: number
console.log(a)

这里将ts编译成js文件后,将会输出undefined

null类型

undefined用法相似,都代表着空,null表示引用为空

let n: null = null

除了上面跟js一样有的类型,还有voidenumany、数组、元组等

void类型

表示空的类型除了undefinednull,还有void类型,在js里面没有void(空值)的概念,在Ts中,可以用在没有任何返回值的函数

function sayHello (): void {
    console.log('hello Ts')
}

voidundefinednull的区别在于,undefinednull属于其它类型的子类型,可以将它们赋值给其它类型比如数值类型

// 不会报错
let num: number = undefined

而将void类型的值赋值给number类型,会报错

let v: void
let num: number = v
// 报错
// Type 'void' is not assignable to type 'number'.

enum类型

枚举类型。举个例子,人的性别,除了男,就是女,哦,还有不可描述的,但是这些都是固定可列举出来的,还有一年固定12个月,这些就可以用枚举类型来表示

// 枚举性别 male female shemale
enum People { male, female, shemale }
// 输出索引 0 与数组类似
console.log(People.male)
// 也可以给枚举赋值
enum People {
    male: '男',
    female: '女',
    shemale: '爱'
}
console.log(People.male) // '男'

any类型

这是一个神奇的类型,看到any应该就可以猜出,它是一个任意类型。前端er都知道,js是一门十分灵活的语言,数据类型可以不断变换,写习惯了js的前端er,很难在一开始就去定义好某个变量的类型,这时候就可以使用any类型来定义

let a: any = 123
a = '木头人'
a = false

如果变量在声明时未声明类型,会被识别为any类型

// 等价于上面的写法
let a
a = 123
a = '木头人'
a = false

any虽然看起来很“包容”,还是不建议使用,毕竟使用Ts就是为了规范开发,过分使用any,意义就不大了,可以将any作为一个由js到ts使用的过渡。

结语

我喜欢将大的东西逐渐拆分成细的、小的来分析,逐层推进。现在也是快消费的时代,如何利用零碎的时间进行提升,也是一种需要学习的技巧。