ts总结 之 ts中的类型

其他内容
ts中的类型
编译选项
webpack打包
类

ts是什么

• 以javascript为基础，来构建的语言
• 它是一个javascript的超集，它对js进行了扩展，并添加了 类型
• 兼容所有js平台
• 不能被js解析器直接执行（即.ts文件不可以被执行），需要将ts代码编译成js

ts增加了什么

• 类型
• 支持es的新特性，支持js所有内容
• 添加了es不具有的新特性：抽象类、接口
• 丰富的配置选项（可严格、可松散、可以把ts编译成es3等版本，兼容型好，）
• 强大的开发工具
• 有提示

TypeScript中的基本类型

• 类型声明

  • 通过类型声明可以指定TS中变量（参数、形参）的类型；

  • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；

  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；

• 自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
    let a = 30 ,此时a默认为number类型

• 类型：

  类型	例子	描述
  number	1, -33, 2.5	任意数字
  string	‘hi’, “hi”, hi	任意字符串
  boolean	true、false	布尔值true或false
  字面量	其本身	限制变量的值就是该字面量的值
  any	*	任意类型
  unknown	*	类型安全的any
  void	空值（undefined）	没有值（或undefined）
  never	没有值	不能是任何值
  object	{name:‘孙悟空’}	任意的JS对象
  array	[1,2,3]	任意JS数组
  tuple	[4,5]	元素，TS新增类型，固定长度数组
  enum	enum{A, B}	枚举，TS中新增类型

字面量

//不可改变，有点像常量
let a: 10
a = 11 
// 不可设置为出字面量以外的值
let b: 'male' | 'false'
b = 'male'
b = 'false'
b = 'hello' 
// 既限定类型又给出初始值
let color: string = 'red'
color = 'blue'

number

let a: number;
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

boolean

let a: boolean;
let b = true;

string

let a: string;
let color: string = 'red'
color = 'blue'

any

表示任意类型，一个变量设置为any，相当于关闭了该变量的类型检测

any可以赋值给任意类型的变量

let d: any;
d = 'hello';
d = true;
// any可以赋值给任意类型的变量
let s: string;
s = d

unknown

实际上是一个安全类型的any
unknown 类型的变量不能赋值给任意类型的变量

let e: unknown
e = 10
e = 'hello'
e = true
let s: string;
s = e //报错

类型断言

手动指定一个值的类型

• 语法：
  • 变量 as 类型
  • <类型>变量

s = e as string
s = <string>e

void

用来表示空，以函数为例，就表示没有返回值或undefined

function fn(): number | string | void {
  return undefined
}

never

表示没有返回值

function fn2(): never {
  throw new Error('报错了')
}

object

{} 用来指定对象中可以包含哪些属性

• 语法
  • {属性名:属性值} 表示必须要有的属性
  • 属性名?:属性值 表示可选属性
  • [propName: string]: any 表示属性名为字符串类型，属性值为任意类型

let b: { name: string, age?: number }
b = { name: '孙悟空', age: 18 }
b = { name: '孙悟空' }
let c: { name: string, [propName: string]: any }
c = { name: '猪八戒', a: 1, b: 2 }

function

设置函数结构的类型声明

• 语法：
  • (形参：类型，形成:类型)=> 返回值类型

let d: (a: number, b: number) => number
d = function (n1, n2): number {
  return n1 + n2
}

array

• 语法：
  • 类型[]
  • Array<类型>

let e: string[]
e = ['a', 'r', 'fdsf']

let g: Array<number>
g = [23, 43, 123]

tuple

元组就是固定长度的数组
由于长度固定，变化数量少，存储效率比数组高

• 语法
  • [类型，类型，类型]

let h: [string, number]
h = ['h', 123]

enum

enum Gender {
  Male,
  Female
}
let i: { name: string, gender: Gender }
i = {
  name: '孙悟空',
  gender: Gender.Male // 'male'
}
console.log(i.gender === Gender.Female)

& 表示同时

• 语法：
  let j: { name: string } & { age: number }
  j = { name: ‘孙悟空’, age: 18 }

类型的别名

• 语法：
  type myType = 1 | 2 | 3 | 4

let k: myType
let l: myType