TS的常用类型

// 原始类型
const Age: number = 12;
const Name: string = "zs";
const isLoading: boolean = true;
const n: null = null;
const u: undefined = undefined;
const s: symbol = Symbol();
// 数组
//1.推荐写法
const numArr: number[] = [1, 2, 3];
// 2.Array<类型>
const strArr: Array<string> = ["a", "b", "c"];

// 联合类型( 小括号+ | )
const arr: (number | string)[] = [1, "a"];

// 类型别名( type关键字 )
type CustomArray = (number | string)[];
const dataArr: CustomArray = [1, "a"];

// 函数类型
// 1.单独指定参数和返回值的类型
function add(num1: number, num2: number): number {
    return num1 + num2;
}
const addFn = (num1: number, num2: number): number => num1 + num2;
// 2.同时指定参数和返回值的类型:注意⚠️:只有函数表达式才可以使用这种方法
const AddFn: (num1: number, num2: number) => number = (num1, num2) =>
    num1 + num2;

// void类型( 应用场景:如果函数没有返回值,那么函数的返回值类型为void类型 )
function Add(num: number): void {
    console.log(num);
}
const Fn = (num: number): void => {
    console.log(num);
};
const fn: (num: number) => void = (num) => console.log(num);

// 函数参数可选类型( ?: 类型 )
// 注意⚠️:可选参数位于必选参数的后面,可选参数后不能再写必选参数
function mySlice(start: number, end?: number) {
    console.log(start, end);
}

// 对象类型
const person: { name: string; age: number; sayHi(): void; greet(name: string): void } = {
    name: "武媚娘",
    age: 18,
    sayHi() {
        console.log("唱歌");
    },
    greet(name) {
        console.log(name);
    }
};
//1.如果一行代码中指定单个属性时,可以省略分号;
const Person: {
    name: string
    age: number
    sayHi(): void
    greet(name: string): void
} = {
    name: "武媚娘",
    age: 18,
    sayHi() {
        console.log("唱歌");
    },
    greet(name) {
        console.log(name);
    }
};
//2.方法的类型也可以使用箭头函数形式
const people: {
    name: string
    age: number
    sayHi: () => void
    greet: (name: string) => void
} = {
    name: "武媚娘",
    age: 18,
    sayHi() {
        console.log("唱歌");
    },
    greet(name) {
        console.log(name);
    }
};

// 对象的可选属性(属性名?: 类型)和函数可选参数的语法是一致的
function myAxios(config: { url: string; method?: string }) {
    console.log(config);
}
// 传参时,method可以不写啦
myAxios({ url: '' })

// 接口(interface关键字)
interface IPerson {
    name: string
    age: number
    greet: (name: string) => void
}
const man: IPerson = {
    name: '小明',
    age: 18,
    greet(name) { }
}

// 接口和类型别名的对比
/*
相同点:
      都可以为对象指定类型别名
不同点:
      1.接口 interface 只能为对象指定类型
      2.类型别名 type 可以为任意类型指定别名
      3.语法:  interface 别名 {}
              type 别名=类型
 */

// 接口继承
interface Point2D { name: string; age: number; sayHi: () => void }
interface Point3D extends Point2D { gender: string }
const P13: Point3D = {
    name: '武媚娘',
    age: 18,
    gender: 'man',
    sayHi() { }
}

// 元组:另一种类型的数组
// 使用场景:当确切地知道包含多少个元素,以及特定索引对应的类型
const position: [number, string] = [1, 'a']

// 类型推论机制
// 常见使用场景:
// 1.声明变量并初始化值时
let age = 18
// 2.函数的返回值
function sum(num1: number, num2: number) {
    return num1 + num2
}

// 类型断言(值 as 类型)
// 使用场景:当我们比Ts更加明确的知道一个元素的类型时,就可以使用类型断言
const aLink = document.getElementById('link') as HTMLAnchorElement

// 字面量类型(配合 联合类型 一起使用)
// 使用场景:用来表示一组明确的类型列表
function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {
    console.log(direction);
}
changeDirection('up') //函数调用传参时只能从字面量联合类型中选择

// 枚举(enum)
// 使用场景:用来表示一组明确的可选值,和字面量+联合类型功能类似
enum Direction {
    Up,
    Down,
    Left,
    Right
}
// 枚举成员也是可以有值的,默认是从0开始递增的数字,具体设置什么值什么类型可以根据自己的需要
enum DirectionNmu {
    Up = 10,
    Down,
    Left,
    Right
}
// 字符串枚举:字符串枚举的每个成员都必须有初始值
enum DirectionStr {
    Up = 'up',
    Down = 'down',
    Left = 'left',
    Right = 'right'
}

function changeDirectionFn(direction: Direction) {
    console.log(direction);
}
changeDirectionFn(Direction.Up)//类似于Js中的对象,通过 . 可以访问到枚举的成员