vue-cli 3.0集成typescript

川长思鸟来 2023-05-31 03:00 12阅读 0赞

#### 前言： ####

今天学习了一下typescript，typescript是javascript的一个超类，意思就是对于javascript进行内容扩展，javascript是一门弱类型语言，而typescript在我认为，就是把javascript扩展成一门强类型，就比如java，因为自己前面也学过java，所以就感觉跟java的特点一模一样，感觉就是把java的那一套，用在了javascript上，所以上手很快，感觉网上关于vue+typescirpt的资料比较简便，所以自己写一份，留给以后做参考，希望给刚入手的人有点帮助。

##### 1.创建vue-cli3.0项目 #####

详细看另一篇文章 [手把手搭建vue-cli3.0项目](https://blog.csdn.net/yuanqi3131/article/details/97128951)

**值得注意的是，在创建的时候，选择typescript，这里也选中的vue-route，vuex**，然后一路回车，即可创建项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]  
创建完成之后，使用如下命令就可以将项目运行

npm run serve

##### 2.观察目录结构 #####

![在这里插入图片描述][20191022153143629.png]  
如上图：  
1）其中以往的main.js已经改成了main.ts  
2）shims-vue.d.ts 为typescript的声明文件，让typescript可以识别以.vue后缀结尾的文件  
3) shims-tsx.d.ts具体不知道，看内容是声明了一个global 用了一个命名空间jsx，猜测与JSX模板有关，以后在研究。  
4）多了一个tsconfig.json 配置文件，具体配置[参照][Link 1]

其中看componenets下有个HelloWorld.vue,核心代码

上面代码的意思是指 HelloWorld是一个组件 引用vue-property-decorator插件里面的@Component，（java中的@xxx称之为注解） @Prop() 代表 msg从父组件传入的值，而且是private私有的，外部无法访问，上面的代码等价于没有使用typescript的vue-cli项目：

这里typescript就体现出它的意思，使用@component显示标注这是一个组件，而后者并没有说明。

而App.vue代码如下，引入HelloWolrd组件，使用@Component 注册组件。

<template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue } from 'vue-property-decorator';
    import HelloWorld from './components/HelloWorld.vue';
    
    @Component({ 
      components: { 
        HelloWorld,
      },
    })
    export default class App extends Vue { }
    </script>
    
    <style lang="scss">
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

**注意点：使用typescript要在script标签里写 lang="ts"**

##### 3.开始编写demo #####

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <div>{ { he}}</div>
        <div>{ { msg}}</div>
        <div>{ { num}}</div>
        <div>{ { setValue}}</div>
        <button @click="addNum">增加</button>
        <button @click="submitValue">传递</button>
      </div>
    </template>
    
    <script lang='ts'>
    // @ is an alias to /src
    import {  Component,Vue,Watch,Emit } from 'vue-property-decorator';
    import HelloWorld from '@/components/HelloWorld.vue';
    
    @Component
    export default class Home extends Vue { 
      private he = '123';
      private msg: string = 'hello world';
      private num: number = 0; 
      /*上面三行相当于 data() { return { he: '123', msg: 'hello world', num: 0 } } */
      addNum(): number { 
        return this.num++;
      }
      /** * addNum() 相当于 * methods: { addNum(): number { return this.num++; } } */
      get setValue(): string {  // get相当于 computed
        return 'user' + this.num;
      }
       /** * @Watch('num') 相当于 * watch: { handler(newVal,oldVal) { } } */
      @Watch('num')
      valueChange(newVal:any,oldVal?:any) { 
        console.log(newVal);
      }
        /* @Emit 相当于 this.$emit('sumbit',value) 下方的@Emit('sumbit')中的submit为父组件调用 这里假设有父组件 parent <parent @submit='xxx'></parent> 下方submitValue为子组件触发方法名 */
      @Emit('sumbit')
      submitValue(val:any) { 
    
      }
    }
    </script>

好了，上述demo已经讲述了在vue-cli3.0怎么使用，对了，还有一个注意点是

@Component
    export default class Home extends Vue { }

**要加上@Component，要不能下面定义的方法 data，get会报错的**

### 全部demo已经放在git，[传送门][Link 2]，如果认为有用的话，请点个star，万分感谢！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20230531/806c7822d96c495fad8f5db32da2484a.png
[20191022153143629.png]: /images/20230531/ebac3d7497504df5a83cc0ec08c7dc67.png
[Link 1]: https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Compiler%20Options.html
[Link 2]: https://github.com/yuanqi3131/vue-typescript