vue3+ts

安装ts：

全局安装typescript:    npm install -g typescript

查看typescript版本 ：   tsc -V

1.新建一个ts文件

里面写上：

(()=>{
    function sayHi(str){
        return '你好啊'+str
    }
    let text ='小甜甜'
    console.log(sayHi(text))
})()

点击ts文件所在目录，右击在终端打开---在终端输入tsc ./01_第一次ts.ts文件，点击回车，会生成一个js文件，在html页面中引入js文件，就可以运行了

2.vscode中自动编译：

新建一个目录，在目录上右击运行终端输入tsc --init会生成一个tsconfig.json文件

将tsconfig.json文件中的修改成下面这样

                                        “outDir”:'./js'

                                        "strict":false

启动监视任务：点击tsconfig.json点击终端中的运行任务-显示所有任务，找到tsc监视

数组和元租类型

数组类型：

//数组定义方法一：语法为：let变量名：数据类型【】=【值1，值2，值3】

let arr1:number[]=[1,2,3,4,5]

//数组定义方法二：这是反省写法 ， 语法为：let变量名：Array<数据类型>=【值1，值2，值3】

let arr2:Array<number>=[1,2,3,4,5]

注意：数组定义后。里面的数据类型必须是和定义数组时类型一致，否则会有错误提示信息，也不会编译成功。

元组类型：可以支持各种数据   在定义数组的时候，类型和数据的个数一开始就已经限定了

let arr3:[string,number,boolean]=['小甜甜'，12，true]

注意问题：元组类型在使用的时候，数据类型的位置和数据的个数应该和在定义元组的时候的数据类型及位置应该是一致的

枚举：  枚举里面烦人每个数据值都可以叫元素，每个元素都有自己得编号，编号是从0开始，一次递增加一

枚举中的元素可以是

enum Color={

red,

green,

blue

}

//定义一个color的枚举类型的变量来接收枚举的值

let color:Color =Color.red

console.log(Color.red,Color.green,Color.blue)//打印出来是从0开始的，0，1，2

any: 

let str:any=100;//打印出来就是100

str='年少不知富婆好，误把少女当作宝',,//打印出来为：年少不知富婆好，误把少女当作宝

当一个数组中要存储多个数据，个数不确定，类型不确定，此时也可以使用any类型来定义类型

let arr:any[]=[100,'年少不知软饭香，错把青春到插秧'，true]//打印时会把数组里面内容打印出来

void:  在函数声明的时候，在小括号后加用:void，代表该函数没有返回值

function showMsg()：void{

console.log('只要富婆把握住，连夜搬进大别墅')

}

console.log(showMsg())

object类型：

//定义一个函数，参数是object类型，返回值也是object类型

function getObject(obj:object):object{

console.log(obj)

return {

name:'张三',

age:27

}

}

console.log(getObject(name:''里斯'',age:13))

联合类型： 表示取值可以为多种类型中的一种

//定义一个函数得到一个数字或字符串值的字符串形式值

function getString(str:number|string):string{

return str.tostring

}

类型断言： 告诉编译器，我知道我自己是什么类型，也知道自己在干什么

类型断言语法方式1：<类型> 变量名

类型断言语法方式2：值 as 类型    -return（str as string）

定义一个函数得到一个数字或者字符串的长度

function getString(str:number|string):number{

//如果有长度

if((<string>str).length){

return str.length

}else{

return str.toString().length

}

}

类型推断：

let txt=100;打印出来100，推测出来给一个number类型

接口：是对象的状态（属性）和行为（方法）的抽象（描述）

接口：是一种类型，是一种规范，是一种规则，是一个能力，是一种约束

//定义一个接口，该接口作为person对象的类型使用，限定或者是约束该对象中的属性数据

interface IPerson{

readonly id:number,//这个地方放readonly只读不能进行修改

name:string,

sex？:string//加这个问号，代表下面对象里面这个性别可有可无

}

//定义一个对象，该对象的类型就是我定义的接口

const person:IPerson={

id:1,

name:'小甜甜',

//这个性别可以没有

sex:'女'

}

类的类型：

//定义一个接口

interface ISwim{

swim()

}

//定义一个类，这个类的类型就是ISwim

Class Person implements ISwim{//如果放多个值：Class Person implements   IFly，ISwim

swim(){

console.log('我会游泳')

}

}

//实例化对象

const person = new Person();

person.swim()//这是调用类里面的swim

//总结：类可以通过接口的方式，来定义当前这个类的类型

//类可以实现一个接口，类也可以实现多个接口，要注意，接口中的内容都要真正的实现

//接口可以继承多个接口

1.定义一个接口，继承其他多个接口

inteface IMyFlyAndSwim extends IFly,ISwim{}

2.定义一个类，直接实现IMyFlyAndSwim这个接口

Class Person implements IMyFlyAndSwim{

fly(){

console.log('我会飞了')

}

swim(){

console.log('我会游泳了')

}

}

const person = new person()

person.fly()

person.swim()

总结：接口和接口之间叫继承（使用的是extends的关键字），类和接口之间叫实现（使用的是implaments）

ts中类的定义和使用：

Class Person{

name:string

age:number

gender:string

constructor(name:string='小甜甜'，age:number=16,gender:string='女'){

//更新对象中的属性数据

this.name=name

this.age=age

this.gender=gender

}

}

//定义实例方法

sayHi(str:string){

console.log(`大家好，我是${this.name},今年已经${this.age}了，是个${gender}孩子`，str)

}

//ts中使用类，实例化对象，可以直接进行初始化操作

const person =new Person('张三'，18，‘男’)

person.sayHi('你叫什么名字啊')

vue3+ts里面用let 和var 定义变量会报错，可以在.eslintrc.js中添加：

"rules":{'prefer-const':'off'}