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
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 完成项目搭建。