欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目中如何使用TypeScript相關(guān)配置

 更新時間：2023年11月22日 11:35:45   作者：妮子果醬  
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何使用TypeScript相關(guān)配置的相關(guān)資料,typescript在開發(fā)過程中廣泛被應(yīng)用,在這里總結(jié)下項(xiàng)目中ts的應(yīng)用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、為什么要用typescript

TypeScript簡單介紹：

  • 是 JavaScript 的強(qiáng)類型版本。然后在編譯期去掉類型和特有語法，生成純粹的 JavaScript 代碼。由于最終在瀏覽器中運(yùn)行的仍然是 JavaScript，所以 TypeScript 并不依賴于瀏覽器的支持，也并不會帶來兼容性問題。
  • TypeScript 是 JavaScript 的超集，這意味著他支持所有的 JavaScript 語法。并在此之上對 JavaScript 添加了一些擴(kuò)展，如 class / interface / module 等。這樣會大大提升代碼的可閱讀性。

總結(jié)優(yōu)勢：

  • 靜態(tài)類型檢查： 類型校驗(yàn)，能夠避免許多低級代碼錯誤；
  • IDE 智能提示： 使用一個方法時，能清楚知道方法定義的參數(shù)和類型和返回值類型；使用一個對象時，只需要.就可以知道有哪些屬性以及屬性的類型；
  • 代碼重構(gòu)： 經(jīng)過不停的需求迭代，代碼重構(gòu)避免不了，在重構(gòu)時，如果前期有清晰和規(guī)范的接口定義、類定義等，對于重構(gòu)幫助很大；
  • 規(guī)范性和可讀性： 類似于強(qiáng)類型語言，有了合理的類型定義、接口定義等，對于代碼實(shí)現(xiàn)的規(guī)范性和可讀性都有很大提高，不然搜索整個項(xiàng)目這個方法在哪里調(diào)用、怎么定義等。個人認(rèn)為最有價值點(diǎn)：寫代碼前，會先構(gòu)思功能需求的整體代碼架構(gòu)。

二、vue+TpyeScript項(xiàng)目遷移

1.npm下載依賴包

npm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler

2.創(chuàng)建tsconfig.json

命令：

tsc --init

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "skipLibCheck": true,
        "esModuleInterop": true,
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ]
}

3.webpack.base.conf.js 中的配置

resolve: {
      extensions: ['.js', '.vue', '.json', 'ts', 'tsx'], // 新增了'ts', 'tsx'
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    },
    module: {
      rules: [
        {
          test: /\.ts$/,  // 用于加載項(xiàng)目中的ts文件
          exclude: /node_modules/,
          enforce: 'pre',
          loader: 'tslint-loader'
        },
        {
          test: /\.tsx?$/, // 用于加載項(xiàng)目中的tsx文件
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }]

4.配置package.json

"scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

5.重命名main.js

  • 將main.js重命名為main.ts
  • 在webpack.base.conf.js中修改入口的文件名 entry: {app: ‘./src/main.ts’}

6.在main.ts同級目錄下添加shims-tsx.d.ts（如果沒有用tsx 語法就不用） 和 shims-vue.d.ts

 // vue/cli中的shims-tsx.d.ts
  // 作用: 為 JSX 語法的全局命名空間
  // 這是因?yàn)榛谥档脑貢唵蔚脑谒诘淖饔糜蚶锇礃?biāo)識符查找
  // 此處使用的是無狀態(tài)函數(shù)組件的方法來定義, 當(dāng)在tsconfig內(nèi)開啟了jsx語法支持后, 其會自動識別對應(yīng)的.tsx結(jié)尾的文件
  import Vue, { VNode } from 'vue'
  declare global {
    namespace JSX {
      // tslint:disable no-empty-interface
      interface Element extends VNode {}
      // tslint:disable no-empty-interface
      interface ElementClass extends Vue {}
      interface IntrinsicElements {
        [elem: string]: any
      }
    }
  }

  // vue/cli中的shims-vue.d.ts
  // 作用：為項(xiàng)目內(nèi)所有的 vue 文件做模塊聲明, 畢竟 ts 默認(rèn)只識別 .d.ts、.ts、.tsx 后綴的文件
  import Vue from "vue";
  import VueRouter, { Route } from "vue-router";

  declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

  declare module "vue/types/vue" {
    interface Vue {
      $router: VueRouter; // 這表示this下有這個東西
      $route: Route;
      $https: any;
      $urls: any;
      $Message: any;
      $Modal: any;
    }
  }

7.改造 .vue文件，將vue中script切換為<script lang="ts">；

8.改造.js文件，修改為ts語法，定義類型等

總結(jié)

到此這篇關(guān)于vue項(xiàng)目中如何使用TypeScript相關(guān)配置的文章就介紹到這了,更多相關(guān)vue中使用TS相關(guān)配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論