vue-next先行版+typescript尝试
获取项目
git clone [email protected]: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. 修改webpack.config.js文件
- entry项把
path.resolve(__dirname, './src/main.js')
改为path.resolve(__dirname, './src/main.ts')
- resolve项添加
extensions: [".ts", ".js", ".json"]
- rules添加
1 | { |
3. src文件夹下修改
- main.js改为main.ts
- 新建文件shims-vue.d.ts
1 | declare module '*.vue' { |
- App.vue文件修改
- script添加
lang="ts"
- 引入模块defineComponent,即
import { defineComponent } from 'vue'
- js代码放到
export default defineComponent ({})
中
- script添加
测试项目
- 新建test.ts的测试文件
1 | import { ref } from 'vue' |
- App.vue中引入
1 | import { defineComponent } from 'vue' |
- 当把
test({count: 3})
修改为test({count: ""})
时,可以看到vscode已经提示报错