Typescript-入门（二）-数据类型、类型别名、联合声明/交叉声明、函数重载

一、基础类型

string：字符串
number：数字
boolean：布尔值
array：数组
object：对象
null/undefined：表示没有值
- 为其他类型的子类，即可以赋值给其他的类型

ts 复制代码

let s: string = '这是字符串'
let n: number = 1234;
let b: boolean = true;
// 定义字符串的数组
let arr: string[] = ['a', 'b', 'c']
// 定义数字类型的数组
let arr2: Array<number> = [1, 2, 3]

// 定义对象，没有限定类型
let obj: object = { name: '这是个对象' }
let obj2: { name: string, age: number } = { name: '这是对象', age: 12 }

// null 和 undefined 可以赋值给其他类型
let s2: string = null;
let n2: number = undefined;
let obj3: object = null;

因为null/undefined可以赋值给其他类型，此时容易存在隐患，这种情况可以通过strictNullChecks配置属性，限制让它们只能赋值给自身，无法赋值给其他类型

ts 复制代码

let obj4: { name: string, age: number } = null;
// console.log(obj4.age) // 运行时会报错，但书写时没有报错

json 复制代码

{
  "compilerOptions": {
    "strictNullChecks": true // 限制null/undefined 赋值给除自身之外的类型
  },
}

二、其他常用类型

void：常用于函数的返回值，表示该函数没有返回值
never：常用于函数的返回值，表示该函数永远不可能结束
字面量类型：使用一个值约束
- let gender:"男";
- 限制gender只能赋值为男
元组类型（tuple）：一个固定长度的数组，并且数组每一项的类型都确定
any类型：any类型可以绕过类型检查，因此any类型的数据可以赋值给任意类型

ts 复制代码

// void
function test(): void { }

// never
function testNerver(): never {
    throw Error()
}

// 元组
let arr: [string, number] = ['string', 1212]
// any
let anydata: any = 1212
// any 类型的数据可以赋值给其他任意类型
let s: string = anydata

三、类型别名

类型别名（Type Aliases）用于为一个类型定义一个新的名字，用type定义。通过类型别名，你可以更容易地引用复杂的类型结构，提高代码的可读性和可维护性

ts 复制代码

type Person {
    name:string,
    age:number
}

四、联合声明和交叉声明

联合声明：联合类型表示一个变量可以具有多个可能的类型之一，用 | 符号连接
交叉声明：交叉类型允许将多个类型合并为一个新的类型，这个新类型拥有所有原始类型的特性，用 & 连接

ts 复制代码

// 联合声明
let numOrStr: string | number = 1;

// 交叉声明
type User {
    name: string;
    age: number
}
type Admin {
    gender: "男" | "女"
}

type SuperUser = User & Admin
// superUser必须包含User类型和Admin类型的所有属性声明
let superUser: SuperUser = {
    name: "超级",
    age: 12,
    gender: "女"
}

五、可选属性、可选参数、默认参数

ts 复制代码

// 可选属性
let obj: { name: string, age?: number }
// 可选参数 可选参数可以不传，但必须在参数末尾
function test(a: string, b?: number) { }
// 默认参数 
function test2(a: string, b: number = 22) { }

六、函数重载

函数重载允许你为同一个函数提供多个函数类型定义，以便根据不同的参数类型或数量选择不同的函数实现。这有助于提供更好的类型检查和智能提示

ts 复制代码

// 函数重载
function computedTest(n1: number, n2: number): number
function computedTest(n1: string, n2: string): string

// 函数实现
function computedTest(n1: number | string, n2: string | number): number | string {
    if (typeof n1 === 'number' && typeof n2 === 'number') {
        return n1 + n2
    } else if (typeof n1 === 'string' && typeof n2 === 'string') {
        return n1 + n2
    }
    throw new Error('必须全部为数字或全部为字符串')
}

computedTest(1, 2)

七、小练习

创建一副扑克牌，不包含大小王，并打印

ts 复制代码

type Color = '红桃' | '黑桃' | '方块' | '梅花'
type Mark = "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "J" | "Q" | "K" | "A";
type NormalCard = {
    color: Color,
    mark: Mark
}
type Deck = NormalCard[]
function createCard(): Deck {
    const deck: Deck = []
    const color: Color[] = ['红桃', '黑桃', '方块', '梅花']
    const mark: Mark[] = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];
    for (let i = 0; i < color.length; i++) {
        for (let j = 0; j < mark.length; j++) {
            deck.push({
                color: color[i],
                mark: mark[j]
            })
        }
    }
    return deck
}
function printCard(deck: Deck): void {
    deck.forEach(item => {
        console.log('花色:' + item.color + ';牌号:' + item.mark)
    })
}

const deck = createCard()
printCard(deck)