TS练手使用

重中之重

Vue组合式API和TS

初试TS

const hello =(msg:string)=>{
    console.log('hello'+msg)
}
hello('world')
hello(123)  //此处报错

但执行tsc后即使有报错，但仍然会编译成JS文件

var hello = function (msg) {
    console.log('hello' + msg);
};
hello('world');
hello(123);

元组

let use:[string,number]=['abc',123]
user=['def',456]

初学的时候感觉元组没啥用

接口

用来给对象定义的类型

interface Iperson{
    name:string
    age:number
}
const person:Iperson={
    name:'123',
    age:123
}

可以约定接口名字前面加上I。

接口

给函数定义类型

function add(a: number, b: number): number {
  return a + b
}
interface ISum {
  (a: number, b: number): number
}
const add2: ISum = add

类型推论

let a='str'
//TS会把a推论成String类型，
a=123 //报错

联合类型

let numOrStr:Number | String = 123

当访问numOrStr的length属性时会报错，因为Number类型没有length属性。只能访问Number和String类型共同拥有的属性。numOrStr.toString（）不会报错

类型断言

as修饰符---numOrStr as String

const getLength = (s: string | number): number => {
  const str = s as string
  if (str.length) {
    return str.length
  } else {
    const num = s as number
    return num.toString().length
  }
}

类型保护

有了if (typeof s === 'string') {}，就不会出现报错。

const getLength = (s: string | number): number => {
  if (typeof s === 'string') {
    return s.length
  } else {
    return s.toString().length
  }
}

枚举

没太看明白，枚举有啥用

const enum Direction {
up='up',
down='wown',
left='left',
right='right'
}