TS 常用类型与语法

发布于:2025-08-03 ⋅ 阅读:(7) ⋅ 点赞:(0)

一、any

        any的含义是:任意类型,一旦将变量类型限制为any,那就意味着放弃了对该变量的类型检测,即可以赋值任意类型。

// 明确的表示a的类型是 any —— 【显式的any】
let a: any
// 以下对a的赋值,均⽆警告
a = 100
a = '你好'
a = false
// 没有明确的表示b的类型是any,但TS主动推断出来b是any —— 隐式的any
let b
//以下对b的赋值,均⽆警告
b = 100
b = '你好'
b = false

         注意:any类型的变量,可以赋值给任意类型的变量。

let c:any
c = 9
let x: string
x = c // ⽆警告

二、unknown

        unknown的含义是:未知类型对象,适用于:起初不确定数据的具体类型,要后期才能确定。

        1.unknown可以理解为一个类型安全的any。

// 设置a的类型为unknown
let a: unknown
//以下对a的赋值,均符合规范
a = 100
a = false
a = '你好'
// 设置x的数据类型为string
let x: string
x = a //警告:不能将类型“unknown”分配给类型“string"

        2.unknown会强制开发者在使用之前进行类型检查,从而提供更强的类型安全性。

// 设置a的类型为unknown
let a: unknown
a = 'hello'
//第⼀种⽅式:加类型判断
if(typeof a === 'string'){
 x = a
 console.log(x)
}
//第⼆种⽅式:加断⾔
x = a as string
//第三种⽅式:加断⾔
x = <string>a

        3.读取any类型数据的任何属性都不会报错,而unknown正好相反。

let str1: string
str1 = 'hello'
str1.toUpperCase() //⽆警告
let str2: any
str2 = 'hello'
str2.toUpperCase() //⽆警告
let str3: unknown
str3 = 'hello';
str3.toUpperCase() //警告:“str3”的类型为“未知”

// 使⽤断⾔强制指定str3的类型为string
(str3 as string).toUpperCase() //⽆警告

三、never

        never的含义是:任何值都不是,即:不能有值,例如undefined、null、''、0都不行!

        1.几乎不用never去直接限制变量,因为没有意义,例如:

/* 指定a的类型为never,那就意味着a以后不能存任何的数据了 */
let a: never

// 以下对a的所有赋值都会有警告
a = 1
a = true
a = undefined
a = null

        2.never一般是TypeScript主动推断出来的,例如:

// 指定a的类型为string
let a: string

// 给a设置⼀个值
a = 'hello'
if (typeof a === 'string') {
 console.log(a.toUpperCase())
} else {
 console.log(a) // TypeScript会推断出此处的a是never,因为没有任何⼀个值符合此处的
逻辑
}

        3.never也可以用于限制函数的返回值

// 限制throwError函数不需要有任何返回值,任何值都不⾏,像undeifned、null都不⾏
function throwError(str: string): never {
 throw new Error('程序异常退出:' + str)
}

四、void

        void 的含义是空,即:函数不返回任何值,调⽤者也不应依赖其返回值进⾏任何操作

        1.void通常用于函数返回值声明

function logMessage(msg:string):void{
 console.log(msg)
}
logMessage('你好')

        2.以下写法比较符合规范

function logMessage(msg:string):void{
 console.log(msg)
}

// ⽆警告
function logMessage(msg:string):void{
 console.log(msg)
 return;
}

// ⽆警告
function logMessage(msg:string):void{
 console.log(msg)
 return undefined
}

        3.限制函数返回值时,undefined与void的区别:返回值类型为 void 的函数,调⽤者不应依赖其返回值进⾏任何操作!

                (1).void 是⼀个⼴泛的概念,⽤来表达“空”,⽽ undefined 则是这种“空”的具体实现。

                (2).因此可以说 undefined void 能接受的⼀种“空”的状态。

                (3).也可以理解为: void 包含 undefined ,但 void 所表达的语义超越了 undefined , void 是⼀种意图上的约定,⽽不仅仅是特定值的限制。

function logMessage(msg:string):void{
 console.log(msg)
}
let result = logMessage('你好')
if(result){ // 此⾏报错:⽆法测试 "void" 类型的表达式的真实性
 console.log('logMessage有返回值')
}

function logMessage(msg:string):undefined{
 console.log(msg)
}
let result = logMessage('你好')
if(result){ // 此⾏⽆警告
 console.log('logMessage有返回值')
}

        4.总结:如果⼀个函数返回类型为 void ,那么:

                (1). 从语法上讲:函数是可以返回 undefined 的,⾄于显式返回,还是隐式返回,这⽆所谓!

                (2). 从语义上讲:函数调⽤者不应关⼼函数返回的值,也不应依赖返回值进⾏任何操作!即使我们知道它返回了 undefined 。

