类型别名_字符串字面量类型_元组

最新推荐文章于 2024-03-16 14:46:08 发布

目标达成

最新推荐文章于 2024-03-16 14:46:08 发布

阅读量916

点赞数

分类专栏： typescript 文章标签： typescript 类型别字符串字面量类型元组

本文链接：https://blog.csdn.net/liucai1018/article/details/100776280

版权

typescript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>类型别名_字符串字面量类型+元组</title>
        <script src="type.js"></script>
    </head>
    <body>
    </body>
</html>

//类型别名与字符串字面量类型都是使用 type 进行定义
//类型别名:用来给一个类型起个新名字--常用于联合类型
type Str = string;//给string类型起个别名为str
type Num = number;//给number类型起个别名为num
type StrOrNum = Str|Num;//给string|number的联合类型起个别名为strOrNum
function getNameOrAge(value:StrOrNum){
    if((typeof value)=='string'){
        return `name:${value}`;
    }else{
        return `age:${value}`;
    }
}
console.log(getNameOrAge('纪宁'));
console.log(getNameOrAge(80));


//字符串字面量类型
type ColorType = 'red'|'green'|'blue';//如果let color:ColorType，那么color的值只能取这几个
function getColor(color:ColorType){
    return color;
}
console.log(getColor('red'));//red
// console.log(getColor('red1'));//error


/**
 * 在元组之前，先试一下普通的数组
 * 通过下面的试验可以发现普通数组里面如果有不同类型的元素，则取到某个元素之后，只能调用这个数组中所有类型的公共方法，不能识别当前元素的类型
 * 如果要调用当前元素对应类型的方法，可以通过类型断言来实现
 */
let com = ['hello',1];//com[0或1]只能调用toString()和valueOf()，因为这是string类型和number类型公共的方法
let com2 = ['hello',[1]];//com[0]可以调用string类型和数组公共能调用的方法
let tmpCom = (com[0] as string).toUpperCase();//类型断言，还可以这种形式<string>com[0]
console.log(tmpCom);

//元组:确定长度，确定类型的数组
let yz:[string,number] = ['hello',1];//定义一个长度为2，类型为[string,number]的数组
yz[0].toUpperCase();//这里拿到第0个元素，可以不用通过类型断言，直接就知道是string类型，因此可以直接调用string类型的方法
yz[1].toFixed();

//元组在初始化时(必须要进行初始化)，必须为全部的元素赋值
let yz2:[string,number] = ['hello',2];//如果少了或者多了都报错
//注：以下这种方式也属于初始化
let yz22:[string,number];
yz22 = ['hello',1];//初始化：因此需要全部赋值
// yz22 = ['hello'];//不全赋值报错

//对于这种语法不确定的，可以查看编译完成的js文件，如这个地方从js文件中就可以看出来:let yz222;yz222[0] = 'fds'，由此可见肯定是错误的
// let yz222:[string,number];//这里虽然不会报错，但其实这里语法是错误的，只是说yz222是个[string,number]的类型，但变量并没有初始化，是个undefined，所以没法访问第0个，
// yz222[0] = 'fds';

//越界的元素:它的类型会被限制为元组中每个类型的联合类型
let yz4:[string,number] = ['hello',4];
yz4.push('world');//OK
// yz4.push(true);//error
// yz4[5] = 'f';//这里语法报错，但是又可以在浏览器上运行出来，看type.js文件中语法没问题，应该是解析器的问题
// console.log(yz4);//["hello", 4, "world"]
// console.log(yz4.length);//3
// console.log(yz4[2]);//同上可以在浏览器运行出来