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类型
  • 类型:

    类型例子描述
    number1, -33, 2.5任意数字
    string‘hi’, “hi”, hi任意字符串
    booleantrue、false布尔值true或false
    字面量其本身限制变量的值就是该字面量的值
    any*任意类型
    unknown*类型安全的any
    void空值(undefined)没有值(或undefined)
    never没有值不能是任何值
    object{name:‘孙悟空’}任意的JS对象
    array[1,2,3]任意JS数组
    tuple[4,5]元素,TS新增类型,固定长度数组
    enumenum{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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值