前言

TS的话, 相对来讲不算太复杂, 如果有过java基础的应该会很好理解, 没有的也不要紧,主要是弱语言到强语言的一个语法关注的问题,区别除了组件的写法不一致外,更多的是对于数据类型的掌握,诸如继承,接口, 重载等等.这篇就简单创建一下VUE3+TS初始项目,然后说一下TS的一些简单的基本用法

1.准备

1.vue需要使用3.X版本

2.项目创建成功后，安装vue-template-compiler 和vue-property-decorator

3. 项目创建成功后，tslint.json内添加”trailing-comma”: false

2. 创建项目

1。vue create ts-test 具体配置项如下

2。 创建完成项目后，安装vue-template-compiler 和vue-property-decorator， 并在tslint.json内添加”trailing-comma”: false， 且在根目录中添加vue.config.js文件夹， 以便于后续配置webpack配置。

3.shims-vue.d.ts 中的内容更改为下：

4. 添加shims-tsx.d.ts文件，内容如下：

3. TS用法分析

1. 组件结构部分变化

在vue中，我们知道， 一个组件的写法通常分为三个大块： template, script, style, 在TS中，组件写法中的template和style部分没有用法上的区别，基本不变， 而在script标签内， 写法与常规写法大不相同，首先是script标签需要添加lang属性TS值， 来声明是使用ts解析， 然后内部的语法较vue有很大的区别

2. TS的组件书写模板，先弄清楚Ts怎么用， 再来考虑其他的细节部分的东西， 所以，第一步，需要知道怎么写一个Ts的模板。

    <template>
      <div id="nav">
         ....
      </div>
    </template>
    <script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    @Component({
      name: '***',
      components: {***}
    })
    export default class extends Vue {
    ....
    }
    </script>

    <style lang="scss">
  
    </style>

复制代码

3. 之前vue中script模块中的内容, 相对于TS都有哪些用法上的变化呢?

1. name和components, 之前用name去声明当前组件名称, components去引入子组件, 现在同样可以, 不过它们边分配到了@component区域中,那么@component是什么呢? 它是一个装饰器修饰组件, 用来为组件添加各种”装饰属性”, java中的注解就是这个意思. 那么既然是为了给组件添加装饰属性, 那么name是组件的一个名称属性, components是组件的子组件属性,这两个放在@component中应该就好理解了.具体用法如下:

2. 接下来看export default class extends Vue , 这里是导出一个类(可以理解为对象)继承自vue, extends是继承的意思, 知道原型链的应该不陌生于继承这个词, 就是创建的这个类, 它能访问vue拥有的属性和方法.

3. 好, 第三个问题, 按照之前来讲, 现在该写data方法了, 也就是该写vue的局部数据库了, 那么, 这一块, ts与vue有较大的区别, 区别在于, TS可以直接写在类里,为什么? 因为类对象中的变量天然具有局部性, 就是所谓的使用边界,也就是作用域. 所以, 如果想要在data中添加一些变量,对象, 数组之类的, 在TS中, 可以在class类(对象)里直接声明就好.具体用法如下:

这里可以看到,我们在类(对象)中,创建了两个变量, 一个是Num, 一个是对象item, 那么这里出现了一些陌生的词汇, private, :number等,这是因为TS是一门强语言,我们知道, js是一门弱语言, 所以我们定义一个变量,可以随便把它改成什么类型的数据, 但强语言不一样, 强语言它会要求你规定好创建的变量的类型,一旦定好类型之后, 后续修改值也只能是赋予相同类型的值, 打个比方: js就像你现在在一家小型创业公司干活, 项目用什么来做, 完全取决于你想用什么, 甚至于你今天想用vue,明天不爽也可以换成react, 而强语言就像你进了大厂, 你的工作日程,代码书写, 提交, 上线,等等, 都需要根据公司规定好的一系列规则去做, 没做到你的负责人就会告诉你哪里不规范, 就这么理解就行.类型这一块放在后面讲, 现在讲变化

4. 定义完data变量之后, 接下来就需要写生命周期及其他的一些监听, 传值等等的一些东西了, 比如created, mounted, prop, watch, methods,minxins, provide/inject, model, computed, emit等等, 一个一个讲

