vue3学习_vue3与typescript_持续更新
持续更新vue3的知识点,有需要的可以联系要资料
vue3学习_vue3与typescript_持续更新-MakerLi

1.先学习typescript

1.1它的来历

typescript诞生于2012年10月,由安德斯·海尔斯伯格开发。他也是c#的首席架构

1.2他的特点

  • 始于javascrit,归于javascript
  • 强大的类型系统
  • 先进的javascript

它非常适用大型项目

1.3它的安装

 cnpm i typescript -g 
 npm i typescript -g

查看是否安装成功

tsc -v

如果有版本出来则是安装成功,现在版本4.6.3

1.4VsCode的自动编译

生成配置文件tsconfig.json   没有的话可以使用 tsc --init
修改tsconfig.json的配合
"outDir":"./js",//输出目录
"strict":false,//关闭严格模式
启动vscode的监视任务:
菜单-》终端-》执行任务-》监视tsconfig.json

1.5基础类型

布尔类型:boolean

数字类型:number

字符串类型:string

数组:number[] 或者Array<number>

元祖类型:[string,number,boolean] (定义数组的时候,类型和数据的个数一开始就已经限定了);

枚举类型 enum

any类型:any (不确定的任何类型)

viod类型:void(没有类型,常见于函数没有返回值)

object类型:object

!TS中变量一开始是什么类型,那么后期复制的时候,只能用这个类型的数据,是不允许用其他类型的数据赋值,非严格模式下面的子类型除外

undefined与null是其他类型的子类型

let num:number=null;
console.log(num);//null

1.6联合类型

function getString(str:number|string):string{
  return str.toString()
}

1.7类型断言

告诉编译器,知道自己是什么类型,也知道在做什么

方式1:<string>str

方式2:(str as string)

function getString(str:number|string):number{
  if((<string>str).length){
    return (<string>str).length
  }else{
    return str.toString().length
  } 
}

1.8类型推断

let text=100; //编译器会推断为数字类型

1.9接口

接口是对象的状态属性和行为方法的抽象描述,是一种类型、规范、规则、能力、约束

interface IPerson{

readonly id:number

name:string

age:number

sex?:string

}