TypeScript 使用文档（1）——变量类型规则

搭建 TS 开发环境

全局安装

npm i -g typescript

检验安装是否成功

tsc

在命令行中输入tsc，回车后若出现一堆东西时，就证明是安装成功了。

TS 类型声明

• 通过类型声明可以指定TS中变量（参数+形参）的类型
• 指定类型后，当为变量赋值时，TS编译器会自动检查这些值是否符合类型，不符合则报错

1 基本语法

1.1 变量类型声明

// 方式一:声明一个变量 同时指定它的类型为number或boolean
let 变量名:变量类型；
变量名=变量值；

若声明赋值同时进行，ts可以自动对变量进行类型检查。

// 方式二
let 变量名:变量类型=变量值；
// 等价于
let 变量名=变量值； // TS会根据你的赋值，自动设置变量类型

1.2 函数类型声明

// 方式三
function Fn(形参1:类型,形参2:类型):返回值类型{
    ...
}

// 示例
function Fn(a:number, b:number) :number{
    return a + b
}
let result = Fn(2,3) // 此处的返回值result为number，是由function Fn():number{} 此处的number定义的
let result = Fn(2,"3") // 报错 形参类型不符合 

2 类型

类型名称	示例	解释	备注
number	1，-10，3.14	任意数字
string	“一段文字”	字符串
boolean	true 或 false	布尔值
字面量	赋值本身	限制变量的值就是字面表示的值，不可更改
any	*	任意变量	不轻易使用
unknown	*	未知变量	any的高级安全版
void	空值undefined null	空值	函数——无返回值
never	没有值	不能是任何值	函数——抛错
object	{propname:‘data’}	对象	重点：如何定义不同属性情况的对象
array	[1,2,3]	数组	重点：定义不同类型的数组
tuple	[1,2]	固定长度的数组
enum	enmu name{a=1,b=0}	枚举	方便开发者观察，例（男1，女0）

2.1 基本类型

基本类型主要包括number数字、string字符串、boolean布尔值，三种类型。

以下是以number为例的基本使用示例：

// 1 声明一个变量a，同时指定他的类型为number，并赋值123
let a1:number = 123

let a2:number
a2 = 123
a2 = "123" // 报错

运算符 | 或，满足其中一个条件即可

// 2 声明一个变量a 同时指定它的类型为number或boolean
let a3: number | boolean
a3 = 123
a3 = true
a3 = null // 报错

2.2 字面量

将变量直接声明成一个基本常量，即使是同类型的其他值都不可以再次声明。

// 声明b1变量的类型为数字1
let b1:1; 
b1 = '1'; // 报错——不同类型

let b2:'hello' | 'goodbye';
b2 = 'hello'
b2 = 'nice' // 报错——虽同类型但和定义的不同：不同值

2.3 any 和 unknown

• any 任意类型
  • 所定义的变量可以被赋值任何类型
  • 当将any定义的变量，赋值给其他变量时，其他变量会被污染，类型也变成any。
• unknown 未知类型
  • 当将unknown定义的变量，赋值给其他变量时，需要进行类型声明（类型断言），告诉解析器变量的实际类型，不然报错。
  • 类型断言的声明方式，共有两种：

    // 方式一
    变量名 as 类型
    
    // 方式二
    < 类型 > 变量名
    

【 any 】

// 相当于 let c1 定义变量时默认为any
let c1:any 
// any 不管赋什么类型的值均不报错
c1 = 123;
c1 = '123';
c1 = true;

【 unknown 】

let c2: unknown = 123
let o: number = 0

// 将c2 123 的值赋给o
// 方式一
o = c2 as number // 结果 o：number = 123
// 方式二
o = <number>c2

2.4 void 和 never

【 void 】

void 在函数中，表示返回值为空，即没有返回值 不能写return 。

function Fn(a:number,b:number) :void {
    无返回值的函数
    return true // 报错
}

【 never 】

never 在函数中 永远不会有返回结果。

function Fn() :never {
    throw new Error("错误")
}

2.5 object

• object 定义的类型 可以包括{} [] function 等 ，所以重点关注如何定义，具有不同属性情况的对象。
• { } 用来指定对象中可以包含哪些属性，语法：{属性名：属性值，属性名：属性值}

2.5.1 变量为对象 { } ——存储任意属性值

let 变量名 : { }

let d1: {}
d1 = { color: "red", num: 0.5 }

2.5.2 含有特定属性的对象 { }

let 变量名 : {属性名：属性值，... }

注意：定义的变量，里面的属性不能多、不能少，即完全要按照设定的 模板 来定义。

let d2:{ name: string, age: number }
d2 = { name: '张三', age: 18 }
d2 = { name: "张三" } // 报错

2.5.3 有固定属性+不固定属性 （但不能随意添加别的属性！）

let 变量名 : {属性名：属性值，属性名?：属性值，... }

let d3: { name: string, age?: number }
d3 = { name: "李四" } // age 可有可无

2.5.4 有固定属性+任意属性

let 变量名 : { 属性名：属性值,[ 任意字符 : string ] : any }

[ 任意字符 : string ] : any 表示任意属性:任意值

[ xxx : string ] 属性的类型为string，xxx为任意值，表示为propname

any 表示任意类型的属性值

let d4: { name: string, [xxx: string]: any }
d4 = { name: "王五", color: "yellow", life: true }

2.6 实例函数

// 必须为箭头函数！！
(形参：类型，形参：类型...)=>返回值类型 

示例：定义一个函数，要求形参有两个，且属性值必须是number，返回值也是number

// 定义基本结构
let d5: (m1: number, m2: number) => number
// 赋值函数
d5 = function (a: number, b: number): number {
  return a + b
}

2.6 array

声明数组中所有的元素均为某一种类型，声明方式：

// 方式一
类型 [ ]

// 方式二
Array<类型>

// 定义全都是字符串类型的数组
// 方式一
let e1: string[] 
e1 = ["123", "456"]
e1 = ["123", 456] // 报错

// 方式二
let e2: Array<number>
e2 = [1, 2, 3]
e2 = [1, 2, true] // 报错

2.7 元组

固定长度的数组

// 定义变量为只有两个值的数组
let f: [string, number] 
f = ["123", 123]
f = ["123"] // 报错

2.8 enum

[ 语法 ]

// 定义语法
enum 枚举名 {
    子名称=原值，
    子名称=原值，
    ...
}
// 应用语法
let 变量名:{ 属性名:枚举名 } = { 属性名:枚举名.子名称 }

使用时，不需要再设置0、1 ，直接通过枚举的方式，可以一眼就看到是男是女的信息。

// 定义枚举
enum sexEnum {
    man=1，
    woman=0
}

// 使用枚举
let g:{ name: string, sex: sexEnum }
g = { name: "张三" , sex: sexEnum.man} // sex真正存储的是0

2.9 其他：类型别名

type 名称 = 类型

type num = 1 | 2 | 3 | 4 | 5
let j: num
j = 1
j = 6 // 报错