vue中ts文件怎么應用

這篇文章主要介紹了vue中ts文件怎么應用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue中ts文件怎么應用文章都會有所收獲，下面我們一起來看看吧。

vue中ts是指typescript文件，typescript是js超集，它最主要做的一件事，就是數據類型驗證；ts是微軟開發的，適用于大型的項目開發，能使開發更加嚴謹。

vue中TS的應用

TS(typescript)

ts: typescript ,它是js超集（包含js所有的語法，在基礎上增加了數據類型定義）
它最主要做的一件事，就是數據類型驗證。
js是弱類型語言，java是強類型語言
let a = 123,a 就是number類型。let a = '123',a就是字符串類型
但是ts是在聲明并定義的時候就是定義了它的數據類型。 let a:number = 100
如果你要去修改a ,a只能被修改成數值型，如果你修改成其他類型，那么會報錯。
它運行的時候并不會報錯（即使數據類型有問題，但是結果不會出錯），在編譯的過程中會報錯。
瀏覽器沒有辦法去解析ts,ts是來源于js最終還是要以js的狀態去運行。ts是弱類型，它也標志著，ts去向java靠攏
ts是誰開發的？
是微軟開發的
ts適用的場景？
它適用于大型的項目開發，使你的開發更加的嚴謹
誰在用ts？
15年angular2.x它就是開始使用ts,所以說angular是谷歌和微軟開發的精品。
15之前大家都是使用angular(1.x)，它的設計模式還是MVC。它在升級到2.x時候，全變了，從語法到設計模式都換了。它換成MVVM設計模式
vue3.0（核心庫，還是載測試版本）它的源碼就是用ts
一線大廠做項目都用ts。比如vue最新腳手架+ ts  或者 react中 ts + dva +umi+hook

一、安裝

npm install -g typescript
Version 4.2.3

二、查看版本

tsc --version

三、運行文件（手動）

tsc 文件名

四、自動運行文件

• 先生成配置文件

tsc --init

它會自動創建出tsconfig.json文件

• 設置終端監聽

vscode => 終端=> 運行生成任務 => 選擇監聽 （開啟自動監聽模式）

• tsconfig.json

釋放出，輸出目錄，目錄地址隨意設置
  "outDir": "./dist",

{"compilerOptions": {
    /* 基本選項 */
    "target": "es5",// 指定 ECMAScript 目標版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs",// 指定使用模塊: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [],// 指定要包含在編譯中的庫文件
    "allowJs": true,//允許編譯 javascript 文件
    "checkJs": true,//報告javascript文件中的錯誤
    "jsx": "preserve",//指定jsx代碼的生成: 'preserve', 'react-native', or 'react'
    "declaration": true,//生成相應的 '.d.ts' 文件
    "sourceMap": true, //生成相應的 '.map' 文件
    "outFile": "./",//將輸出文件合并為一個文件
    "outDir": "./",//指定輸出目錄
    "rootDir": "./",//用來控制輸出目錄結構 --outDir.
    "removeComments": true,//刪除編譯后的所有的注釋
    "noEmit": true,//不生成輸出文件
    "importHelpers": true,//從tslib導入輔助工具函數
    "isolatedModules": true,//將每個文件做為單獨的模塊（與 'ts.transpileModule' 類似）.
    /* 嚴格的類型檢查選項 */
    "strict": true,//啟用所有嚴格類型檢查選項
    "noImplicitAny": true,//在表達式和聲明上有隱含的any類型時報錯
    "strictNullChecks": true,//啟用嚴格的null檢查
    "noImplicitThis": true,//當this表達式值為 any 類型的時候，生成一個錯誤
    "alwaysStrict": true,//以嚴格模式檢查每個模塊，并在每個文件里加入 'use strict'
    /* 額外的檢查 */
    "noUnusedLocals": true,//有未使用的變量時，拋出錯誤
    "noUnusedParameters": true,//有未使用的參數時，拋出錯誤
    "noImplicitReturns": true,//并不是所有函數里的代碼都有返回值時，拋出錯誤
    "noFallthroughCasesInSwitch": true,//報告switch語句的fallthrough錯誤。
    /* 模塊解析選項 */
    "moduleResolution": "node",//選擇模塊解析策略：'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "baseUrl": "./",//用于解析非相對模塊名稱的基目錄
    "paths": {},//模塊名到基于 baseUrl 的路徑映射的列表
    "rootDirs": [],//根文件夾列表，其組合內容表示項目運行時的結構內容
    "typeRoots": [],//包含類型聲明的文件列表
    "types": [],//需要包含的類型聲明文件名列表
    "allowSyntheticDefaultImports": true, //允許從沒有設置默認導出的模塊中默認導入。
    /* Source Map Options */
    "sourceRoot": "./",//指定調試器應該找到 TypeScript 文件而不是源文件的位置
    "mapRoot": "./",//指定調試器應該找到映射文件而不是生成文件的位置
    "inlineSourceMap": true,//生成單個 soucemaps 文件，而不是將 sourcemaps 生成不同的文件
    "inlineSources": true,//將代碼與 sourcemaps 生成到一個文件中，要求同時設置了 --inlineSourceMap 或 --sourceMap 屬性
    /* 其他選項 */
    "experimentalDecorators": true,//啟用裝飾器
    "emitDecoratorMetadata": true//為裝飾器提供元數據的支持
  }}

