vue-next先行版+typescript尝试

发表于 分类于 阅读次数：
vue3先行版已经出来很久了，今天尝试了一下与typescript结合使用，记录下来

获取项目

  • git clone git@github.com:vuejs/vue-next-webpack-preview.git
  • cd vue-next-webpack-preview
  • npm install

添加typescript依赖

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

修改项目

1. 创建tsconfig.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
    "compilerOptions": {
        "target": "ES5",
        "module": "CommonJS",
        "strict": true,
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.vue"
    ],
    "exclude": [
        "node_modules"
    ]
}

2. 修改webpack.config.js文件

  • entry项把path.resolve(__dirname, './src/main.js')改为path.resolve(__dirname, './src/main.ts')
  • resolve项添加extensions: [".ts", ".js", ".json"]
  • rules添加
1
2
3
4
5
6
7
8
{
    test: /\.ts$/,
    exclude: /node_modules/,
    loader: "ts-loader",
    options: {
        appendTsSuffixTo: [/\.vue$/]
    }
}

3. src文件夹下修改

  • main.js改为main.ts
  • 新建文件shims-vue.d.ts
1
2
3
4
5
declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const component: ComponentOptions
    export default component
}
  • App.vue文件修改
    1. script添加lang="ts"
    2. 引入模块defineComponent，即import { defineComponent } from 'vue'
    3. js代码放到export default defineComponent ({})中

测试项目

  • 新建test.ts的测试文件
1
2
3
4
5
6
7
8
9
10
11
import { ref } from 'vue'
interface param {
    count: number;
}
export const test = (param: param) => {
    const count = ref(param.count)
    const inc = () => {
        count.value++
    }
    return { count, inc }
}
  • App.vue中引入
1
2
3
4
5
6
7
8
import { defineComponent } from 'vue'
import { test } from './test'
export default defineComponent ({
    setup() {
        const { count, inc } = test({count: 3})
        return { count, inc }
    }
})
  • 当把test({count: 3})修改为test({count: ""})时，可以看到vscode已经提示报错