TypeScript常用类型

概述

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

• 所有的 JS 代码都是 TS 代码。
• JS 有类型( 比如， number/string 等)， 但是 JS 不会检查变量的类型是否发生变化。  而 TS 会检查。  TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为 ，从而降低了发生错误的可能性。

1.原始类型

作用：为变量添加类型约束。  

比如 ，下列代码中， 约定变量name2的类型为 string(字符类型)。

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

 

2.数组类型

数组类型的两种写法：(推荐使用 number[] 写法)

let arr: number[] = [1, 2, 3]  // 推荐写法
let strArr:string[]=['1','2','3']

let str: Array<string> = ['a', 'b', 'c']  // 不推荐

 数组中既有 number 类型， 又有 string 类型

 |  (竖线)在 TS 中叫做联合类型 ( 由两个或多个其他类型组成的类型， 表示可以是这些类型中的任意一种 )。

let arr:(number|string)[]=[1,'sss']
let infoArr: (string | number | boolean | object)[] = ['zs', 19, true, { name: '张三' }];

 3.自定义类型

1. 使用 type 关键字来创建类型别名。
2. 类型别名(比如，此处的arrType)，可以是任意合法的变量名称
3. 创建类型别名后，直接使用该类型别名作为变量的类型注解即可。
4. 当同一类型(复杂) 被多次使用时，可以通过类型别名，简化该类型的使用

type arrType = (string | number)[]

let arr: arrType = [1, 2, 3, 'a', 'b', 'c']
let infoArr: arrType = [18, '张三']

4.函数类型

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

//参数类型，                               //返回值类型
function addTS(num1: number, num2: number): number {
    return num1 + num2
}
//箭头函数类型
const addTsArrow = (msg1: string, msg2: string): string => {
    return msg1 + msg2 + 'hello ts'
}

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

function greet(msg: string): void {
    console.log('没有返回值');
}

可选参数 ：在可传可不传的参数名称后面添加 ? (问号)。

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

function mySplice(start?: number, end?: number): void {
    console.log(start);
    console.log(end);
}
mySplice()
mySplice(1)
mySplice(1, 2)

// 默认参数
function requiredNum(num1: number = 10): number {
    return num1 + 10
}
console.log(requiredNum())
console.log(requiredNum(20))

对象类型

1. 直接使用 {} 来描述对象结构。
2. 属性采用属性名: 类型的形式；
3. 方法采用方法名(): 返回值类型的形式。
4. 如果方法有参数，就在方法名后面的小括号中指定参数类型(greet(name: string): void )。
5. 在一行代码中指定对象的多个属性类型时，使用 ; (分号)来分隔。
6. 如果一行代码只指定一个属性类型(通过换行来分隔多个属性类型)，可以去掉 ; (分号)。
7. 方法的类型也可以使用箭头函数形式(比如： { sayHi: () => void } )。

// ts 的对象类型
//方式一
let obj: { name: string; age: number; say: () => void } = {
    name: '张三',
    age: 25,
    say: function () {
        console.log('你好');
    }
}
console.log(obj);

  // 方式二 
let obj2: {
    name: string
    age: number
    say: () => void 
} = {
    name: '李四',
    age: 22,
    say() {
        console.log('hi');
    }
}
console.log(obj2);

对象的可选属性

//方式一
function myAxios1(config: { url: string; methods?: string }): void {
    console.log(config);
}
//方式二
type options = { url: string; methods?: string }
function myAxios2(config: options): void {
    console.log(config);
}

myAxios2({ url: 'http:www.abc.com' })
myAxios2({ url: 'http:www.abc.com', methods: 'post' })

接口

当一个对象类型被多次使用时，一般会使用接口 ( interface)来描述对象的类型达到复用的目的。

interface (接口 )和 type (类型别名 )的对比：

相同点 ：都可以给对象指定类型。

不同点：

• 接口，只能为对象指定类型。
• 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名。

interface IPerson {
    // name: string; age: number; sayHi(): void;
    name: string
    age: number
    sayHi: () => void
}
let obj: IPerson = {
    name: 'zs',
    age: 19,
    sayHi() {
        console.log('hello');
    }
}

 接口的继承（extends）

interface Point2D {
    x: number
    y: number
}

interface Point3D extends Point2D {
    z: number
}

let pointB: Point3D = {
    x: 100,
    y: 200,
    z: 300
}

元祖

 元组类型可以确切地标记出有多少个元素，以及每个元素的类型。

let position: [number, number, string] = [39.5427, 116.2317, 'China']
let position2: [number, number, string?] = [39.5427, 116.2317]