注意：有的同學電腦運行有問題，powerShell 權限的問題

以管理員身份運行 PowerShell，并執行命令set-ExecutionPolicy RemoteSigned將PowerShell的執行策略更改為RemoteSigned

五、ts的基本語法

• Number

• String

• Boolean

• Object

• Array

• 元祖

• undefined

• 枚舉

• 任意類型any

//numberlet a:Number = 10//a = '字符串' 這種賦值不對！！！a =500console.log(a,'a的值')//Stringlet msg:String = '信息'msg = "100"//Booleanlet isShow:Boolean = trueisShow = false//Objectlet obj:Object = {
    name:'張三',
    age:18}//array //空數組let arr:[] = []// 下面的賦值不對//arr = [1,2,3]//定義普通數組let arr1:Array<String> = ['香蕉','蘋果']let arr2:Array<Number> = [1,2,3,4]//指向聲明 不賦值let info:String
info= "1111"//undefined 類型let b:undefined//元祖類型 聲明N個類型，你要根據你聲明的類型進行賦值，一一對應let arr3:[Number,String,Boolean] = [1,'字符串',true]//枚舉（有序舉例） 默認是從0開始 依次排序。如果想去修改默認值直接賦值即可enum Sex{
    man,
    woman}//傳輸方式enum methodInfo{
    get='GET',post='Post'}console.log(methodInfo.get,'枚舉');console.log(methodInfo.post,'枚舉');let type:methodInfo = methodInfo.getconsole.log(type,'type');//大部分的data屬性的結果都是來自于接口返回的數據 //任意類型//anylet anyInfo:any 
anyInfo = 100anyInfo ='結果'console.log(anyInfo,'anyInfo')

六、函數類型

無返回值

function fn(): void {
    console.log('無返回值');}console.log(fn(), '執行函數');

有返回值類型

function fn1(): String {
    return '函數有返回值'}console.log(fn1());

任意類型

function fn2(): any {
    return '任意'}console.log(fn2());

定義參數類型

//參數 一定要設定數據類型function fn3(msg: String): void {
    console.log(msg, '參數一')}fn3('100')

默認參數

//默認參數//如果不傳遞參數，就是走默認，否則就賦值你傳遞的內容function fn4(params1: String, params2: String = '白居易'): String {
    return params2}console.log(fn4('李白'));console.log(fn4('曹操', '大關羽'));

可選參數

//可選參數 （傳不傳參數都可以）function fn5(params1: String, params2?: String): String {
    return params1}console.log(fn5('李白'));console.log(fn5('曹操', '大關羽'));

七、類（class）

7.1基本類

//創建一個基本類class Zoo{
    //類的作用域 省略了所有的聲明方式
    //設定一個變量，未賦值會報錯，我們可以給其一個undefined類型還可以去構造函數中賦值
   public name:String | undefined    constructor(newName:String){
        this.name = newName
        console.log(this.name,'父類中的name值');
        
    }
    eat(food:String):String{
        return `${this.name}喜歡吃${food}`
    }}let zoo = new Zoo('狼')zoo.eat('肉')console.log(zoo.name,'zooname');

7.2 派生類（子類） 類的繼承

//類的繼承（派生類）//繼承了父類，就擁有了父類的所有屬性和方法// 如果子類中定義的屬性和方法與父類一致，其實就是修改（重置）//子類中constructor(){ super()} 必須調用super() 它可以調用父類中的屬性和方法class Tiger extends Zoo{
    name:String    constructor(a:String){
        //super調用父類中的屬性和方法
        super(a) 
        console.log(a,'aaaa');
        this.name = a
        console.log(this.name,'this.name');
    }
    eat(foods:String):String{
        return '這個是一個字符串'
    }}let tiger = new Tiger('老虎')tiger.eat('生肉')

