vue中ts是什么文件

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 => 終端=> 運行生成任務 => 選擇監聽 （開啟自動監聽模式）

釋放出，輸出目錄，目錄地址隨意設置   "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，并執行命令set-ExecutionPolicy RemoteSigned將PowerShell的執行策略更改為RemoteSigned

//numberlet a:Number = 10//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 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');

//類的繼承（派生類）//繼承了父類，就擁有了父類的所有屬性和方法// 如果子類中定義的屬性和方法與父類一致，其實就是修改（重置）//子類中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('生肉')

public 公有的（一般定義一個屬性，如果沒有給修飾符，它就是公有的，public是默認），它可以在類中，子類中，類外部被調用 protected 受保護的 它可以在父類與子類中被使用，不能在類的外部被調用 private 私有的 它只能在父類中被調用。不能在子類以及類的外部被調用  在類的作用域中你可以創建屬性，我們可以給它添加修飾符。決定了這個屬性能否被子類或者類的外部所有使用（調用）

///創建一個基本類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 屬性 也可以用?。。?#39;);

//創建一個基本類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 屬性 也可以用?。?！');

//創建一個基本類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 屬性 也可以用！??！');

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

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

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

//抽象類 必須要規定 有 名字  能開（能跑）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  如果我們有一個普通函數，但是函數的參數很復雜，如何去驗證參數的數據類型？？？ 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的信息驗證并賦初始值');

// 接口類 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 h1 = new Http1()console.log(h1,'http類');// console.log(h1.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 h2 = new Http2()console.log(h2,'h2類');console.log(h2.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 h3 = new Http3()console.log(h3,'h3類');

vue create 項目名稱  注意點： 1、要選擇 typescript 2、要選擇類的組件創建方式

<template>     <div>         <h1>歡迎來到首頁</h1>         <h1>{{name}}</h1>     </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>

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

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

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

必須要調用組件裝飾器，否則無法觸發 //類的裝飾器之組件 @Component({  })     mounted() {     console.log('加載完成')   }

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

 <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,'數據源');              }

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