ts基礎總結

時間 2019-11-06

標籤基礎總結简体版

原文原文鏈接

ts有什麼用

類型檢查, 擁抱es6，支持部分的esNext草案，直接編譯到原生js、引入新的語法糖html

爲何用ts

TypeScript的設計目的應該是解決JavaScript的「痛點」：弱類型和沒有命名空間，致使很難模塊化，不適合開發大型程序。另外它還提供了一些語法糖來幫助你們更方便地實踐面向對象的編程。vue

typescript不只能夠約束咱們的編碼習慣，還能起到註釋的做用，當咱們看到一函數後咱們立馬就能知道這個函數的用法，須要傳什麼值，返回值是什麼類型一目瞭然，對大型項目的維護性有很大的提高。es6

編譯報錯，會生成編譯結果麼？

答案是確定的,固然能夠在tsconfig.json的配置， noEmitONErrorvuex

tsconfig.json的文件配置

還沒搞定typescript

基礎總結

數據類型

boolean 、number、string、null、 undefined、 Symbol
undefined 和null 類型的數據只能被賦值undefined 和null，可是這個類型是全部類型的子類型
void 空類型

// undefined和null是全部類型子類型，均可以賦值
    let num: Symbol = undefined;ss
    let num: number = undefined;
    // undefined類型， 只能給undefined
    let u: undefined = undefined; 
    let n: null = null;
複製代碼

any和類型推斷

// 在ts中，變量在聲明的時候，若是沒有定義其類型，會被識成默認類型 
   let str;
   str = 'I am strgting';
   str = 1024;
   // 未定義類型，直接賦值
   let num= 124; 
   // 等同於 let num:number = 124, 在後面代碼若是賦予num一個string會被報錯
   
   
複製代碼

多個可能屬性

//只能訪問可能屬性的共有屬性
    function getLength(param: string| number) {
        return param.length;
    }
    // 會報錯， 由於 length不是 sting和number類型的共有屬性
    // 技巧--》 使用類型別名
    type possibleType = string | number;
    function getLength(param: possibleType) {
        return param.length;
    }
複製代碼

接口的概念

在ts中，interface包括對行爲的抽象，由類去實現（implements）
也包括對對象輪廓的描述

對象interface -》動態屬性

必選參數和可選參數的類型是動態屬性類型的子集，全部在動態屬性類型設置的時候要設置上全部類型npm

interface userinfo {
    "memberId": number,
    "uName": string,
    "employeeId": string,
    "datetime": string,
    "platformList"?: Array<platform>,
    [propName: string]: string | number | Array<platform> | undefined
  }
複製代碼

只讀屬性的約束力

注意點：只讀屬性的約束力在於第一次給對象賦值的時候，而不是給屬性賦值的時候 readonly和 const的區別： const是變量， readonly是屬性編程

接口-》抽象方法的實現

export interface ISRequest {
      fetch(url: string, arg?: Object, callback?: Function): Promise<Object>;
    }
    
    export class SafeRequest implements ISRequest {
          public async fetch(url: string, arg, callback?: Function): Promise<Object> {
            return new Promise((resolve, reject) => {
                
            })
    }
複製代碼

用接口表示數組

interface NumberArray {
        [index: any]: number
    }
    let numArr: NumberArray = [1, 2, 3]
複製代碼

函數的類型

可選參數, 必須在必選參數後面
參數默認值

function buildName(firstName: string, lastName?: string) {
        
    }
複製代碼

添加默認值的參數識別爲可選參數
剩餘參數

類型斷言

// <類型>值
   // 值 as 類型
複製代碼

疑惑--》聲明文件

當使用第三方庫時，咱們須要引用它的聲明文件，才能得到對應的代碼補全、接口提示等功能。json

聲明文件在哪裏？

與npm包綁定在一塊兒
npm包的維護者並無提供聲明文件，只能由其餘人將聲明文件發佈到@types裏面
本身寫個聲明文件

npm包的聲明文件和全局變量的聲明文件

在 npm 包的聲明文件中，使用 declare 再也不會聲明一個全局變量，而只會在當前文件中聲明一個局部變量。只有在聲明文件中使用 export 導出，而後在使用方 import 導入後，纔會應用到這些類型聲明。 ######declare global 使用 declare global 能夠在 npm 包或者 UMD 庫中擴展全局變量的類型數組

內置對象

內置對象查詢--》點擊
ESMAScript提供了Boolean、Error、Date、RegExpbash

interface obj = {
        param: Function
        param: Promise
    }
複製代碼

枚舉--》數據的雙向映射

enum companyList= {1: 'aaa', 2: 'bbb'}
    var companyList = {
        1: 'aaa',
        2: 'bbb',
        aaa: 1,
        bbb: 2
    }
複製代碼

Vue in Typescript

三大利器

vue-component-class
- 方法能夠直接聲明爲類成員方法。
- 能夠將計算屬性聲明爲類屬性訪問器。
- 默認data被看成類屬性
- data ， render 和vue的生命週期的鉤子直接是類成員的方法，保留這些命名，不要衝突
- 對於其餘的配置項，例如prop、componets等傳遞給裝飾器函數

import Vue from 'vue';
    import Component from 'vue-componet-class';
    Component.resgisterHooks([
        'beforeRouteEnter'
    ])
    @Componnet({
        props: {
            
        },
        components: {
            
        }
    })
    export default class App extends Vue {
        // aa = '';
        // 類型推斷aa是個string， 後面aa只能賦值aa類型
        // 因此最好使用先聲明後
        
        // data
       public tableModelItems: Array<any>;
       constructor() {
           super();
           this.tableModelItems = [];
       }
       // computed
      public get filterTableData() {
		return this.tableData.filter((i: any) => i.refundStatus === 0).length
		
		// 方法
		// 聲明週期
		
		// 此時須要路由函數的生命週期鉤子咋辦
		beforeRouteEnterf() {
		    next() // 必定要寫，不然玩不下去，爲何？
		}
	}
        
        
    }
複製代碼

- vue-property-decorator(依賴vue-component-class提供了更多了裝飾器，代碼更加顯示 )
    - @Emit
    - @Inject
    - @Prop
    - @Provide
    - @Watch
- vuex-class（鏈接了vue和vuex）
    
```js
    
複製代碼

還沒搞定的bug

錯誤--》類型報錯

添加script的類型

<script lang="ts"></script>
    <!--不然下面的類型報錯-->
複製代碼

錯誤之--》Vue中掛載propoty出錯（若是仍是爆紅，重啓ide）

聲明再掛載

<!--inject-->
    import _Vue from 'vue'
    import moment from "moment";
    export default {
      install(Vue: typeof _Vue, options: any) {
        Vue.prototype.$moment = moment;
        Vue.prototype.$log = () => {
          console.log(new Date())
        }
      }
    }
<!--types-->
    import Vue from 'vue'
    declare module 'vue/types/vue' {
      interface Vue {
        $moment: Function
        $log: Function
      }
    }
複製代碼

ts中不能識別.vue文件

TypeScript 默認只識別 .ts 文件，不識別 .vue 文件, 乖乖的寫 import Component from 'components/component.vue'

vuex-class的Emit傳參數給父組件報錯

@emit("reset")
    reset(role, this.formData){}
    <!--此時報錯-->
    
複製代碼

錯誤--> 可選參數爆紅

參考連接

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。