TS的基本类型

134 阅读4分钟

什么是Typescript?

  • 增加了类型的概念,在js的基础上
  • js不适合开发大型应用,因为js是一门弱类型的语言
  • 有了ts之后会提供丰富的代码提示
  • 正常写js需要等待运行的时候才能发现错误,我们在开发的时候就能检测到一些错误
  • js在出生的时候就定义好了,它的目的就是弱类型的,js是不会增添类型的
  • 长期以往下去,js与ts是共存的
  • ts开发一些库,或者矿建(代码更稳定,可以检测错误)
  • 最终ts代码,都需要转化成js才能运行,都是通过构建工具转化ts语法

初始化项目

  • pnpm init -y

构建工具,我们采用rollup

  • pnpm install typescript rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve -D

项目根目录创建rollup.config.js配置文件

image.png

  • 配置打包入口、出口、ts转换插件、让rollup能够像node一样自动找index文件

生成ts配置文件

  • npx tsc --init

更改tsconfig.js

image.png

  • rollup打包出的模块必须是ESNext

修改package.json命令

image.png

执行打包命令

  • npm run dev

打包结果

image.png

将bundle.js引入index.html中

image.png

下面们就可以在src下的index.ts来进行ts的代码测试了

学习ts的原则

  • ts有很多内置类型,比如dom、promise,这些内置类型都在typescript模块中,除了内置类型之外还有基础类型,我们掌握了基础类型之后,我们就可以自定义一些类型了。
  • ts中的类型都在变量后面,:后面的都是类型,= 后面的是值
  • ts类型要考虑安全性,一切从安全的角度上触发
  • 明白什么时候要写类型,什么时候不需要写了类型,ts中有类型推导,会自动根据赋予的值来返回类型,只有无法推导或者把某个值赋予给某个变量的时候,我们需要添加类型
  • 用ts开发好处是提示多,缺点就是要额外的编写类型
  • 尽可能的避免写any,如果写了any就表示不检测了,但是有的时候还是得写any的
  • ts在使用的时候,程序还没有运行

ts基础类型

image.png

  • string number boolean

问题:为什么类型都是小写呢?为什么不是String呢?

image.png

  • 当你赋值一个字符串的时候,类型大小写都可以,但是当你赋值一个new String('xxx')的时候,类型是string就不可以了,但是你可以用String来描述,因为String可以描述实例类型,同时它也可以描述字符串类型
  • 我们标识类型的时候,基本类型全部用小写的,如果描述实例则用类的类型(类可以描述实例,在ts中叫类的类型)

比如:

image.png

  • 因为我们只想赋值一个基本类型,而String范围太大,所以我们用string来描述

数组类型

  • 在js中我们可以在数组中想存什么类型值就存什么类型值,其实不然。数组真实的概念是存储一类类型的东西

image.png

  • 方式一:直接类型加[]
  • 方式二:联合类型
  • 方式三:泛型

元组类型

  • 元组的特点就是固定长度、固定类型、固定顺序的一个数组
  • 取值的时候只能通过已有的属性取值
  • 元组可以用数组的push方法追加值,但是你通过所以是取不到你追加的这个值,因为规定不能通过不安全的手段来取值

image.png

枚举类型

  • 有多组值组成的,都可以采用枚举
  • 枚举的值会自动根据第一个的值来递增,里面是数字的时候可以反举
  • 要么你不给初始值,要不你就给数字,如果你给一个字符串,同时后面是没给初始值的值,它就不认了,因为枚举成员必须具有初始化表达式,这叫异构枚举,表示存储的类型不统一

image.png

image.png

但是这种可以

image.png

正举和反举示例

image.png

image.png

常量枚举

  • 如果枚举前加const,它会把里面的值变成数字,,或者变成字符串直接打印出来,对象就不再转化了,不会生成对象

image.png

  • 这个时候你就不能访问这个对象了,必须具体访问里面的某个属性

null和undefined

  • 在非严格模式下,null和undefined可以互相赋值,严格模式下null只能给null,undefined给undefined

image.png

标识函数返回值

  • void只能在函数的返回值里来用
  • void标识的是空,undefined也是空,所以undefine可以赋值给void

image.png

never

  • 永远无法到达的
  • 如果一个方法走不完的话就是never
  • 一般标识never都是用户自己来标识,告诉代码无法执行
  • never是任何类型的子类型,可以赋值给任何类型
  • 可以用never来实现完整性保护

image.png

never使用场景

image.png

symbol类型

image.png

BigInt类型

image.png

object类型

image.png

any类型

  • 任意类型,一旦写了any之后,那任何的校验都会实效\
  • 如果不给类型,默认就是any类型