TypeScript第二天

今天的课程内容

1. 枚举类型

枚举类型需要使用 enum 关键字来定义。
语法：

enum 枚举类名{属性名称,...,属性名称}

使用示例：

// 定义枚举
enum Color {
    RED,
    BLUE= 3,
    GREEN = 6
}

// 使用
const red: Color = Color.RED
console.log(red);

2. unKnow 类型

Unknown类型是一种未知的类型，通常用于不确定的情况下，来动态修改值。

let message: unknown = 5
console.log(message)

message = '这是一个未知的类型'
console.log(message);

message = [1,2,3]
console.log(message);

注意：这种类型是可以接收其它数据类型的。

3. any类型

使用示例

let str: any = 5
//console.log(str);

/*str = 'hello'
console.log(str);*/

let names: unknown = 'hello'

//names = str
//console.log(names);

let aa: any
aa = names
console.log(aa);

4. void

void 类型表示没有返回值的类型，一般用于函数的返回值类型处。

// 定义有返回值的函数方式
function add(a: number, b: number): number {
    return a + b
}
const r = add(1, 2)
console.log(r);

// 定义一个没有返回值的函数
const p = (a: number, b: number): void => console.log(a + b)

p(2, 3)

5. Null和 undefined

let u: undefined = undefined
console.log(u);

let n: null = null
console.log(n);

//u = null // 报错， null 值不能赋给 undefined 类型的变量
//console.log(u);

//n = undefined // 报错，undefined 不能赋给 null 类型的变量
//console.log(n);

6. Never

never类型表示的是那些永不存在的值的类型。一般用于异常处理。

const fn = (n: number): void => {
    console.log(n);
    return
}

fn(3)

const fn1 = (n: number): never => {
    console.log(n);
    //return 报错
    throw new Error('出错了')
}
fn1(5)

7. 接口

7.1 引入

function printLabel(
    lableObj: {
        label: string
    }
): void {
    console.log(lableObj.label);
}

// 使用
const obj = {
    name: '张三',
    age: 18,
    label: '20'
}
printLabel(obj)

上面定义的函数的作用是起规范作用，所给的参数必须是一个对象，同时对象中必须有一个字符串类型的 label 属性
上面声明方式是可行的，但是不太优雅，我们可以把类型定义为一个接口，让这个接口来进行规范，会更好一些
接口通过 interface 关键字来定义，它的语法如下：

7.2 定义接口

interface 接口名称 {
    属性名称: 类型
}

使用示例：

interface LabelObj {
    label: string
}

function printLabel2(param: LabelObj): void {
    console.log(param.label);
}
printLabel2(obj)

7.3 可选属性

可选属性通过 ? 来定义，例如：

interface LabelObj {
    label: string
    age?: number // 它是一个可选的属性
}

此时，age 属性就是一个可选的属性，我们使用的对象中可以包含 age 属性，也可以不包括 age 属性。

7.4 只读属性

一些对象中的属性值是不希望被改变的，这时就可以使用只读属性，通过 readonly 来修饰。

interface Point {
    x: number,
    readonly y: number,
}

let p1: Point = { x: 10, y: 100 }
console.log(p1);
p1.y = 50 // 报错
console.log(p1);

当给属性 y 使用 readonly 修饰后，就不能再修改它了，因为它是一个只读属性。

7.5 属性名称检查

在 TypeScript 中，除了可以检测属性的类型外，还可以检测属性名

interface SquareConfig {
    color?: string
    width?: number
}

function createSquare(config: SquareConfig) {
    color: String
    area: Number
}

let mySqare = createSquare({ colour: "red", width: 100 }) // 出错
console.log(mySqare);

上面代码出错的原因是所传递的对象的 colour 属性在接口中没有定义。

7.6 函数类型

在接口中除了可以定义普通属性外，还可以定义函数类型

// 定义规范
interface SearchFunc {
    // 普通属性
    //str?: string
    // 函数类型，定义了一个参数的函数
    //(source: string): string
    // 定义两个参数的函数
    (age: number, gender: string): void
}
// 定义函数
let mySearch: SearchFunc = (age: number, gender: string = '男') => console.log(age, gender)
// 使用函数
mySearch(20, '女')
mySearch(25, '男')

7.7 可索引类型

可索引类型是对数组，集合进行定义的一种规范，它定义的格式为：

interface 接口名称 {
    [index: number]: 返回类型
}

使用示例：

interface StringArray {
    [index: number]: string
}
const myArr: StringArray = ['hello', 'world']
console.log(myArr);

7.8 实现接口

定义好接口后， 还可以定义一个类，让这个类实现定义好的接口
需要使用 implements 关键字来实现。

interface Person {
    name: string
    age: number
}
class Man implements Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}

const p: Man = {
    name: '张三',
    age: 20
}
console.log(p);

7.9 静态属性和静态方法

interface Person {
    name: string
    age: number
}
class Man implements Person {
    name: string
    age: number
    // 静态属性
    static gender: string
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    // 静态方法
    static show() {
        console.log(Man.gender)
    }
    // 非静态方法
    say() {
        console.log(this.name)
    }
}

const p: Man = {
    name: '张三',
    age: 20,
    say() {
        console.log(this.name)
    }
}
console.log(p.age);
//console.log(p.gender); // 报错，因为 gender 是一个静态属性
Man.gender = '男'
console.log(Man.gender)

p.say()
Man.show()

静态属性和方法需要使用 static 关键字来修饰，静态属性和方法只能通过类名来访问，不能使用实例对象来访问。

7.10 接口继承

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = {} as Square;
square.color = "blue"
square.sideLength = 10

console.log(square)

7.11 混合类型

先前我们提过，接口能够描述 JavaScript 里丰富的类型。 因为 JavaScript 其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。

一个例子就是，一个对象可以同时作为函数和对象使用，并带有额外的属性。

interface Counter {
    (start: number): string
    interval: number
    reset(): void
}
// 使用类型
function CounterFn(): Counter {
    let counter = function(start: number) {} as Counter
    counter.interval = 100
    counter.reset = function (){
        console.log(counter.interval);
    }
    return counter
}
let c = CounterFn()
c(50)
c.reset()
c.interval = 20

console.log(c);