← 返回首页
Vue3基础教程(十)
发表时间:2021-08-04 16:35:43
object和联合类型

1.object object 表示非原始类型,也就是除 number,string,boolean等基本类型之外的类型。

export {}
//定义一个函数介绍一个对象类型参数,返回对象类型
function fn (obj:object):object{
    console.log();
    return {
        name:'zhangsan',
        age:20
    }
}

console.log(fn(new String('hello'))); //ok
//fn(100); //error
console.log(fn({msg:'hi'}))//ok

2.联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种。

需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值。

function toString(x: number | string) : string {
    return x.toString()
}

console.log(toString(1000));

需求2: 定义一个函数得到一个数字或字符串值的长度。

function getLength(x: number | string) :number{

    if (x.length) { // error
        return x.length
    } else {
        return x.toString().length
    }
}

编译有如下错误:

Property 'length' does not exist on type 'string | number'.   Property 'length' does not exist on type 'number'.

我们需要使用类型断言, 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。 TypeScript 会假设你,程序员,已经进行了必须的检查。

注意:在 tsx 语法(React 的 jsx 语法的 ts 版)中必须使用前者,即 值 as 类型。 因此建议大家在使用类型断言时,统一使用 值 as 类型 这样的语法,本案例也会贯彻这一思想。

改写如下:

function getLength(x: number | string) :number{
    if ((x as string).length) {
        return (x as string).length
    } else {
        return x.toString().length
    }
}


console.log(getLength("hello"));
console.log(getLength(1000));

3.类型推断 类型推断: TS会在没有明确的指定类型的时候推测出一个类型 有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型. 2. 定义变量时没有赋值, 推断为any类型。

/* 定义变量时赋值了, 推断为对应的类型 */
let b9 = 123 // number
// b9 = 'abc' // error

/* 定义变量时没有赋值, 推断为any类型 */
let b10  // any类型
b10 = 123
b10 = 'abc'