I also use Meteor with Vue and TypeScript and I haven’t got errors.
These are my packages:
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
meteor-base@1.5.0 # Packages every Meteor app needs to have
mobile-experience@1.1.0 # Packages for a great mobile UX
mongo@1.12.0 # The database Meteor supports right now
jquery # Wrapper package for npm-installed jquery
tracker@1.2.0 # Meteor's client-side reactive programming library
standard-minifier-css@1.7.2 # CSS minifier run for production mode
standard-minifier-js@2.6.0 # JS minifier run for production mode
es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers
ecmascript@0.15.2 # Enable ECMAScript2015+ syntax in app code
typescript@4.3.2 # Enable TypeScript syntax in .ts and .tsx modules
shell-server@0.5.0 # Server-side component of the `meteor shell` command
static-html
akryum:vue-component
akryum:vue
accounts-base@2.0.0
accounts-password@2.0.0
check@1.3.1
mdg:validated-method
lacosta:method-hooks
peerlibrary:middleware
meteorhacks:async
alanning:roles
accounts-facebook@1.3.3
service-configuration@1.1.0
accounts-google@1.4.0
accounts-github@1.5.0
force-ssl@1.1.0
meteorhacks:ssr
akryum:vue-sass
socialize:user-presence
maka:rest
nathantreid:vue-typescript-babel
And package.json:
{
"name": "versus-web",
"private": true,
"scripts": {
"start": "meteor run",
"run:mac": "MONGO_URL=mongodb://localhost:27017/versus meteor --settings ./settings/settings-development.json",
"run:windows": "SET MONGO_URL=mongodb://localhost:27017/versus& meteor --settings ./settings/settings-development.json",
"gen:doc": "typedoc --out .docs --ignoreCompilerErrors --exclude '**/*Serv.ts' imports/api",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer",
"test:vue": "jest"
},
"dependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@babel/runtime": "^7.14.6",
"@vuejs-community/vue-filter-date-format": "^1.6.3",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.6",
"bcrypt": "^5.0.1",
"busboy": "^0.3.1",
"detect-file-type": "^0.2.8",
"file-type": "^16.5.0",
"firebase-admin": "^9.10.0",
"fs-extra": "^10.0.0",
"helmet": "^4.6.0",
"jquery": "^3.6.0",
"meteor-node-stubs": "^1.0.3",
"mimetypes": "^0.1.1",
"simpl-schema": "^1.12.0",
"twilio": "^3.65.0",
"vee-validate": "^3.4.10",
"vue": "^2.6.14",
"vue-currency-filter": "^5.2.0",
"vue-jest": "^3.0.7",
"vue-meteor-tracker": "^2.0.0-beta.5",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuetify": "^2.5.6",
"vuetify-image-input": "^19.2.2",
"vuex": "^3.6.2",
"vuex-persist": "^3.1.3"
},
"meteor": {
"mainModule": {
"client": "client/main.ts",
"server": "server/main.ts"
},
"testModule": "tests/main.ts"
},
"devDependencies": {
"@babel/plugin-transform-typescript": "^7.14.6",
"@types/busboy": "^0.2.3",
"@types/fs-extra": "^9.0.11",
"@types/jest": "^26.0.23",
"@types/meteor": "^1.4.71",
"@types/meteor-mdg-validated-method": "^1.2.2",
"@types/mocha": "^8.2.2",
"@types/twilio": "^3.19.3",
"@vue/test-utils": "^1.2.1",
"flush-promises": "^1.0.2",
"husky": "^7.0.0",
"jest": "^27.0.6",
"regenerator-runtime": "^0.13.7",
"ts-jest": "^27.0.3",
"typedoc": "^0.21.2",
"typescript": "^4.3.5",
"vue-template-compiler": "^2.6.14"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}
Only a difference is that I don’t use typescript decorators. This is the way I use it:
<script lang="ts">
import Vue, {PropType} from 'vue';
import { ModalData } from '/imports/ui/typings/utilities.ts';
export default Vue.extend({
name: 'ModalRemove',
props: {
modalData: {
type: Object as PropType<ModalData>,
required: true
}
},
data() {
return {
dialog: false
};
},
...