好处

在不适用typescript(ts)的情况下我们声明一个变量和函数是这样的

  1. var 变量 =value
  2. let 变量 =value
  3. const 变量 =value
  4. function func (){}
  5. var/let/const func = () =>{}

像上面这样value可以是任意类型,func的返回值也是不知道返回的是啥,这样在之后的代码编写维护和可读性上就不是那么如意了比如说:

  1. let arg1 = 'asf'
  2. function demo(args){
  3. var newParam = arg1.split('')
  4. }
  5. //在arg1 没被更改前 或者 传递的参数类型是字符串类型是调用demo,值返回是正确的
  6. //demo(arg1)// ['a','s','f']
  7. //在arg1 被重新赋值更改后 或者 传进的参数不是字符串类型是 调用demo,的话
  8. arg1 = [1,2,3,4]
  9. demo(arg1) //报错,数组上没有split方法。 为了不报错就需要在函数体内做兼容处理
  10. // function demo (args){
  11. // var args = typeof args === 'string' ? args : " "
  12. // var newParam = args.split("")
  13. // }

在使用了typescript的类型限制后:

  1. let arg1 string = 'str'
  2. function demo(args:string):[]{
  3. }

这样的话在 更改arg1 的时候如果赋值的不是string类型的话会直接报错,显示不能把非string类型的值赋值给arg1.
function demo(args:string)在函数传参是我们就知道传递的参数必须要传string类型的参数,就不需要在函数体内部进行兼容性的处理了。并且还知道了函数返回值是一个数组。
在这样过后对于以后维护和阅读性就方便明了许多了。

类型限制

简单类型

数字类型、字符串、数组、布尔、null和undefined、object、symbol

  1. let num :number
  2. let str :string
  3. let arr :[]
  4. let boo :boolean
  5. let n :null
  6. let u :undefined
  7. let obj :object
  8. let sym :symbol

TS 新增类型

ts新增的数据类型:元组,枚举、any、void、never、unknown

元组

元组:固定长度和元素类型的数组

  1. let tuple:[string,numer,boolean]
  2. tuple = ['a',1,false]
  3. tuple = [2,'b',false] //报错,不能把number类型的赋值给string,不能把string类型赋值给number类型
  4. tuple =['c',3] //报错 Property '2' is missing in type '[string, number]' but required in type '[string, number, boolean]'

枚举

枚举:关键字enum 这一类型常在面向对象里使用

  1. enum List{
  2. A,
  3. B,
  4. C,
  5. }

这里的三个值,在没有赋值的情况下,ts会默认为它们从零开始依次分配,(A=1,B=2,C=3)
也可以自定义赋值(A = a, B=3, C=false)

  1. enum List {
  2. A ='a',
  3. B =2,
  4. C =false
  5. }

,也可以赋值某一个,其他使用默认递增的 (A=0,B=7,C=8)

  1. enum List{
  2. A
  3. B =7,
  4. C
  5. }

枚举里面的值也可以通过计算的来,通过计算得来的,写个必须要写初始值

  1. enum List{
  2. A :getValue(),
  3. B :2,
  4. C
  5. }

any

ang :任意类型,不要滥用any类型建议使用unknown类型,当变量指定为any类型时,变量可以时javas中的任意类型

void

void:和any相反。被void限制的变量只能被赋值为null和undefined,在限制函数时,表示函数没有返回值

  1. function demo():void {
  2. }

unknown

unknown:表示未知的类型,和any很像,但比any安全

never

never:表示用不存在的值的类型,通常是那些总会抛出错误或者根本不会有返回值的函数表达式的返回值类型

  1. function demo () :never{
  2. throw new Error()
  3. }
  4. function demo () :never{
  5. while (true){}
  6. }

never 类型可以赋值给任何类型

接口-interface

定义任意结构,描述函数类型,定义对象的结构、定义对象中的每个key的类型:规定传入的对象必须要满足接口定义的结构

  1. Interface obj ={
  2. param1:number
  3. param2:string
  4. }
  5. const func = ({param1,param2}:obj)=>{
  6. }

可选属性

在接口规定的对象中可传可不传

  1. Interface obj={
  2. param1: number,
  3. param2: string,
  4. param3?: string
  5. }

多余属性检查:

在传入了一个接口规定的对象中没有的属性时,typescript就会报错,所以接口除了有可选属性除外其他情况传入的对象都必须时属性个数和属性值类型于接口规定的一致

绕开多余属性检查

如果我们只需要保证传入的对象只要有我们需要的属性就可以,实际上传入的对象可能有其他属性无所谓时,就需要绕开多余属性检查,三个方法:

使用类型断言:
  1. Interface obj={
  2. param1: number,
  3. param2: string,
  4. param3?: string
  5. }
  6. const func = ({
  7. param1,
  8. param2
  9. }:obj )=>{}
  10. func({
  11. param1:1,
  12. param2:'canshu',
  13. param4:'duoyu'
  14. } as obj)

添加索引签名

利用类型兼容性

接口小结:

aHR0cHM6Ly9pbWcxLnN5Y2RuLmltb29jLmNvbS81Y2Y0YmZkMjAwMDEyYmFlMTYwMDA4MjAuanBn.jpg