1. 在ts中created和mounted没有什么区别, ts中类对象中直接写即可, 写法与之前一致, 区别在于, 前缀要声明一个私有private或者public公有属性定义.

2. prop, 传值接收, 写法上的用@进行修饰, 然后默认值写在前面, 接收值写在后面,并定义接收值类型, 具体写法如下, 其中 属性后面有!, !和可选参数?是相对的, !表示强制解析（也就是告诉typescript编译器，我这里一定有值），你写?的时候再调用，typescript会提示可能为undefined

3. watch, 同样使用@进行装饰, 统称为XXX(watch)装饰器, 装饰器内形参, 声明需要监听的对象, 如果需要深度监听,则将{ immediate: true, deep: true } 传入第二个形参中, 装饰器后(下), 声明监听调用的的逻辑.

4. methods, 之前的方法,通常是写在methods内, 而在TS中, 组件使用的方法都可以直接写在类(对象)中

5. mixin 混入, 这个在做项目的时候会比较常用到, 那么在ts中如何去使用? 首先我们需要创建mixin.js, 创建需要共享的东西, 然后在组件中引入, 并且注册到@component装饰器中.

6.provide/inject, 这个用得不多, 也是用@装饰, 然后@provide声明一个值, @inject在其他地方使用.

7. model, 允许一个自定义组件在使用 v-model 时定制 prop 和 event, 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。 在ts 中通用使用@装饰,然后形参分别是重定义的方法和类型值定义, 后续接值

8. computed, ts中computed是没有对应装饰器的, 所以,可以直接通过get, set去实现

9. emit, emit是常用的子向父传值并调用父方法的方法, 那么ts中不需要讲emit写在某一方法中, 直接在类(对象)中,通过装饰器@Emit(‘方法名’), 去创建.

4. 讲完script模块内TS与vue的写法差异之后, 再来说一下关于变量,方法类型的定义.也就是强语言中的类型定义.

ES6数据类型: Boolean、Number、String、Array、Function、Object、Symbol、undefined、null, ES6的数据类型有上述这些,而TS,在ES6的基础上,增加了void、any、never、(Tuple)元组、(enum)枚举、高级类型

在这之中,只说一些常见常用的数据类型,Boolean、Number、String、Array、Function、Object、Symbol、undefined、null,any、void、(Tuple)元组
这其中, 大多数类型都知道,不需要多说, 主要说下Tuple, any、void, Function、Object

1. Tuple, 之前说到了定义数组时, 需要声明数组的类型, 也就是内部元素的类型,可以声明number, 也可以声明string ,这是单一类型的数组, 而Tuple,允许表示一个已知元素数量和类型的数组，各元素的类型不必相同 ,

2. any, any在ts中是一个比较泛类型的类型, 简单来说, 当变量定义为any类型后, 你可以对它进行与js操作相同的变更, 也就是说, 该变量不再受类型的限制.

    let notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false; // okay, definitely a boolean
复制代码

3. void, void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，通常会见到其返回值类型是 void：注意：声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null ..

  function warnUser(): void {
   alert("This is my warning message");
   }
复制代码

4. function, 一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单

     function sum(x: number, y: number): number {
          return x + y;
      }
复制代码

5. Object, 对于对象类型的数据, TS中与其他的设定不同, 它需要通过接口interface 去实现, 不理解interface 的, 可以把它看做是创建对象的第一步, 我们说过, 每个数据都可以设置它对应的数据类型, 那么对象中会有很多个属性, 那么这些属性怎么去设置呢? 直接在对象中设置是行不通的, 所以, 这个时候, 创建一个对象就要分为两步走了, 第一步就是先定义一下, 创建的这个对象,大概长什么样子, 每个属性的数据类型是什么, 这个可以称作是定义对象模板, 然后定义好了它的模板, 就可以在创建对象的时候, 声明它的数据类型就是这个对象模板, 这样, 就将对象的属性类型都定义好了. ?号代表这个参数属性可以有,也可以没有

结语

山河人间自常在, 百花春开卿未来.