Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

  • JavaScript

  • Vue2

  • port

  • CSS

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

    • 基础

      • TypeScript介绍
      • TypeScript基础类型
        • TypeScript基础类型
          • Boolean类型
          • Number类型
          • String类型
          • Enum类型
          • Array类型
          • arguments类数组
          • 元组( Tuple )类型
          • undefined和null
          • any类型
          • unknown类型
          • void类型(空置类型)
          • never类型
      • TypeScript对象类型
      • TyprScript类型推论
      • TypeScript高级类型
      • TypeScript接口
      • TypeScript类型别名与接口的区别
      • TypeScript泛型
      • TypeScript项目配置
    • 实例

  • 面向对象编程

  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

  • 前端
  • TypeScript
  • 基础
HiuZing
2022-09-27
目录

TypeScript基础类型

# TypeScript基础类型

# Boolean类型

const flag: boolean = true;
1

# Number类型

const count: number = 10;
1

# String类型

let name: string = "小宝贝";
1

# Enum类型

枚举类型用于定义数值集合,使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例

  • 普通枚举

    初始值默认为 0 其余的成员会会按顺序自动增长 可以理解为数组下标

    enum Color {
      RED,
      PINK,
      BLUE,
    }
    
    const red: Color = Color.RED;
    console.log(red); // 0
    
    1
    2
    3
    4
    5
    6
    7
    8
  • 设置初始值

    enum Color {
      RED = 2,
      PINK,
      BLUE,
    }
    const pink: Color = Color.PINK;
    console.log(pink); // 3
    
    1
    2
    3
    4
    5
    6
    7
  • 字符串枚举

    enum Color {
      RED = "红色",
      PINK = "粉色",
      BLUE = "蓝色",
    }
    
    const pink: Color = Color.PINK;
    console.log(pink); // 粉色
    
    1
    2
    3
    4
    5
    6
    7
    8
  • 常量枚举

    使用 const 关键字修饰的枚举,常量枚举与普通枚举的区别是,整个枚举会在编译阶段被删除 我们可以看下编译之后的效果

    const enum Color {
      RED,
      PINK,
      BLUE,
    }
    
    const color: Color[] = [Color.RED, Color.PINK, Color.BLUE];
    console.log(color); //[0, 1, 2]
    
    //编译之后的js如下:
    var color = [0 /* RED */, 1 /* PINK */, 2 /* BLUE */];
    // 可以看到我们的枚举并没有被编译成js代码 只是把color这个数组变量编译出来了
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

# Array类型

对数组类型的定义有两种方式:

// 推荐  
const arr: number[] = [1,2,3];
const arr2: Array<number> = [1,2,3];

// 二维数组
let arr:number[][]=[[1],[2],[3]]
// 或者
let arr:Array<Array<number>> = [[1],[2],[3]]
1
2
3
4
5
6
7
8

# arguments类数组

function Arr(...args:any): void {
    console.log(arguments) 
    //ts内置对象IArguments 定义
    let arr:IArguments = arguments
}
Arr(111, 222, 333)
 
//其中 IArguments 是 TypeScript 中定义好了的类型,它实际上就是:
interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 元组( Tuple )类型

上面数组类型的方式,只能定义出内部全为同种类型的数组。对于内部不同类型的数组可以使用元组类型来定义

const tuple: [number, string] = [1, "zhangmazi"];
1

注意:元组类型只能表示一个已知元素数量和类型的数组,长度已指定,越界访问会提示错误。

例如,一个数组中可能有多种类型,数量和类型都不确定,那就直接any[]。

场景:在地图中,使用经纬度坐标来标记位置信息

可以使用数组来记录坐标,那么该数组只有两个元素,并且这两个元素都是数值类型

let position: [number, number] = [39.3123, 116.332]
1
const arr:readonly[x:number,y:number] = [1,false]
type first = typeof arr['length']
1
2

# undefined和null

默认情况下 null 和 undefined 是所有类型的子类型(可以把 null 和 undefined 赋值给其他类型)

let a: undefined = undefined;
let b: null = null;

let str: string = 'zhangmazi';
str = null; // 编译正确
str = undefined; // 编译正确
1
2
3
4
5
6

如果你在tsconfig.json指定了"strictNullChecks":true,即开启严格模式后, null 和 undefined 只能给它们自己的类型赋值

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误
1
2
3
4
5

但是 undefined 可以给 void 赋值

let c:void = undefined // 编译正确
let d:void = null // 编译错误
1
2

# any类型

any会跳过类型检查器对值的检查,任何值都可以赋值给any类型

let value: any = 1;
value = "zhangmazi"; // 编译正确
value = []; // 编译正确
value = {};// 编译正确
1
2
3
4

# unknown类型

unknown与any一样,所有类型都可以分配给unknown:

let value: unknown = 1;
value = "zhangmazi"; // 编译正确
value = false; // 编译正确
1
2
3

unknown与any的最大区别是:

任何类型的值可以赋值给any,同时any类型的值也可以赋值给任何类型。unknown 任何类型的值都可以赋值给它,但它只能赋值给unknown和any

# void类型(空置类型)

无效的, 一般只用在函数上,告诉别人这个函数没有返回值。

function sayHello(): void {
	console.log("hello!");
}
1
2
3

# never类型

永不存在的值的类型

例如never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

值会永不存在的两种情况:

  • 1 如果一个函数执行时抛出了异常,那么这个函数永远不存在返回值(因为抛出异常会直接中断程序运行,这使得程序运行不到返回值那一步,即具有不可达的终点,也就永不存在返回了)
  • 2 函数中执行无限循环的代码**(死循环)**,使得程序永远无法运行到函数返回值那一步,永不存在返回。
// 异常
function error(msg: string): never { // 编译正确
  throw new Error(msg); 
}

// 死循环
function loopForever(): never { // 编译正确
  while (true) {};
}
1
2
3
4
5
6
7
8
9

具体来源 (opens new window)

#TS
上次更新: 2024/08/14, 04:14:33
TypeScript介绍
TypeScript对象类型

← TypeScript介绍 TypeScript对象类型→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式