1.快速了解类型注解和数据类型

类型注解

作用是进行类型声明,通过它可以对变量的数据类型进行限制。

基本语法:

(变量/函数) : 类型
let username: string = '小书生'
let age: number = 30

注意:

  • 类型注解时,数据类型使用小写(比如使用 number 而不是 NumberNumber本身代表一个对象)。

  • 默认情况下,全局下不要使用 name 作为变量名,会被认为和 window 对象的 name属性重名。

联合类型:

// result 变量的值的类型可以是 string 或者 number
let result: string | number
result = 100
result = '优秀'

类型推断:

在没有明确指出类型的地方 TypeScript 可以根据默写规则自动推断出其类型。

// 这里并没有指定age的类型, 但是TS根据赋的值100,推断age的类型为number
let age = 100

字面量类型:

自定义类型功能比较多,我们先简单了解一个简单的用法:

let username: '张三' | '李四' | number
username = 100
username = '张三'
username = '李四'
// 这个会报错
username = '如花'

TypeScript 除了支持 JS 中见到的数据类型外(numberstringbooleanundefinednullobjectsymbolarrayfunction),还新增了几个数据类型:tuple(元组类型)、enum(枚举类型)、any(任意类型)、void类型、never类型等。

简单数据类型

TypeScript 除了支持 JS 中见到的数据类型外(numberstringbooleanundefinednullobjectsymbolarrayfunction),还新增了几个数据类型:tuple(元组类型)、enum(枚举类型)、any(任意类型)、void类型、never类型等。

numberstringboolean

// 字符串类型
let username: string = '小书生'
// 数值型
let age: number = 30
// 布尔型
let haveGirlfriend: boolean  = true

undefinednull

nullundefinedts 中的基础类型,分别具有值 nullundefined

// 这好像没啥意义
let xxx: null = null
let yyy: undefined = undefined

// 多个类型的时候就有了意义
let age: number | undefined
age = 25

nullundefined 作为值的时候,当strictNullChecks 配置项的值为 false 的情况下,它们是所有类型的子类型,即可以将它们赋值给任意类型。

let username: string = '如花'
username = undefined
username = null

strictNullChecks 配置项的值为 true 的情况下,上面的代码会报错。

any 类型

表示 “任意” 数据类型,当变量的类型不确定且有可能发生变化时,可以定义为 any,此时 typescript 会跳过类型检查器对值的检查,变量的数据类型可以被随意更改,这其实会带来一些安全隐患。

// 任何类型的值,都可以为 any 类型的变量赋值
let res: any = '如花'
res = 100
res = false
res = null
console.log(res);

any 类型的值,也能给其它任何类型的变量赋值,其实这很容易写出报错的代码,并不推荐过度使用 any 类型

let res: any = false
let username: string
let age: number

username = res
age = res
console.log(username);
console.log(age);
console.log(age.toFixed(2));

unknown 类型

当一个变量的类型暂时不确定时,可以使用unknown用来限制其类型。与 any 类型一样,所有类型的值都可以分配给它。

let res: unknown = '如花'
res = 100
res = false
res = null
console.log(res);

不过,它还是和 any 类型有点区别的:unknown 类型的值只能赋值给 类型为 unknownany 类型的变量。

let res: unknown = '如花'
let xxx: unknown
let yyy: any
let zzz: string
// 将 unknown 类型的值赋给 any 和 unknown 类型的变量
xxx = res
yyy = res
// 这种将 unknown 类型的值赋给 string 类型的变量,是不被允许的
zzz = res

void 类型

定义函数:

typescript 中,定义函数的时候,要为形参和返回值指定类型注解。基本语法:

function 函数名(形参1: 类型注解, 形参2: 类型注解): 返回值类型注解 {
   // 函数体
}

示例代码:

function numSum(x: number, y: number): number {
   return x + y
}
numSum(1, 3)

当函数没有返回值时,实际上返回的就是 undefinedvoid 通常用来表示函数返回值为 undefined 或者 null

function numSum(x: number, y: number): void {
   console.log(x + y);
}
numSum(1, 3)

never 类型

表示”永不存在的值“类型,一般指总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式及函数中执行无限循环的代码(死循环)的返回值类型。

function numSum(): never {
   throw new Error('遇到错误')
}
numSum()

// 死循环
function loopForever(): never {
   while (true) { }
}

object 类型

当将numberstringboolean 类型的值赋值给 object 的类型变量时都会报错,如果开启严格模式,nullundefined 赋值给它的时候也会报错。

let o1: object = {}
let o2: object = function (): void { }
let o3: object = []


微信 遇到疑问可加微信进行反映