ts学习02-数据类型

新建index.html

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="./js/index.js"></script>
</body>
</html>

启动项目

bash 复制代码
npx tsc --watch

数据类型

  • 布尔类型(boolean)
  • 数字类型(number)
  • 字符串类型(string)
  • 数组类型(array)
  • 元组类型(tuple)
  • 枚举类型(enum)
  • 任意类型(any)
  • null 和 undefined
  • void类型
  • never类型

布尔类型

Boolean类型包含两个逻辑值,分别是true和false。

ts 复制代码
let flag: boolean = true;
flag = false;
flag = "";//报错
flag = 123;//报错
let trueTag: true = true;
trueTag = false;//报错,只能为true

数字类型

Number类型表⽰⼀个数字。不详细区分整数类型、浮点数类型以及带符号的数字类型等

ts 复制代码
var num:number=123;
num=456;
console.log(num);  //正确
num='str';    //错误

字符串类型

String类型表⽰⽂本字符串,它由0个或多个字符构成

ts 复制代码
var str: string = "this is ts";
str = "haha"; //正确
str = true; //错误

数组类型

ts 复制代码
// 1.第一种定义数组的方式
var arr: number[] = [11, 22, 33];
console.log(arr);
//2.第二种定义数组的方式
var arr: Array<number> = [11, 22, 33];
console.log(arr);

元组类型

元组类型(tuple) 属于数组的一种

ts 复制代码
let arr: [number, string] = [123, "this is ts"];
console.log(arr);

枚举类型

枚举类型由零个或多个枚举成员构成,每个枚举成员都是⼀个命名的常量

ts 复制代码
enum Flag {
  success = 1,
  error = 2,
}

let s: Flag = Flag.success;
console.log(s);
enum Flag2 {
  success = 1,
  error = 2,
}

let f2: Flag2 = Flag2.error;
console.log(f2);
ts 复制代码
enum Color {
  blue,//0
  red,//1
  "orange",//2
}

var c: Color = Color.red;

console.log(c); //1  如果标识符没有赋值 它的值就是下标

enum Color {
  blue,//0
  red = 3,//3
  "orange",//4
}

var c: Color = Color.orange;
console.log(c); //4

也支持负数

ts 复制代码
enum Err {'undefined'=-1,'null'=-2,'success'=1};
var e:Err=Err.success;//1
console.log(e);

任意类型

ts 复制代码
var num: any = 123;
num = "str";
num = true;
console.log(num);

//任意类型的用处
var oBox: any = document.getElementById("box");
oBox.style.color = "red";

null 和 undefined

null 和 undefined 其他(never类型)数据类型的子类型

ts 复制代码
var num1: number;
console.log(num1); //输出:undefined   报错
var num2: undefined;
console.log(num2); //输出:undefined  //正确
var num3: number | undefined;
num3 = 123;
console.log(num3);
//定义没有赋值就是undefined
var num4: number | undefined;
console.log(num4);
var num5: null;
num5 = null;
//一个元素可能是 number类型 可能是null 可能是undefined
var num6: number | null | undefined;
num6 = 1234;
console.log(num6);

void类型

typescript中的void表示没有任何类型,一般用于定义方法的时候方法没有返回值。

ts 复制代码
//正确写法
function run(): void {
  console.log("run");
}

run();

//错误写法
function run4(): null {
  console.log("run");
}

run4();

function run5(): number {
  console.log("run");
}
run5();

//新版ts这个也是正确的
function run2(): undefined {
  console.log("run");
}

run2();

//正确写法
function run3(): number {
  return 123;
}
run3();

never类型

是其他类型 (包括 null 和 undefined)的子类型,代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。

ts 复制代码
//报错的时候使用
function f(): never {
  throw new Error();
}

function infiniteLoop(): undefined {
  while (true) {
    console.log("endless...");
  }
}

function infiniteLoop2(): null {
  while (true) {
    console.log("endless...");
  }
}
//永远为true的for循环中
function infiniteLoop23(): never {
  while (true) {
    console.log("endless...");
  }
}
相关推荐
江号软件分享几秒前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长9 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
每次的天空14 分钟前
Android-重学kotlin(协程源码第一阶段)新学习总结
开发语言·学习·kotlin
Brookty14 分钟前
【操作系统】线程
java·linux·服务器·后端·学习·java-ee·操作系统
江号软件分享18 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM25 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
数字芯片实验室6 小时前
分享一个可以学习正则表达式的网址:Pythex.org
学习·正则表达式
陈洪奇7 小时前
注册中心学习笔记整理
笔记·学习