写在前面，说一下我对ts的个人看法吧。（大佬勿喷！）
对于项目而言是用ts还是js这个看情况吧，反正混用也不冲突（反正是使用vue-property-decorator）。
js方便快捷，ts相对而言严谨，规范点（静态类型语言，所写即所得），但是生态感觉js还是强于ts的，js用起来方便。前端用框架vue感觉js+ts都行吧没必要非要用那一种，react的话ts应该爽一点。如果构建原生的感觉ts要好一点。

1，安装vue-cli脚手架，这里不赘述。

npm install -g @vue/cli

2，创建vue+ts的工程

vue create my-project-name

enter以后选择自定义的安装（选择 "Manually select features (手动选择特性)" 选项。）

选择 manually select features.jpg

3，配置工程

TypeScript 选上（前面*为勾选，空格键），其他的Vuex，css预编译，Linter什么的看自己。

2.jpg

然后全部enter就好了。
构建的目录结构

Dingtalk_20201015095240.jpg

4，引入第三方插件

我这里随便引入了一个 'vue-tree-chart'

npm i vue-tree-chart --save

为了方便展示我直接放在了构建项目的HelloWorld.vue里面。如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="tree-main"><TreeChart :json="treeData" /></div>
    <button @click="saveBtn">Ecosystem</button>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import TreeChart from "vue-tree-chart";
@Component({
  components:{
    TreeChart
  }
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  @Emit('toData') emitVal(num: string) {
    // 这里是emit传值的时候可以添加一些方法
  }
  private saveBtn() {
    this.emitVal('123456789')
  }
  private treeData = {
        name: 'root',
        image_url: require('@/assets/logo.png'),
        children: [
          {
            name: 'children1',
            image_url: require('@/assets/logo.png')
          },
          {
            name: 'children2',
            image_url: require('@/assets/logo.png'),
            mate: {
              name: 'mate',
              image_url: require('@/assets/logo.png')
            },
            children: [
              {
                name: 'grandchild',
                image_url: require('@/assets/logo.png')
              },
              {
                name: 'grandchild2',
                image_url: require('@/assets/logo.png')
              },
              {
                name: 'grandchild3',
                image_url: require('@/assets/logo.png')
              }
            ]
          },
          {
            name: 'children3',
            image_url: require('@/assets/logo.png')
          }
        ]
      }
}
</script>

5，直接引入js的插件会报错问题

Could not find a declaration file for module 'XXX'

提示找不到申明模块，要你去.d.ts文件里面声明一下。找到shims-vue.d.ts文件

Dingtalk_20201015100121.jpg

5.1，所以你要去申明文件里声明一下这个模块

然后重启一下项目。

Dingtalk_20201015095850.jpg

5.2，另外啰嗦一下 @typescript-eslint 报错 要处理一下空的问题等一些常规报错问题

在eslintrc .js里面设置

5.jpg

6，关于vue-ts支持模块，vue-property-decorator，emit传值Prop 获取值的问题

1，Prop获取父组件传值就是直接@Prop看我上传的代码里面有，也可以设置其只读属性。！表示一定有值 ，？不一定有值。
2，Emit这个就是相当于@Emit('值的容器') 接着封装了一个函数。要的值就是参数，然后通过子组件的方法调用那个函数，函数里面可以放一些调用这个传值的时候要执行的方法，如果没有就是空。
父组件的传值和接受和JavaScript+vue 一样的。

其实我觉得吧vue+ts相当于把组件（页面）当成了一个class这么直接写的，其他的就变量类型什么的。类什么的。这个就自己去看吧。(自定义方法名加private ，周期函数感觉不用加。)。其他的没什么了吧。