五、object

        关于 object Object ,直接说结论:实际开发中⽤的相对较少,因为范围太⼤了

        1.object

        object(⼩写)的含义是:所有⾮原始类型,可存储:对象、函数、数组等,由于限制的范围⽐较宽泛,在实际开发中使⽤的相对较少

let a:object //a的值可以是任何【⾮原始类型】,包括:对象、函数、数组等

// 以下代码,是将【⾮原始类型】赋给a,所以均符合要求
a = {}
a = {name:'张三'}
a = [1,3,5,7,9]
a = function(){}
a = new String('123')
class Person {}
a = new Person()

// 以下代码,是将【原始类型】赋给a,有警告
a = 1 // 警告:不能将类型“number”分配给类型“object”
a = true // 警告:不能将类型“boolean”分配给类型“object”
a = '你好' // 警告:不能将类型“string”分配给类型“object” 
a = null // 警告:不能将类型“null”分配给类型“object”
a = undefined // 警告:不能将类型“undefined”分配给类型“object"

        2.Object

                (1).官⽅描述:所有可以调⽤ Object ⽅法的类型。

                (2).简单记忆:除了 undefined 和 null 的任何值。

                (3).由于限制的范围实在太⼤了!所以实际开发中使⽤频率极低。

let b:Object //b的值必须是Object的实例对象(除去undefined和null的任何值)

// 以下代码,均⽆警告,因为给a赋的值,都是Object的实例对象
b = {}
b = {name:'张三'}
b = [1,3,5,7,9]
b = function(){}
b = new String('123')
class Person {}
b = new Person()
b = 1 // 1不是Object的实例对象,但其包装对象是Object的实例
b = true // truue不是Object的实例对象,但其包装对象是Object的实例
b = '你好' // “你好”不是Object的实例对象,但其包装对象是Object的实例

// 以下代码均有警告
b = null // 警告:不能将类型“null”分配给类型“Object”
b = undefined // 警告:不能将类型“undefined”分配给类型“Object”

        3.声明对象类型

                (1).实际开发中,限制⼀般对象,通常使⽤以下形式

// 限制person1对象必须有name属性,age为可选属性
let person1: { name: string, age?: number }
// 含义同上,也能⽤分号做分隔
let person2: { name: string; age?: number }
// 含义同上,也能⽤换⾏做分隔
let person3: {
 name: string
 age?: number
}

// 如下赋值均可以
person1 = {name:'李四',age:18}
person2 = {name:'张三'}
person3 = {name:'王五'}

// 如下赋值不合法,因为person3的类型限制中,没有对gender属性的说明
person3 = {name:'王五',gender:'男'}

                (2).索引签名: 允许定义对象可以具有任意数量的属性,这些属性的类型可变的,常⽤于:描述类型不确定的属性,(具有动态属性的对象)。

// 限制person对象必须有name属性,可选age属性但值必须是数字,同时可以有任意数
量、任意类型的其他属性
let person: {
 name: string
 age?: number
 [key: string]: any // 索引签名,完全可以不⽤key这个单词,换成其他的也可以
}

// 赋值合法
person = {
 name:'张三',
 age:18,
 gender:'男'
}

        4.声明函数类型

let count: (a: number, b: number) => number
count = function (x, y) {
 return x + y
}

        5.声明数组类型

let arr1: string[]
let arr2: Array<string>//泛型

arr1 = ['a','b','c']
arr2 = ['hello','world']

六、tuple        

        元组 (Tuple) 是⼀种特殊的数组类型,可以存储固定数量的元素,并且每个元素的类型是已知的且可以不同。元组⽤于精确描述⼀组值的类型, ? 表示可选元素。
// 第⼀个元素必须是 string 类型,第⼆个元素必须是 number 类型。
let arr1: [string,number]
// 第⼀个元素必须是 number 类型,第⼆个元素是可选的,如果存在,必须是 boolean 类型。
let arr2: [number,boolean?]
// 第⼀个元素必须是 number 类型,后⾯的元素可以是任意数量的 string 类型
let arr3: [number,...string[]]

// 可以赋值
arr1 = ['hello',123]
arr2 = [100,false]
arr2 = [200]
arr3 = [100,'hello','world']
arr3 = [100]

