01-TS基础入门

1. TypeScript 介绍

1. TypeScript 的定位是静态类型语言，在写代码的阶段就能检查错误，而非运行阶段
2. 类型系统是最好的文档，增加了代码的可读性和可维护性
3. 有一定的学习成本，需要链接接口 interfaces、泛型 generics、类 classes 等
4. ts 最后被编译成 js

1.1 变量声明

// 类型推断
var myname:string = "jerry"   // 定义 myname 只能为字符串类型，其他类型赋值编写就报错
var myname1 = "hello"  //隐式类型推断
myname.substring(0, 1)

var myage:number = 100.34
myage = parseInt(myage.toFixed(2)) 
console.log(myage)

var myvalue:string|number = 100  // | 或，两种类型都可以
myvalue = "300"

// 数组
var mylist:string[] = ['jerry', 'tom', 'spike']
mylist.push('lucy')

var mylist2:number[] = [1, 2, 3]
mylist2.push(100)

var mylist3:(string|number)[] = ['jerry', 18]
mylist3.push(20)
mylist3.push('tom')

var myany:any = "123"     // any类型 就失去了 ts 类型检查的能力了 - 能不用就不用
myany = {}
myany = []

// 第二种风格: 泛型写法
var mylist4:Array<string> = ['aaa', 'bbb']
var mylist5:Array<string|number> = ['ccc', 10]
var mylist6:Array<any> = ['ddd', 11, {}, []]

// 对象
var myobj = {
    name: 'jerry',
    age: 18
}
interface InterObj {        //接口形式定义对象的字段和类型
    name:string,
    age:number,
    location?:string        //?可选属性
    [propName:string]:any   //可以不限制添加额外属性
}
var myobj1:InterObj
myobj1 = {
    name: 'tom',
    age: 20,
    a: {},
    b: []
}

1.2 函数

// 函数：限定形参类型、返回值类型
function test(a: number, b: number):number {
  return a + b
}

var mynum:number = test(1, 2)

1.3 ts+选项式API

参考 vue 官网：https://cn.vuejs.org/guide/typescript/options-api.html

不推荐，官方更推荐与 组合式 api使用。

• 注意：接口类型限定
• 注意：类型断言

<template>
  <div>
    voa app - {{ myname }}
    <button @click="handleChange">click</button>
    <ul>
      <li v-for="(item, index) in list" :key="item">{{ item }}</li>
    </ul>
    <div ref="mydiv">测试</div>
    输入框：<input type="text" ref="myintput">
  </div>
</template>

<script lang="ts">
interface InterState {
  myname: string
  myage: number
  list: Array<string>
}
export default {
  data() {
    return {
      myname: "jerry",
      myage: 18,
      list: [],
    } as InterState // 限定为指定的接口类型
  },
  methods: {
    handleChange() {
      this.myname = "tom"
      this.list.push(this.myname)
      // 类型断言
      console.log((this.$refs.mydiv as HTMLDivElement).innerHTML)
      console.log((this.$refs.myintput as HTMLInputElement).value)
    },
  },
}
</script>

父-示例：

<template>
  <div>
    <Child title="首页" :item="{name:'jerry', age:18, list:[1,2,3]}"></Child>
  </div>
</template>

<script lang="ts">
import Child from "./Child.vue"

export default {
  components: {
    Child,
  }
}
</script>

子-示例：

<template>
  <div>child - {{ title }} - {{ item?.name }} - {{ item?.age }} - {{ item?.list }}</div>
</template>

<script lang="ts">
import type { PropType } from "vue"   //引入类型断言
interface IProps {  //定义接口类型
  name: string
  age: number
  list: Array<number>
}
export default {
  props: {
    title: String,
    item: Object as PropType<IProps>,  //限定为接口类型
  },
}
</script>

1.4 ts+组合式API

示例：注意 接口类型限定 interface 和 类型断言如 ref<HTMLDivElement>()

<template>
  <div>
    vca - {{ myname }} - {{ computedMyname }}
    <div ref="mydiv">这是个div</div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from "vue"
import type { Ref } from "vue"
// 隐式推导
// const state = reactive({
//     myname: 'jerry'
// })
interface IState {
  myname: string
}
const state: IState = reactive({
  myname: "jerry",
})

// const myname = ref("tom1") //隐式推导
// const myname:Ref<string> = ref('tom2') //Ref<>泛型，需要导入 Ref
const myname = ref<string>("tom3") //ref<>
const mylist = ref<IState[]>([])   // [{myname:'xxx'}, {myname:'yyy'}]

const mydiv = ref<HTMLDivElement>()
onMounted(() => {
  console.log(mydiv.value?.innerHTML)
})

const computedMyname = computed<string>(() => myname.value.substring(0, 1).toUpperCase() + myname.value.substring(1))

</script>

父-示例：

<template>
  <div>
    <Child title="首页" :obj="{name:'jerry', age: 20}"></Child>
  </div>
</template>

<script lang="ts" setup>
import Child from "./Child.vue"
</script>

子-示例：defineProps<{...}> 与 defineEmits<{...}>

<template>
  <div>child... - {{ title }}-{{ obj.name }}-{{ obj.age }}</div>
</template>

<script lang="ts" setup>
interface IProps {
    name:String,
    age:Number
}
const props = defineProps<{
    title:string,
    obj:IProps   //可选属性，通过接口定义类型
}>()

// 子传父
const emit = defineEmits<{
  (e: 'event', myvalue: string): void
}>()
const handleClick = () => {
  emit("event", "hello")
}
</script>

1.5 ts+路由

router/index.ts - 文件格式改为 ts （不要与 js 两掺）

import { createRouter, createWebHistory } from "vue-router";
import Center from "../Center.vue";


const routes = [
    {
        path: '/',
        component: Center
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router