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...");
  }
}
相关推荐
Hello_Embed4 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中5 小时前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
人工智能训练师5 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny075 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
Magnetic_h6 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
yddddddy6 小时前
css的基本知识
前端·css
昔人'6 小时前
css `lh`单位
前端·css
研梦非凡6 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
前端君7 小时前
实现最大异步并发执行队列
javascript
limengshi1383927 小时前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习