typescript基本数据类型02（笔记）

// typescript类型补充
// 类型断言 as
const el = document.getElementById('main') as HTMLImageElement
el.src = "url地址"

// 案例 
class Person {
}
class Student extends Person {
    studying() {
    }
}
function sayHello(p: Person) {
   ( p as Student).studying()
}
const stu = new Student()
sayHello(stu)

// 3.（不推荐使用）
const messages = 'hello'
const num: number = (messages as any) as number // 先转成any或者unknown类型再转


// 非空类型断言 ！
function printMessageLength(message?: string){
    if(message) {
        console.log(message.length);
    }
    console.log(message!.length); // 非空类型断言
}
printMessageLength('Hello World')
printMessageLength('哈哈哈哈')
printMessageLength()


// 可选链的使用 es11增加的新特性  ?  当对象属性不存在的时候会短路
// optional check
type Person2 = {
    name: string
    friend?:{
        name: string
        age?: number
    }
}
const infos4: Person2 = {
    name: 'why',
    friend: {
        name: 'kobe'
    }
}
// 另外一个文件中
console.log(infos4.name);
console.log(infos4.friend!.age);
console.log(infos4.friend?.age);


// ！！转Boolean类型
const message5 = 'hello'
const flag2 = Boolean(message5)
console.log(flag2);
const flag3 = !!message // 相当于把message当成boolean类型来使用


// ？？操作符 es11增加的新特性 控制合并操作符
let message6: string | null = 'hello'
const content = message6 ?? "你好啊 李银河" // 判断message6是否有值，如果有值就就取自己，没有就取后端的字符串
console.log(content);

// 字面量类型
// "hello world"也是可以作为类型的， 叫做字面量类型
const message7: 'hello world' = "hello world"
let num11: 123 = 123
// num11 = 321 字面量类型只能是它自己
// 字面量类型的意义，必须结合联合类型才有意义
type Alignment = 'left'|'right'|'center'
let align: Alignment = 'left'
align = 'right'
align = 'center'


// 字面量推理
const info6 = {
    name: 'why',
    age: 18
}
info6.name = 'kobe'

type Method = 'GET'|'POST'
function request(url: string, method: Method) {
}
// 方法一
// type Request = {
//     url: string,
//     method: Method
// }
// const options: Request = {
//     url: 'https://www.coderwhy.org/abc',
//     method: 'POST'
// }
// 方法二
type Request = {
    url: string,
    method: Method
}
const options: Request = {
    url: 'https://www.coderwhy.org/abc',
    method: 'POST'
}
request(options.url, options.method as Method)


// 类型缩小（类型保护）
// 1.typeof 2.平等缩小（比如===， ！==） 3.instanceof 4.in 等等
type IDtype = number | string
function printIds(id:IDtype){
    if(typeof id === 'string'){
        console.log(id.toUpperCase());
    } else {
        console.log(id);
        
    }
}
// 2.平等的类型缩小（比如===，==， ！==）
type Direction = 'left'|'right'|'top'|'bottom'
function printDirection(direction: Direction) {
    if(direction === 'left') {
        console.log(direction);
    } 

    switch (direction){
        case 'left':
            console.log('left');
            break
        case 'right':
            console.log('right');
            break    
    }   
}

// 3.instanceof
function printTime(time: string|Date) {
    if(time instanceof Date) {
        console.log(time.toUTCString());
    } else {
        console.log(time);
    }
}

class Student1 {
    studying() {}
}
class Teacher {
    teaching(){}
}
function work(p: Student1 | Teacher) {
    if(p instanceof Student1) {
        p.studying()
    } else {
        p.teaching()
    }
}

// 4. in
type Fish = {
    swimming: () => void // 函数类型
}
type Dog = {
    running: () => void
}
function walk(animal: Fish | Dog){
    if('swimming' in animal) {
        animal.swimming()
    } else {
        animal.running()
    }
}
const fish: Fish = {
    swimming() {
        console.log('swimming');
    }
}
walk(fish)


// typescript函数类型
/**
 * 参数可以有类型注解
 * 函数的类型：
 * JavaScript里面函数是一等公民 可以作为参数 也可以作为返回值
 * 
 * 
 */
// 函数作为参数时，在参数中如何编写类型
function foo9() {}
type FooFnType = () => void
function barr(fn: FooFnType) {
    fn()
}
barr(foo9)

// 2.定义常量时 编写的类型
type AddFuncType = (num1: number, num2: number) => number
const add:AddFuncType  = (a1: number, a2: number) =>{
    return a1 + a2
}
// 练习
function calc(n1:number, n2: number, fn:(num1: number, num2: number)=>number ) {
    return fn(n1, n2)
}
const result1 = calc(20, 30, function(a1, a2){
    return a1+a2
})
console.log(result1);
const result2 = calc(20, 30, function(a1, a2){
    return a1*a2
})
console.log(result2);
// 3.函数参数的可选类型
// 可选类型必须写在必选类型的后面
// y -> undefined | number
function foox(x: number, y?:number) {
}
foox(20, 30)
foox(20)

// 参数的默认值
function fooy(x:number = 20, y:number) {
    console.log(x, y);
}
fooy(20, undefined)
fooy(undefined, 40) // null的值不能传给undefined

// 参数的剩余值
console.log(123, 'abc')
function sumx(...nums: number[]) {
    let total = 0
    for(const num of nums) {
        total = num
    }
    return total
}
sumx(20,30)
sumx(20,30,40)
sumx(20,30,40,50)

// 可推导的this类型
// 以后会越来越少的用到this了
// this可以被推导出来 infod对象
const infod1 = {
    name: 'why',
    eating1(){
        console.log(this.name + "eating");
    }
}
infod1.eating1()

// 这里就推导不出来 会报错
function eating2(this){
    console.log(this.name + "eating");
}
const infod2 = {
    name: 'why',
    eating2: eating2
}
// 隐式绑定
infod2.eating2()
// 显式绑定
eating2.call({name:'kobe'})
eating2.apply({name:'james'})