Ts +Vue3 基础介绍

一、安装Ts(typeScript)：运行npm install -g typescrtpt or yarn add global typescript
执行tsc -v查看是否安装成功
二、还是一样编写第一个helloword

// hello.ts
function hello (person) {
	return "hello" + person
}
let text = 'word'
console.log(hello(text))
执行tsc hello.ts
node hello.js
// hello word

三、类型注解
注解的意思就是给参数或函数等加基础类型：

function greeter (person: string) {
  return 'Hello, ' + person
}

let user = [0, 1, 2]

console.log(greeter(user))

这样写就会产生错误，函数形参接受的是string类型的参数而我们传给了一个数组类型。ts其实支持跟js相同的数据类型。
example：
let 变量名 ：数据类型 = 值
1、布尔值(boolen)：let isBoolen = false; isBoolen =true;
2、数字(number)：let a1:number=10;
3、字符串(string)：let name:string = “range”;
4、undefined 和 null ：let u: undefined = undefined；let n: null = null
5、数组（[ ]）:表示方法1：let list1:number[ ] =[1,2,3,]；表示方法2：let list2 :Array = [1,2,3]；
6、元组(元组允许表示一个已知元素数量和类型的数组):

let t1: [string, number]
t1 = ['hello', 10] // OK
t1 = [10, 'hello'] // Error
当访问一个已知索引的元素，会得到正确的类型：
console.log(t1[0].substring(1)) // OK
console.log(t1[1].substring(1)) // Error, 'number' 不存在 'substring' 方法

7、枚举 enum 类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。
枚举里面的每个数据值都可以叫元素，每个元素都有自己的编号，编号是从0开始的依次递增加

enum Color {
  Red,
  Green,
  Blue
}
// 枚举数值默认从0开始依次递增
// 根据特定的名称得到对应的枚举数值
let myColor: Color = Color.Green  // 0
console.log(myColor, Color.Red, Color.Blue)

8、any类型,any代表所有类型，只要使用了any就不对数据做监控了。

let notSure: any = 4
notSure = 'maybe a string'
notSure = false // 也可以是个 boolean

9、void 某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void

/* 表示没有任何类型, 一般用来说明函数的返回值不能是undefined和null之外的值 */
function fn(): void {
  console.log('fn()')
  // return undefined
  // return null
  // return 1 // error
}
声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null：
let unusable: void = undefined

10、object 表示非原始类型，也就是除 number，string，boolean之外的类型。

function fn2(obj:object):object {
  console.log('fn2()', obj)
  return {}
  // return undefined
  // return null
}
console.log(fn2(new String('abc')))
// console.log(fn2('abc') // error
console.log(fn2(String))

11、类型断言
类型断言有两种形式。 其一是“尖括号”语法, 另一个为 as 语法1

/* 
类型断言(Type Assertion): 可以用来手动指定一个值的类型
语法:
    方式一: <类型>值
    方式二: 值 as 类型  tsx中只能用这种方式
*/

/* 需求: 定义一个函数得到一个字符串或者数值数据的长度 */
function getLength(x: number | string) {
  if ((<string>x).length) {
    return (x as string).length
  } else {
    return x.toString().length
  }
}
console.log(getLength('abcd'), getLength(1234))

四、接口接口是对象的状态(属性)和行为(方法)的抽象(描述)

//定义一个接口。这里的interface跟后台的接口定义类型还是有区别的；
//创建人的对象，需要对人的属性进行一定的约束
interface Person {
  firstName: string
  lastName: string
  readonly id:number // 可以在属性名前用readonly来指定该属性的只读性。一旦赋值之后就不能更改了
}
// 定义函数形参使用接口的约束
function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}
// 定义用户信息，数据必须满足接口类型。
let user = {
  id:2,
  firstName: 'Yee',
  lastName: 'Huang'
}

console.log(greeter(user))
// Hello,Yee Huang

// 函数类型：为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
/* 
接口可以描述函数类型(参数的类型与返回的类型)
*/

interface SearchFunc {
  (source: string, subString: string): boolean
}
// 类类型
/* 
类类型: 实现接口
1. 一个类可以实现多个接口
2. 一个接口可以继承多个接口
*/

interface Alarm {
  alert(): any;
}

interface Light {
  lightOn(): void;
  lightOff(): void;
}

