typescript使用

-----------------------  1. Vue3.0中使用typescript

第一步：全局安装 typescript

cnpm i typescript -g

 

第二步：cd到项目根目录下，安装 typescript

cnpm i typescript -D

 

第三步：运行 tsc --init, 项目根目录下会生成 tsconfig.json. 根入口文件main.js改成main.ts, 不然会报错

 

第四步：安装 @vue/cli-plugin-typescript

cnpm i @vue/cli-plugin-typescript -D

 

第五步：vue组件中使用

<script setup lang="ts">
　

const s1:string = "彼时彼刻，恰如此时此刻";
console.log(s1);

</script>

 

## 关于报错：

注意安装包 typescript  @vue/cli-plugin-typescript 的版本号！

 

-----------------------  2. 单个ts文件运行

第一种：tsc xxx.ts 目录下生成了一个同名的xxx.js 文件 node xxx.js运行

第二种：npm i -g ts-node // 全局安装ts-node，就可以直接运行.ts文件了

注意：如果出现报错，请尝试降低ts-node的版本号

 

 

## 贴上我的package.json，仅供参考

{
  "name": "idaascas",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "element-plus": "^1.2.0-beta.6",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "^4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "^4.1.6"
  }
}