7.3 類的修飾符

public 公有的（一般定義一個屬性，如果沒有給修飾符，它就是公有的，public是默認），它可以在類中，子類中，類外部被調用
protected 受保護的 它可以在父類與子類中被使用，不能在類的外部被調用
private 私有的 它只能在父類中被調用。不能在子類以及類的外部被調用

在類的作用域中你可以創建屬性，我們可以給它添加修飾符。決定了這個屬性能否被子類或者類的外部所有使用（調用）

• public

///創建一個基本類class Zoo{
    //類的作用域 省略了所有的聲明方式
    //設定一個變量，未賦值會報錯，我們可以給其一個undefined類型還可以去構造函數中賦值
    // 公有的public （如果不添加這個修飾符，這個屬性默認就是公有的）
   public name:String | undefined    constructor(newName:String){
        this.name = newName
        console.log(this.name,'父類中的name值');
        
    }
    eat(food:String):String{
        return `${this.name}喜歡吃${food}`
    }}let zoo = new Zoo('狼')zoo.eat('肉')console.log(zoo.name,'zooname');// console.log(zoo,'zoo類實例化的結果');// console.log(zoo.eat('肉'),'執行結果');//類的繼承（派生類）//繼承了父類，就擁有了父類的所有屬性和方法// 如果子類中定義的屬性和方法與父類一致，其實就是修改（重置）//子類中constructor(){ super()} 必須調用super() 它可以調用父類中的屬性和方法class Tiger extends Zoo{
    name:String    constructor(a:String){
        //super調用父類中的屬性和方法
        super(a) 
        console.log(a,'aaaa');
        this.name = a
        console.log(this.name,'this.name');
    }
    eat(foods:String):String{
        return '這個是一個字符串'
    }}let tiger = new Tiger('老虎')tiger.eat('生肉')console.log(tiger.name,'name 屬性 也可以用！！！');

• protected

//創建一個基本類class Zoo{
    //類的作用域 省略了所有的聲明方式
    //設定一個變量，未賦值會報錯，我們可以給其一個undefined類型還可以去構造函數中賦值
    //protected 只能在父類 和子類中被調用， 不能在類的外層被調用
   protected name:String | undefined    constructor(newName:String){
        this.name = newName
        console.log(this.name,'父類中的name值');
        
    }
    eat(food:String):String{
        return `${this.name}喜歡吃${food}`
    }}let zoo = new Zoo('狼')zoo.eat('肉')console.log(zoo.name,'zooname');// console.log(zoo,'zoo類實例化的結果');// console.log(zoo.eat('肉'),'執行結果');//類的繼承（派生類）//繼承了父類，就擁有了父類的所有屬性和方法// 如果子類中定義的屬性和方法與父類一致，其實就是修改（重置）//子類中constructor(){ super()} 必須調用super() 它可以調用父類中的屬性和方法class Tiger extends Zoo{
    name:String    constructor(a:String){
        //super調用父類中的屬性和方法
        super(a) 
        console.log(a,'aaaa');
        this.name = a
        console.log(this.name,'this.name');
    }
    eat(foods:String):String{
        return '這個是一個字符串'
    }}let tiger = new Tiger('老虎')tiger.eat('生肉')console.log(tiger.name,'name 屬性 也可以用！！！');

• private

//創建一個基本類class Zoo{
    //類的作用域 省略了所有的聲明方式
    //設定一個變量，未賦值會報錯，我們可以給其一個undefined類型還可以去構造函數中賦值
    //private  私有屬性 只能在自己的類中被調用，不能被子類以及類的外層調用
   private name:String | undefined    constructor(newName:String){
        this.name = newName
        console.log(this.name,'父類中的name值');
        
    }
    eat(food:String):String{
        return `${this.name}喜歡吃${food}`
    }}let zoo = new Zoo('狼')zoo.eat('肉')console.log(zoo.name,'zooname');// console.log(zoo,'zoo類實例化的結果');// console.log(zoo.eat('肉'),'執行結果');//類的繼承（派生類）//繼承了父類，就擁有了父類的所有屬性和方法// 如果子類中定義的屬性和方法與父類一致，其實就是修改（重置）//子類中constructor(){ super()} 必須調用super() 它可以調用父類中的屬性和方法class Tiger extends Zoo{
    name:String    constructor(a:String){
        //super調用父類中的屬性和方法
        super(a) 
        console.log(a,'aaaa');
        this.name = a
        console.log(this.name,'this.name');
    }
    eat(foods:String):String{
        return '這個是一個字符串'
    }}let tiger = new Tiger('老虎')tiger.eat('生肉')console.log(tiger.name,'name 屬性 也可以用！！！');

