TypeScript 常用类型

概述

TypeScript 是TS的超集，TS提供了JS的所有功能，并且额外的增加了：类型系统。

1）所有的JS代码都是TS代码。

2）JS有类型（比如 number / string等），但是JS不会检查变量的类型是否发生变化。而TS会检查变量的类型是否发生变化。

TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。

下面介绍：类型注解 和 常用基础类型

3.1 类型注解

let age: number = 18

说明：代码中的   :number   就是类型注解。

作用:为变量添加类型约束。比如，上述代码中，约定age的类型为 number （数值类型）。

解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错。

3.2  常用基础概述

可以将TS中的常用基础类型细分为两类：1.JS已经有的类型，2.TS新增类型

1）TS已有类型

原始类型：number / string / boolean / null /undefined / symbol

对象类型：Object(包括数组，对象，函数等对象)

2）TS新增类型

联合类型，自定义类型（类型别名），接口，元组，字面量类型，枚举，void,any等

3.3  原始类型

原始类型： numbet / string / boolean / null / undefined / symbol /

特点： 简单，这些类型，完全按照JS中类型的名称来书写。

let age: number = 18
let myName: string = '刘老师’
let isLoading: boolean = false

3.4 数组类型

对象类型:Object(包括数组，对象，函数等对象)。

特点：对象类型，在TS中更加细化，每个具体的对象都有自己的类型语法。

3.4.1 数组类型的两种写法：（推荐使用 number[] 写法）

let numbers: number[] = [1,3,5]

let strings: Array<string> = ['a','b','c']

要求：数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写？

let arr: (number | string)[] = [1,'a',3,'b']

解释： | （竖线）在TS中叫做联合类型（由两个或多个其他类型组成的类型，表示可用是这些类型中任意一种）。

注意：这是TS中联合类型的语法，只有一根竖线，不用与JS的 或 （||）混淆了

本节的代码实践

// 变量声明并赋值 原始类型变量的使用
let age: number = 18
console.log(age)
let myName: string = '刘老师'
console.log(myName)
let isloading: boolean = false
console.log (isloading)
let a: null = null
console.log (a)
let b: undefined = undefined
console.log (b)
let s: symbol = Symbol()
console.log (s)


// 数组类型
let numbers: number[] = [1,3,5] // TS中第一种写法
console.log(numbers)
let numbers1: Array<number> =[1,3,5] // TS中第二种写法
console.log(numbers1)
let strings: string[] = ['a', 'b', 'c', 'd', 'e', 'f']
console.log(strings)
// let b: boolean[] = [true, false]
// console.log(b)
// 联合类型
// 添加小括号，表示： 首先是数组，然后，这个数组中能够出现 number 或 string 类型的元素
let arr: (number | string)[] = [1,3,5,'a','b','c']
console.log(arr)

// 不添加小括号，表示：arr1 即可以是 number 类型，又可以是 string[] 类型的数组
let arr1: number | string[] = ['a','b','c'] 
console.log(arr1)
let arr2: number | string[] = 123 
console.log(arr2)

3.5 类型别名

类型别名（自定义类型）：为任意类型起别名。

使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。

语法格式如下：

type CustomArray = (number | string)[]
let arr1: CustomArray = [1,'a',3,'b']
let arr2: CustomArray = ['x','y',6,8]

解释：

1.使用 type 关键字来创建类型别名

2.类型别名（比如，此处的CustomArray ）,可以是任意合法的变量名称。

3.创建类型别名后，直接使用该类型别名作为变量的类型注解即可

实例如下：

let arr1: (number | string)[] = [1,3,5,'a','b','c','d']
console.log(arr1)
let arr2: (number | string)[] = [1,'x',4,'y']
console.log(arr2)

// 改造：

// 类型别名：创建类型别名
type CustomArray = (number | string)[]
let arr3: CustomArray = [1,3,5,'a','b','c','d']
console.log(arr3)
let arr4: CustomArray = [1,'x',4,'y']
console.log(arr4)

3.6 函数类型

函数的类型实际上指的是：函数参数和返回值的类型。

为函数指定类型的两种方式：

        1）单独指定参数，返回值的类型。

        2）同时指定参数，返回值的类型

单独指定参数，返回值的类型，实例如下：

// 1.单独指定参数，返回值类型
// 使用函数声明方式 => 声明函数
function add1(num1: number,num2: number): number {
    return num1 + num2
}
console.log(add1(2,9))

// 使用函数表达式方式 => 声明函数  箭头函数 const add = () => {}  表达式
const add2 = (num1: number,num2: number): number => {
    return num1 + num2;
}
console.log(add2(23,12))

备注：函数添加注解类型，实际上是给函数的参数和返回值添加注解类型，参数直接在参数后面添加    ：type    ,返回值是在参数括号后面添加   : type   注解类型。

同时指定参数，返回值的类型，实例如下：

// 2.同时指定参数，返回值类型 const add = () => {}
// 函数的类型 的注解类型为  : (num1: number,num2: number) =>number  剩余的就是函数的实现了
const add3: (num1: number,num2: number) => number = (num1,num2) => {
    return num1 + num2
}
console.log(add3(12,32))

解释：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。

注意： 这种形式只适用于函数表达式【: (num1: number,num2: number) => number】= 为箭头函数同时指定参数

使用函数表达式创建函数比如 const b = () => {}

如果函数没有返回值，那么函数返回值类型为 void  实例如下：

function greet(name: string): void {
    console.log('Hello',name)
}
// 调用函数
greet("JACK")

使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了，比如，数组的slice()切片方法，可以是slice(),无参数，也可以是slice(1),还可以是slice(1,3)。实例如下：

// 可选参数
function mySlice(start?: number,end?: number): void {
    console.log('起始索引：',start,'结束索引：',end)
}
// 调用函数
mySlice()
mySlice(1)
mySlice(1,3)

可选参数：在可传可不传的参数名称后面添加？（问号）。

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。

slice()方法：用来去截取数组，参数是索引值，所以它的参数为 number

今天就到这里，明天继续对象类型。