class Car implements Alarm {
  alert() {
      console.log('Car alert');
  }
}
//一个类可以实现多个接口
class Car2 implements Alarm, Light {
  alert() {
    console.log('Car alert');
  }
  lightOn() {
    console.log('Car light on');
  }
  lightOff() {
    console.log('Car light off');
  }
}
//接口继承接口
interface LightableAlarm extends Alarm, Light {

}

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

五、类 可以理解为模版，用过模版可以实例化对象
面对对象的编程思想
1、直接上代码

class User {
	//定义属性
  fullName: string
  firstName: string
  lastName: string
	// 定义构造函数：为了将来实例化对象的时候，可以直接对属性的值进行初始化。
  constructor (firstName: string, lastName: string) {
  	// 更新对象中的属性数据
    this.firstName = firstName
    this.lastName = lastName
    this.fullName = firstName + ' ' + lastName
  }
  // 定义实例方法
  say(str:string){
	console.log('大家好,欢迎进入前端坑。')	
  }
}

interface Person {
  firstName: string
  lastName: string
}

function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = new User('Yee', 'Huang')

console.log(greeter(user))

2、多态 父类型的引用指向了子类型的对象，不同类型的对象针对相同的方法，产生了不同的行为
3、修饰符 默认为public，private为私有的，protected跟private很相似，但是protected成员在派生类中仍然可以访问
4、存储器 让我们可以有效的控制对 对象中的成员访问，通过getters和setters来进行操作

	class Person {
        firstName: string // 姓氏
        lastName: string // 姓氏

        constructor(firstName: string, lastName: string) {
            this.firstName = firstName
            this.lastName = lastName
        }
        // 设置器
        set fullName(val:string){
            let names = val.split('_')
            this.firstName = names[0]
            this.lastName = names[1]
        }
        //读取器
        get fullname() {
            return this.firstName + '' + this.lastName
        }
    }
    const person: Person = new Person('东方', '不败')
    console.log(person)
    console.log(person.fullname)
    // 设置该属性的数据
    person.fullName = '诸葛_孔明'
    console.log(person)

5、静态属性(static)

  // 静态属性  
    class Person {
        // 类默认有一个内置的name属性，所以呢，此时会出现错误的提示信息
        // 静态属性
        static name1: string = '佐助'

        // 构造函数是不能通过static来进行修饰的
        constructor() {
            // 此时的this是实例对象，name1是静态属性，不能通过实例对象直接调用静态属性来使用
            // this.name1 = name
        }
        // 静态方法
        static sayhi() {
            console.log('萨瓦迪卡')
        }


    }
    // 实例对象
    // const person: Person = new Person()
    // 通过实例对象调用的属性(实例属性)
    // console.log(person.name1)
    // 通过实例对象调用的方法 (实例方法)
    // person.sayhi()
    console.log(Person.name1)
     // 通过类名.静态属性的方式来设置该成员数据
    Person.name1 = 'naledou'
    console.log(Person.name1)
    // 通过类名.静态方法来调用内部的静态的方法
    Person.sayhi()

6、抽象类

  	抽象类：包含抽象方法(抽象方法一般没有任何的具体内容的实现)，也可以包含实例方法，抽象类是不能被实例化，为了让子类进行实例化及实现内部的抽象方法

    abstract class Animal {
        // 抽象方法
        // 报错，抽象方法不能有具体的实现
        // abstract eat(){
        //     console.log('趴着吃')
        // }
        abstract eat():any

        sayhi(){
            console.log('您好啊')
        }
    }

    class Dog extends Animal {
        // 继承父类eat，在子类进行实现
        eat(){
            console.log('趴着吃')
        }
    }
    
    // 实例化Dog的对象
    const dog:Dog = new Dog()
    console.log(dog.eat())
    console.log(dog.sayhi())

到这里我们ts基本已经差不多了解，下面进行vue3的项目搭建。
1、使用vue-cli创建
安装或升级脚手架npm install -g @vue/cli然后执行vue -V查看我们的脚手架版本vue3必须要4.0以上版本。
直接执行vue create vue3Dome即可搭建。
2、使用vite-app进行创建
如果你没有vite工具，你可以执行npm install -g create-vite-app来安装vite工具。这里为什么我们推荐用vite呢。说实话他的启动跟人更新速度是真的快。
然后相应执行npm init vite-app cd npm install npm run dev完成项目搭建。