【Typescript入门】基础数据类型

81 阅读4分钟

ts的基础类型

与js相同的数据类型

// boolean类型
let isShow: boolean = true
// 数字类型
let a: number = 0
let b; number = 1
// 字符串 单引号或者双引号
let name: string = 'sanduo'
let company: string = "abc"
// 字符串中还可以使用模板字符串,并且可以用$向句子中插入表达式,变量还可以是其他数据类型,不一定非要是stringd
let greeting: string = `Hello, I'm ${ name }`

// undefined 和 null,这里首先是确定tsconfig.js文件中,如果设置了strictNullChecks: true时,
//null和undefined不能赋值给其他,
let a = null
let b = undefined

// 数组的声明
// 数组的声明有两种,第一种我们比较好理解的是在元素类型后面接上【】,表示此类型元素组成的一个数组
let numberArray: number[] = [1, 2, 3]
let stringArray: string[] = ['a', 'b', 'c']
// 第二种方式是使用数组泛型, Array<元素类型>
let numberArray: Array<number> = [1, 2, 3]
let stringArray: Array<string>  = ['a', 'b', 'c']

从上面的示例代码可以看出,我们在每一个变量声明后,都加上了变量类型,这是必须的吗? 其实这不是必须的,如下:

let a = 'abc'
a = 1,

这个时候你就会发现一个报错: error TS2322: Type '1' is node assignable to type 'string'

从这个例子中你就会发现,即使我们没有指定类型,ts依然可以进行类型推断

变量声明

ts中推荐使用let 和const 而不是var

这一条中的优缺点或者说var的缺点,可以去了解,只需要记住,ts中使用let和const ,你就当不知道有var这个关键字

类型断言

类型断言有两种方式:

  1. 尖括号 <>
let a: any = '123';
let length: number = (<string>a).length
  1. 使用关键字: as
let a: any = 'abc'
let length: number = (a as string).length

虽然两种都可以,但是在JSX中,类型断言不允许使用尖括号,只能使用as,

泛型

函数泛型

这个对于我们大多数的前端er来说,都是一个不太常见的点,理解起来不容易,我们循序渐进,慢慢来,先来看一个例子

先来创建一个函数,这个函数很简单,参数直接作为返回值返回就可以,这个时候如果按照我们前面的类型声明来做

function abc(arg: number): number {
    return arg
~~}~~

但是想一想这个函数只能支持数字类型输入,返回也是数字类型,那下次我们如果需要用到一个参数是字符串的怎么办??? 难道是再写一个下面这样的:

function abcString(arg: string): string {
    return arg
}

这样肯定不是解决办法,那这样类型有很多,无法都这样写一遍,当然,我们可以使用万金油any来表达,但是这里更好的表达方式是泛型函数

function abc<T>(arg: T): T{
    return arg
}

在定义时使用了泛型后,这个泛型函数如何使用呢?

  1. 使用熟悉的尖括号方式进行使用
let a = abc<string>('hello ts')

这里直接指定了T的类型是string,并将他作为参数传给了函数,返回也就是string了

  1. 使用类型推断,这里就像我们在前面的基本数据类型推断一样了,直接传入参数,ts会自己推断
let a = abc(123)

ts编译器会根据传入的参数类型自动确定T的类型,这里就会自动判断T是number,这样我们上面的第一个问题也就解决了,不用针对不同数据类型逐个写函数了。


变量泛型

ok,这是函数中会遇到的,接下来就是变量也会遇到的了,同样的,在上面的函数中,考虑一种情况,如果我们需要用到泛型T的长度 length属性,这里该如何进行,number肯定没有这个变量,这里其实就应该规定了这里的T应该是数组,那泛型数组该如何定义呢?其实只要定义好参数就可以了这里

function abc<T>(arg: T[]): T[]{
    console.log(arg.length);
    return arg;
}

枚举

工作中下来选择框进行是与后端约定:1:全部,2:审核中,3:成功,4:失败等,这样的纯数字使得代码缺乏可读性,这个时候,枚举就出场了,枚举可以让我们定义一些有意义的常量,ts支持数字枚举和字符串枚举

数字枚举

首先不管数字枚举还是字符串枚举,关键字都是enum;来看数字枚举

enum checkStatus {
    allStuff= 1,
    checking,
    success,
    failure,
}

上面我们定义了一个数字枚举:checkStatus,这样在代码中,我们就可以使用checkStatus.allStuff代替原来的数字1,提升代码可读性,上面的例子中还有一个小技巧,当只写了allStuff=1时,后面的枚举数字就是递增的,后面的一次是2,3,4了 那如果第一个也不写呢?像下面这样:

enum checkStatus {
    allStuff,
    checking,
    success,
    failure,
}

这样的话,allStuff的值就是0了,后面的依次递增,

字符串枚举

enum checkStatus {
    allStuff= 'allStuff',
    checking= 'checking',
    success= 'success',
    failure= 'failure',
}

字符串枚举必须手动初始化,无数字枚举的依次递增特性,