7.4 靜態類

如果在類中聲明了類的靜態屬性和靜態方法，那么你不需要實例化，直接通過點就可以獲取到當前 靜態類的屬性/方法

• 靜態屬性與靜態方法

//創建一個基本的靜態類class staticInfo{
    //設定一個靜態屬性
    static stName:String ='靜態屬性111'
    //設定一個靜態方法
    static getTime():any{
        return '時間的結果'
    }}console.log(staticInfo,'靜態類');console.log(staticInfo.stName,'靜態屬性');console.log(staticInfo.getTime(),'執行你的靜態方法');

7.5抽象類（abstract）

你創建一個抽象類，只需要定義它的描述即可，不需要去具體實現它的行為。誰繼承這個抽象類，誰就具體描述當前行為與骨架
舉例： 抽象（車） 這輛車 要有名字  要能跑

//抽象類 必須要規定 有 名字  能開（能跑）abstract class Car{
    //定義抽象屬性
    abstract nameCar:String    //定義抽象的方法
    abstract run():String}//創建一個類去繼承 封裝的抽象類class BMW extends Car{
    //實現（定義）抽象類中的 成員的具體行為
    nameCar:String
    carAge:Number 
    constructor(){
        super()
        this.nameCar = '大寶馬'
        this.carAge = 10
    }
    //具體實現抽象類中方法
    run():String{
    
        return `${this.nameCar}跑起來了。。。。`
    }
    //創建一個停止的方法
    stop():void{
        console.log('爆胎了。。。。');
        
    }}let bmw = new BMW()console.log('哈哈哈哈');console.log(bmw.run(),'寶馬類');bmw.stop()

八、接口（interface）

8.1 普通接口

/* 
接口 interface

如果我們有一個普通函數，但是函數的參數很復雜，如何去驗證參數的數據類型？？？
funtion fn(msg:String,person:Object,hobby:Array<String>){

}

*/// let ming = {//     name:'',//     age:0,//     hobby:'',//     sex:0,//     dec:''// }//設置一個 人員信息類型接口 ====基本接口enum sexInfo {
    man,woman}// 這個接口專門用于人員信息的屬性驗證interface Person{
    name:String,
    age:Number,
    sex:sexInfo,//枚舉類型
    hobby:Array<String>,
    desc:String}let ming:Person ={
    name:'小明子',
    age:19,
    sex:sexInfo.man,
    hobby:['吃飯','學習','打游戲'],
    desc:'這個對明的一個描述'}console.log(ming,'ming的信息驗證并賦初始值');

8.2類的接口

// 接口類 interface//創建一個普通的接口類interface Animal{
    anName:String,
    eatFood():String}//創建一個普通類 implements（實現）class Dog implements Animal{
    anName:String = '小狗子'
    anAge:Number | undefined    eatFood():String{
        return `${this.anName}喜歡吃骨頭`
    }}let dog = new Dog()console.log(dog,'狗的實例化');

九、裝飾器

裝飾器是es7 最大的一個亮點。
我們在ts中裝飾器也是比較中要的一個概念。你可以發現ts用了很多最新語法，它也被看作是未來所有標準的定義

裝飾器它本身就是一個普通的函數，主要用于裝飾類
類的裝飾器
類的屬性的裝飾器
類的方法的裝飾器

一定要釋放開，ts配置文件中對裝飾器的限制
"experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */

• 類的普通裝飾器

//創建一個普通的類的裝飾器//裝飾器就是一個普通函數function getHttp(classInfo:any):any{
    console.log(classInfo,'shui');
    //當前函數的參數classInfo 是當前裝飾器裝飾的類
    //在當前函數中做一些邏輯或者說去修改 創建類的屬性和方法
    classInfo.prototype.nameInfo = 'http客戶端'}//創建一個類,如何調用裝飾器，通過@去調用裝飾器@getHttpclass Http{}let http = new Http()console.log(http,'http類');// console.log(http.nameInfo,'調用');

• 裝飾器的傳參

