【Typescript】vue项目中使用ts（typescript）入门教程

目录

说明：

一些简单的例子，一看即懂：

vue组件的编写1

vue组件的编写2

完整代码案例

延伸 

---

 说明：

ts有什么用？

类型检查、直接编译到原生js、引入新的语法糖

为什么用ts？

TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。

typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，对大型项目的维护性有很大的提升。也不至于使开发者搬起石头砸自己的脚。

一些简单的例子，一看即懂：

基础类型

  let isDone: boolean = false;  // 布尔值

  let decLiteral: number = 6;    // 数字

  let name: string = "bob";  // 字符串

  let list: number[] = [1, 2, 3]; // 数组
  ...
  ...

接口 (待后续)

function printLabel(labelledObj: { label: string }) {    console.log(labelledObj.label);
  }  let myObj = { size: 10, label: "Size 10 Object" };
  printLabel(myObj);

类型检查器会查看printLabel的调用。 printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。

vue组件的编写1

1、首先安装ts

npm install --save-dev typescript npm install --save-dev ts-loader

2、在根目录建tsconfig.json文件

{
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["dom","es2016"],
      "target": "es5"
    },
    "include": ["./src/**/*"]  
}

3、在配置中添加 ts-loader

{
    test: /\.tsx?$/,
    loader: 'ts-loader',    exclude: /node_modules/,      options: {
      appendTsSuffixTo: [/\.vue$/],
    }
  }

4、最后把 .ts 后缀添加上就OK了，在webpack.base.conf.js文件下

现在就可以在我们原本的项目中使用ts文件了。

vue组件的编写2

vue组件里大多数的方法改成通过@xxx（装饰器）来表明当前定义的为什么数据，类似ng中的注入。而业务逻辑js的部分就可以直接采用ts的写法了。

基本写法

模板template和样式style的写法不变，script的模块进行了改变，基本写法如下：

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Test extends Vue {
  
};
</script>

• lang="ts"：script张声明下当前的语言是ts
• @Component：注明此类为一个vue组件
• export default class Test extends Vue： export当前组件类是继承vue的

data()中定义数据

data中的数据由原来的data()方法改成直接在对象中定义

export default class Test extends Vue {
 public message1: string = "heimayu";
 public message2: string = "真好看";
}

props传值

props的话就没有data那么舒服了，因为他需要使用装饰器了，写法如下

@Prop()
propA:string

@Prop()
propB:number

$emit传值

不带参数

  // 原来写法：this.$emit('bindSend')
  // 现在直接写 this.bindSend()
  // 多个定义
  @Emit()
  bindSend():string{
      return this.message
  }

方法带参数

  // 原来写法：this.$emit('bindSend', msg)
  // 现在直接写： this.bindSend(msg)
  // 多个下面的定义
  @Emit()
  bindSend(msg:string){
      // to do something
  }

emit带参数

  // 这里的test是改变组件引用的@事件名称这时候要写@test 而不是@bindSend2
  @Emit('test)
  private bindSend2(){
      
  }

watch观察数据

  // 原来的写法 watch:{}

  @Watch('propA',{
      deep:true
  })
  test(newValue:string,oldValue:string){
      console.log('propA值改变了' + newValue);
  }

computed计算属性

public get computedMsg(){
      return '这里是计算属性' + this.message;
 }
public set computedMsg(message:string){
 }

完整代码案例

<template>
  <div class="test-container">
    {{message}}
    <input type="button" value="点击触发父级方法" @click="bindSend"/>
    <input type="button" value="点击触发父级方法" @click="handleSend"/>
    <input type="button" value="点击触发父级方法" @click="bindSend2"/>
    <!-- <Hello></Hello> -->
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// 注明此类为一个vue组件
@Component({
  components: {
    Hello
  }
})
export default class Test extends Vue {
  // 原有data中的数据在这里展开编写
 public message: string = "asd";
  //原有props中的数据展开编写
  @Prop({
    type: Number,
    default: 1,
    required: false
  })
  propA?: number
  @Prop()
  propB:string
  //原有computed
  public get computedMsg(){
      return '这里是计算属性' + this.message;
  }
  public set computedMsg(message:string){
  }
  //原有的watch属性
  @Watch('propA',{
      deep:true
  })
  public test(newValue:string,oldValue:string){
      console.log('propA值改变了' + newValue);
  }
  // 以前需要给父级传值的时候直接方法中使用emit就行了，当前需要通过emit来处理
  @Emit()
  private bindSend():string{
      return this.message
  }
  @Emit()
  private bindSend1(msg:string,love:string){
      // 如果不处理可以不写下面的，会自动将参数回传
    //   msg += 'love';
    //   return msg;
  }
  //原有放在methods中的方法平铺出来
  public handleSend():void {
      this.bindSend1(this.message,'love');
  }
  // 这里的emit中的参数是表明父级通过什么接受，类似以前的$emit('父级定义的方法')
  @Emit('test')
  private bindSend2(){
      return '这个可以用test接受';
  }
}
</script>

延伸 

当然有的时候我们需要使用一些库，然而并没有声明文件，那么我们在ts文件中引用的时候就会是undefined。这个时候我们应该怎么做？

比如我想要在util.ts文件中用 ‘query-string’的时候我们就会这样引用：

import querystring from 'query-string';

然而当你打印querystring 的时候是undefined。如何解决呢？小编的方法也仅供参考

新建module.js文件

import querystring from 'query-string';  export const qs = querystring;

utile.ts 文件

import { qs } from './module.js';

解决了。打印qs不再是undefined，可以正常使用qs库了