TypeScript基本类型检查

落日映苍穹つ 2022-01-20 10:35 289阅读 0赞

### 基本类型约束 ###

> TS是一个可选的静态的类型系统

#### 如何进行类型约束 ####

*  约束对象： 变量、函数的参数、函数的返回值

let aaa:string = 'hello';
    function sum(a:number, b:number):number {
        return a + b;
    }
    let nums:number[] = [1, 2, 3];
    let num:number = sum(3, 4); // 第一种
    let numss: Array<number> = [1, 2, 3]; // 第二种
    复制代码

==因为TS有严格的类型检查，在对函数重命名的时候，可以使用F2来全局替换。==

快捷键F12：转到定义

TS在很多场景中推导出数据类型

any: 表示任意类型，对该类型，ts不进行类型检查

> 小技巧：如何区分数字字符串和数字，关键看怎么读？

> 如果按照数字的方式读，就是数字。

#### 源代码和编译结果的差异 ####

编译结果中没有类型约束信息

### 基本类型 ###

*  number: 数字
 *  string: 字符串
 *  boolean: 布尔值
 *  array
 *  object
 *  null和undfined

null和undefined是所有其他类型的子类型，他们可以赋值给其他类型

通过在tsconfig.json中的compilerOptions添加`strictNullChecks: true`, 可以获得更加严格的空类型检查，之后null和undfined只能赋值给自身。

### 其他的常用类型 ###

*  联合类(配合类型保护进行判断)

类型保护： 当对某个变量进行类型判断之后，在判断语句块中便可以确定它的确切类型，typeof可以触发类型保护。

let name: string | undefined;
    if(typeof name === "string") {
        // 类型保护
        name.
    }
    复制代码

*  void类型(通常用于约束函数的返回值，表示函数不返回任何东西)

function printMenu():void {
        console.log("no return");
    }
    复制代码

*  never类型(通常用于约束函数的返回值，表示函数永远不会结束)

function throwError(msg: string):never {
        throw new Error(msg);
        console.log("dsafasdf"); // 此处为无法运行到的代码
    }
    
    function alwaysDoSomething():never {
        while() {
            // ...
        }
    }
    复制代码

*  字面量类型(使用一个值进行约束)

let gender: "男"| "女"; //表示gender永远只能为男或者女
    let a:"A"; // a永远只能为A
    let b:1;
    let user: {
        name: string,
        age: number
    };// user必须要有name，age
    复制代码

*  元祖类型(Tuple): 一个固定长度的数组，并且数组中的每一项的类型确定

let tu:[string, number];
    
    tu = ["d", 2];
    复制代码

*  any类型(可以绕过类型检查，因此，any类型的数据可以赋值给任意类型)

let data:any = 123;
    let bb: number = data
    复制代码

### 类型别名：对已知的一些类型定义名称 ###

// 防止重复的书写代码
    type Gender = "男" | "女"
    type User = {
        name:string,
        age:number,
        gender: Gender
    }
    let u:User
    
    u = {
        name: "www",
        age: 18,
        gender: "男"
    }
    function getUsers(g:Gender):User[] {
        return [];
    }
    复制代码

### 函数的相关约束 ###

> #### 函数重载： ####

/**
     * 得到a*b的结果
     * @param a 
     * @param b 
     */
    function combine(a:number, b:number):number;
    /**
     * 得到a和b拼接的结果
     * @param a 
     * @param b 
     */
    function combine(a:string, b:string):string;
    function combine(a: number | string, b: number | string): number | string {
        if(typeof a === "string" && typeof  b === "string") {
            return a + b;
        }else if(typeof a === "number" && typeof b === "number") {
            return a * b;
        }
        throw new Error("a和b必须是相同的类型");
    }
    
    const result = combine(1,2); // 自动监测出返回值为number
    复制代码

> #### 可选参数：可以在某些参数后面加上问号，表示这些参数可以不用传递 ####

function sum(a: number, b:number, c?:number):number { //可选参数必须是在参数列表的后面
        // 当c没有传值是为undefined
        if(c) {
            return a + b + c;
        }
        return a + b;
    }
    复制代码

### 实例-创建打印扑克牌 ###

**在开发的过程中有智能提示，减少代码的错误，提升代码开发效率**

type Deck = NormalCard[]
    type Color = "♥" | "♠" | "♦" | "♣"
    type NormalCard = {
        color: Color
        mark: number
    }
    function createdDeck(): Deck {
        const deck: Deck = [];
        for (let i = 1; i < 13; i++) {
            deck.push({
                mark: i,
                color: "♠"
            });
            deck.push({
                mark: i,
                color: "♣"
            });
            deck.push({
                mark: i,
                color: "♥"
            });
            deck.push({
                mark: i,
                color: "♦"
            })
        }
        return deck;
    }
    
    function printDeck(deck: Deck): void {
        let result = "\n";
        deck.forEach((card, index) => {
            let str = card.color;
            if (card.mark <= 10) {
                str += card.mark;
            }
            else if (card.mark == 11) {
                str += "J";
            }
            else if (card.mark == 12) {
                str += "Q";
            }
            else if (card.mark == 12) {
                str += "K";
            }
            result += str + "\t";
            if(((index + 1) % 4) == 0) {
                result += "\n";
            }
        })
        console.log(result);
    }
    
    const deck = createdDeck();
    printDeck(deck);
    复制代码