//如何給裝飾器傳遞參數 (工廠模式裝飾器 ，函數的返回值還是一個函數)function getHttp1(params:any):any{
    //裝飾器傳遞參數，兩個參數分別是誰
    //params它是裝飾器的參數 類型不能確定
    //classInfo 是類
    return (classInfo:any)=>{
        console.log(classInfo,'who');
        console.log(params,'params');
        classInfo.prototype.paramsName = params    }}// @getHttp1('張飛')@getHttp1({a:1,b:2})class Http1{}let h2 = new Http1()console.log(h2,'http類');// console.log(h2.paramsName,'http類');

• 屬性裝飾器

//屬性裝飾器//創建一個普通裝飾器function getProps(params:any):any{
    return (classInfo:any,propName:any)=>{
        console.log(params,'aaaaaaaa');
        console.log(classInfo,'bbbbbb');
        console.log(propName,'ccccccc');
        classInfo[propName] = params    }}class Http2{
    //調用封裝好的屬性裝飾器
   @getProps('蔡文姬') httpName:String | undefined}let h3 = new Http2()console.log(h3,'h3類');console.log(h3.httpName);

• 方法裝飾器

//方法裝飾器function getMethods(a:any):any{
    /* 
    方法裝飾器的四個參數
    a 代表的是裝飾器傳參
    b 代表的是類
    c 代表的是被裝飾的方法名稱
    d 代表的是方法的一些內置屬性
    */
    return (b:any,c:any,d:any)=>{
        console.log(a,'aaaaaaaa');
        console.log(b,'bbbbbb');
        console.log(c,'ccccccc');
        console.log(d,'ddddddd');
    }}class Http3{
    //調用封裝好的屬性裝飾器
   @getMethods('方法') getUrl():any{

    }}let h4 = new Http3()console.log(h4,'h4類');

十、最新的腳手架結合TS創建項目

10.1 創建命令

vue create 項目名稱

注意點：
1、要選擇 typescript
2、要選擇類的組件創建方式

10.2 創建組件

<template>
    <div>
        <h2>歡迎來到首頁</h2>
        <h2>{{name}}</h2>
    </div>
</template>
<script lang='ts'>
import {Vue} from 'vue-property-decorator'
class Home extends Vue{
    //類的作用域省略了聲明方式
    constructor(){
        super()
        //當前this 指向的是子類（包含了父類的屬性和方法）
        console.log(this,'this'); 
    }
}
// 導出這個封裝好的子類組件
export default Home
</script>

10.3 data數據的創建

    name:String    //類的作用域省略了聲明方式
    constructor(){
        super()
        //當前this 指向的是子類（包含了父類的屬性和方法）
        console.log(this,'this'); 
        this.name = '大白起'
    }

10.4methods

{
  //定義方法
  getInfo(){
    console.log('方法被點擊')
  }
}

10.5計算屬性

  //計算屬性
  get allPrice(){
    return 100
  }

10.6生命周期

必須要調用組件裝飾器，否則無法觸發
//類的裝飾器之組件
@Component({

})


  mounted() {
    console.log('加載完成')
  }

10.7組件的嵌套

//引入組件
import {Vue,Component,Watch} from 'vue-property-decorator'
//類的裝飾器之組件
@Component({
  components:{
    vHeader
  }
})

//視圖中
<v-header ></v-header>

10.8組件通信

一、父傳子

• 父組件

 <v-header :name='name' :obj = 'obj' ></v-header>

• 子組件

import {Prop } from 'vue-property-decorator'
export default class vNav extends Vue{
    @Prop() name:any
    @Prop() obj:any
}

• 子組件

       <div>
            <button @click='toFather'>給父親</button>
        </div>
        
//引入組件裝飾器 引入核心Vue類
import {Emit } from 'vue-property-decorator'

    //Emit方法裝飾器 傳參，傳入的參數，就是你的自定義事件名稱
    @Emit('自定義事件名稱')
    toFather(){
        console.log('給父親的散文詩')
        return '這是給父親的散文詩'
    }

• 父組件

    <v-nav @自定義事件名稱='getGift' ></v-nav>
    
    //封裝一個獲取子組件數據的方法
    getGift(e:any):void{
        console.log(e,'數據源');
        
    }

8.9watch監聽（偵聽器）

    //淺監聽
    @Watch('value')
    getValue(newVal:any){
        console.log(newVal,'新值')
    }
    //監聽對象
    //深度監聽@Watch()這個方法裝飾器，有兩個參數，一，監聽的對象屬性。二、配置對象
    @Watch('obj',{
        deep:true, //深度
        immediate:true //立即立刻
    })
    getObj(newVal:any){
        console.log(newVal,'新')
    }

關于“vue中ts文件怎么應用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue中ts文件怎么應用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。