// 不可以赋值,arr1声明时是两个元素,赋值的是三个
arr1 = ['hello',123,false]

 七、enum

        枚举( enum )可以定义⼀组命名常量,它能增强代码的可读性,也让代码更好维护。

         1.数字枚举

        数字枚举⼀种最常⻅的枚举类型,其成员的值会⾃动递增,且数字枚举还具备反向映射的特点,在下⾯代码的打印中,不难发现:可以通过来获取对应的枚举成员名称

// 定义⼀个描述【上下左右】⽅向的枚举Direction
enum Direction {
 Up,
 Down,
 Left,
 Right
}
console.log(Direction) // 打印Direction会看到如下内容
/* 
 {
 0:'Up', 
 1:'Down', 
 2:'Left', 
 3:'Right', 
 Up:0, 
 Down:1, 
 Left:2,
 Right:3
 } 
*/

// 反向映射
console.log(Direction.Up)
console.log(Direction[0])

// 此⾏代码报错,枚举中的属性是只读的
Direction.Up = 'shang'

         也可以指定枚举成员的初始值,其后的成员值会⾃动递增。

enum Direction {
 Up = 6,
 Down,
 Left,
 Right
}
console.log(Direction.Up); // 输出: 6
console.log(Direction.Down); // 输出: 7

        2. 字符串枚举

        枚举成员的值是字符串。

enum Direction {
 Up = "up",
 Down = "down",
 Left = "left",
 Right = "right"
}

let dir: Direction = Direction.Up;
console.log(dir); // 输出: "up

        3.常量枚举

        常量枚举是⼀种特殊枚举类型,它使⽤ const 关键字定义,在编译时会被内联避免⽣成⼀些额外的代码。

        使⽤普通枚举的 TypeScript 代码如下:

enum Directions {
  Up,
  Down,
  Left,
  Right
}

let x = Directions.Up;

        编译后⽣成的 JavaScript 代码量较⼤ :

"use strict";
var Directions;
(function (Directions) {
  Directions[Directions["Up"] = 0] = "Up";
  Directions[Directions["Down"] = 1] = "Down";
  Directions[Directions["Left"] = 2] = "Left";
  Directions[Directions["Right"] = 3] = "Right";
})(Directions || (Directions = {}));

let x = Directions.Up;

        使⽤常量枚举的 TypeScript 代码如下:

const enum Directions {
 Up,
 Down,
 Left,
 Right
}

let x = Directions.Up;

         编译后⽣成的 JavaScript 代码量较小 :

"use strict";
let x = 0 /* Directions.Up */;

八、type

        type 可以为任意类型创建别名,让代码更简洁、可读性更强,同时能更⽅便地进⾏类型复⽤和扩展。

        1.基本用法

        类型别名使⽤ type 关键字定义, type 后跟类型名称,例如下⾯代码中 num 是类型别名。
type num = number;

let price: num
price = 100

        2. 联合类型

        联合类型是⼀种⾼级类型,它表示⼀个值可以是⼏种不同类型之⼀。
type Status = number | string
type Gender = '男' | '⼥'

function printStatus(status: Status) {
 console.log(status);
}
function logGender(str:Gender){
 console.log(str)
}

printStatus(404);
printStatus('200');
printStatus('501');
logGender('男')
logGender('⼥')

        3.交叉类型 

         交叉类型(Intersection Types)允许将多个类型合并为⼀个类型。合并后的类型将拥有所有被合并类型的成员。交叉类型通常⽤于对象类型

//⾯积
type Area = {
 height: number; //⾼
 width: number; //宽
};
//地址
type Address = {
 num: number; //楼号
 cell: number; //单元号
 room: string; //房间号
};

// 定义类型House,且House是Area和Address组成的交叉类型
type House = Area & Address;
const house: House = {
 height: 180,
 width: 75,
 num: 6,
 cell: 3,
 room: '702'
};

九、一种特殊情况

        使⽤限制函数返回值为 void 时, TypeScript 并不会严格要求函数返回空。

type LogFunc = () => void
const f1: LogFunc = () => {
 return 100; // 允许返回⾮空值
};

const f2: LogFunc = () => 200; // 允许返回⾮空值
const f3: LogFunc = function () {
 return 300; // 允许返回⾮空值
};

         这是为了确保如下代码成⽴,我们知道 Array.prototype.push 的返回值是⼀个数字,⽽ Array.prototype.forEach ⽅法期望其回调的返回类型是 void

const src = [1, 2, 3];
const dst = [0];

//函数使用简写时,会把仅有的那一句函数内容作为返回值,即会把dst.push(el)作为返回值
src.forEach((el) => dst.push(el));