1.Vite创建项目
npm init vite@latest
之后选择配置就可以创建
创建成功后根据提示先进行 npm install
再进行 npm run dev
2.TypeScript基础
2.1 类型注解
2.1.1 基础类型
基础类型主要包括number,string,boolen
//boolean,number,string
var isMan:boolean = true //boolen
var age:number=18 //number
var studentName:string="tt"//String
2.1.2 数组类型
有两种声明方式，number[] 和 Array 其中number可以替换成指定类型或者自己定义的接口。
//number[] or Array<number> 数组
var classAges:number[]=[18,20,21,17];
var classAges2:Array<number>=[17,16,10,1]
2.1.3 元组
元组（tuple）的概念不再阐述。
在Ts中元组定义方式为[类型，类型]
//[string , number] 元组
var studentInfo:[string,number] = ["tt",15];
2.1.4 any和void
相反的两个类型，一个是全部类型，一个是任何类型都不是
//any 任意
var anyData:any = 123 //or "tt" or [1,2,3]
//void 无类型
function warning():void{ //无返回值
console.log("this warning info");
}
2.1.5 枚举类型
枚举类型用于提供有限的选择，其中枚举选项的值可以自定义，如未定义默认为index。
// 枚举 限定可能性
enum color {red,green,blue}
var r:color = color.red; //0
var g:color = color.green //1
var b:color = color.green//2
enum studentNames {tt=11,zz=1}
var t:studentNames = studentNames.tt; //11
var z:studentNames = studentNames.zz //1
2.1.6 object非原始类型
主要用于声明一个Object
2.1.7 联合类型
多种类型中取一种 语法为 类型1|类型2
var unionData:number|string = 1 //or "a" 只要是联合类型中的一种就行
2.1.8 类型断言
指定联合类型中的一种，相当于告诉编译器我知道这是xx类型
// 语法:
// 方式一: <类型>值
// 方式二: 值 as 类型 tsx中只能用这种方式
//相当于告诉编译器 我知道这个数据是联合类型中的哪一种类型
function asData(a:number|string):string{
return a as string;
}
2.1.9 类型推断
在未指定类型时会自己判断初始化的值，并用作类型
/* 定义变量时赋值了, 推断为对应的类型 */
var data1 = 1; //number
/* 定义变量时没有赋值, 推断为any类型 */
var data2; // any
2.2 接口
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型
接口: 是对象的状态(属性)和行为(方法)的抽象(描述)’
相当于自定义一个类型
/*
需求: 创建人的对象, 需要对人的属性进行一定的约束
id是number类型, 必须有, 只读的
name是string类型, 必须有
age是number类型, 必须有
sex是string类型, 可以没有
*/
interface Person{
readonly id:number; //只读 readonly
name:string;
age:number;
sex?:string; // ?:可以没有
}
var tt:Person={
id:2018906139,
name:"tt",
age:18,
}
var zz:Person={
id:2018906133,
name:"zz",
age:27,
sex:"女"
}
2.3 类
使用方法和ES6的方法相差不大
class person{
name:string;
age:number;
constructor(name:string,age:number){
this.name=name;
this.age=age;
}
sayhi():void{
console.log("hi"+" my name is "+this.name+" age is "+this.age);
}
}
var tz = new person("tt",21);
class student extends person{
id:number;
constructor(name:string,age:number,id:number){
super(name,age); //继承
this.id=id;
}
sayhi(){
console.log("I am student");
}
}
2.3.0 可选标识（?:）
如下，创建实例时可以选择是否设置age
class person{
name:string;
age?:number;
}
2.3.1 权限修饰符和存取器
公共（public），私有(private)与受保护(protected)
默认public
protected和private相似，但是protected在派生可以被访问
存取器：getters/setters
class animal{
private name:string;
get getName():string{
return this.name;
}
set setName(name:string){
this.name=name;
}
}
2.3.2 静态属性和非静态属性
静态属性, 是类对象的属性
非静态属性, 是类的实例对象的属性
class Person1 {
name1: string = 'A'
static name2: string = 'B'
}
2.3.3 抽象类
抽象类
不能创建实例对象, 只有实现类才能创建实例
可以包含未实现的抽象方法
abstract class Animal {
abstract cry()
run() {
console.log('run()')
}
}
class Dog extends Animal {
cry() {
console.log(' Dog cry()')
}
}
2.4 泛型
指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定具体类型的一种特性。
泛型的出现可以提高。
function demo01<T>(info:T){ //使用时传入的类型会替换变量T，T可以自定义
console.log(info);
}
demo01("Hi,This String");
demo01(123);
多个泛型
function swap<K, V>(a: K, b: V): [K, V] { //多个泛型
return [a, b]
}
泛型接口
interface IbaseCRUD<T> {
data: T[]
add: (t: T) => void //返回值是函数 返回函数的返回值是void
getById: (id: number) => T //返回值是函数 返回函数的返回值是T
}
泛型类
class GenericNumber<T> {
zeroValue: T
add: (x: T, y: T) => T
}
3.Vue3.0+Ts实现TodoList
3.1基础知识
3.1.1 VScode环境配置
拓展需要从vuetor ->volar 否则报错
3.1.2 setup
- 新的 option, 所有的组合 API 函数都在此使用, 只在初始化时执行一次
- 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
代码中的样子 这是语法糖，省略了大量步骤
<script setup lang="ts">
</script>
3.1.3 响应式声明
在创建函数想要能够访问必须使用ref或者reactive;
<script setup lang="ts">
//响应式绑定Proxy
import { reactive, ref } from "@vue/reactivity";
//返回Proxy对象
const user=reactive({ //对象响应式
name:"tt",
age:12
})
var changename=ref(""); //单个数据响应式
function changeName(){
user.name=changename.value;
}
</script>
3.1.4 更多特性
参考文档：尚硅谷
官方文档:官方文档
视频课：尚硅谷_BiliBili
3.2 全局挂载声明方式(vue-cookies为例)
main.ts 中进行声明，此处需要手动改动，在mount之前进行全局配置
import { createApp } from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies'
const app = createApp(App)
app.config.globalProperties.$cookies=VueCookies; //初步导入 index.d.ts声明 才能使用
app.mount('#app')
配置完main.ts,需要在main.ts同级目录中创建index.d.ts用于配置用户自定义组件
import { VueCookies } from "vue-cookies";
//全局配置Cookies
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$cookies: VueCookies;
}
}
在需要使用的地方头部进行引入
const { proxy } = getCurrentInstance();
之后使用 proxy就可以进行调用了
proxy.$cookies.set("something","info")
proxy.$cookies.get("something")
以上代码相当于
this.$cookies.set("something","info")
this.$cookies.get("something")
TODOList中实际不需要使用到，但是出于探索精神进行探索学习。
3.3 TodoList开发
<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import { getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from "@vue/runtime-core";
const { proxy } = getCurrentInstance();
interface standEvent{
name:string,
status:boolean,
}
var todoList:standEvent[]=reactive<standEvent[]>(getTodo())
var eventName= ref("")
function addlist(){
let list:standEvent = {
name:eventName.value,
status:false
}
todoList.push(list);
eventName.value=""
}
function changeColor(index:number,todo:standEvent){
let id = "td"+index;
let theTag = document.getElementById(id) as HTMLElement;
if(!todo.status){
theTag.style.background="red"
}else{
theTag.style.background=""
}
}
function getId(index:number){
return "td"+index
}
function getBId(index:number){
return "btn"+index
}
function btnShow(index:number){
let btn = document.getElementById("btn"+index) as HTMLElement;
btn.style.visibility = "visible"
}
function btnHideen(index:number){
let btn = document.getElementById("btn"+index) as HTMLElement;
btn.style.visibility = "hidden"
}
function delTheTodo(index:number){
todoList.splice(index,1)
let tds = document.getElementsByTagName("td")
for(let i=0;i<tds.length;i++){
let td = tds[i] as HTMLElement;
td.style.background=""
}
}
function delFinsh(){
let newlist = []
for(let i=0;i<todoList.length;i++){
if(todoList[i].status){
newlist.push(i)
}
}
console.log(newlist);
for(let i=0;i<newlist.length;i++){
todoList.splice(newlist[i],1);
}
let tds = document.getElementsByTagName("td")
for(let i=0;i<tds.length;i++){
let td = tds[i] as HTMLElement;
td.style.background=""
}
}
function addcookie(){
localStorage.setItem("todo",JSON.stringify(todoList) )
}
function getTodo(){
let data = localStorage.getItem("todo")
if(data!=undefined){
return JSON.parse(data);
}else{
return [];
}
}
</script>
<template>
<table id="table">
<tr>
<th><input id="add" type="text" v-model="eventName"><button @click="addlist()">确认添加</button><button @click="addcookie()">保存</button></th>
</tr>
<tr v-for="(todo,index) in todoList">
<td :id="getId(index)" @mouseover="btnShow(index)" @mouseout="btnHideen(index)">
<input type="checkbox" @click="changeColor(index,todo)" v-model="todoList[index].status" >
{{todo.name}}
<button style="visibility: hidden;" @click="delTheTodo(index)" :id="getBId(index)">删除</button>
</td>
</tr>
<tr>
<button @click="delFinsh()">删除已完成</button>
</tr>
</table>
</template>
<style>
#table{
margin: 0 auto;
}
td{
border: 1px solid black;
}
</style>
相当简单，其中没有使用到更多新特性。
3.4 vue3 + Ts的生命周期及对应方法
1、beforeCreate -> 使用 setup()
2、created -> 使用 setup()
3、beforeMount -> onBeforeMount
4、mounted -> onMounted
5、beforeUpdate -> onBeforeUpdate
6、updated -> onUpdated
7、beforeDestroy -> onBeforeUnmount
8、destroyed -> onUnmounted
9、errorCaptured -> onErrorCaptured
代码获取
仓库地址：https://gitee.com/Tyler_Tang/Vue3TsToDoList