如何使用 vue + typescript 編寫頁面 （typescript簡單語法篇）

在使用typescript編寫項目以前，須要有必定的js【es6】基礎知識。在學習ts的過程當中，類比js的差別，作到基本結合。 開發中除去js報錯的部分，大部分會受到ts的語義限定。

typescript基本內容

1. 變量申明

變量申明的時候，和js同樣但又不同。同樣的是變量申明符號是同樣的，不同的是須要附加類型限定。若是你是一個強類型的語言開發者

// js的聲明
var name;
let age;
const eat;
function play(bool){}
複製代碼

// ts的聲明
var name:string;
let age:number;
const eat:Function; // Function是類型，而function是用來聲明函數變量的，請不要用混
function run(bool:string):void { 
    /* 傳參和基本同樣，須要限定傳值類型， 在函數的參數列表後面須要加上返回值限定 */
}
複製代碼

類型申明時，有一個通用類型 any，這個表示這個變量能夠接受任意類型的值，而且語法器也會忽略掉當前參數爲null/undefined的狀況。建議：除非特殊狀況，儘可能不要使用any做爲參數類型，以便後期修改時，發生沒必要要的錯誤。

1.1 其餘狀況

// 大部分時候，咱們會聲明成這種狀況
// 可是在使用時卻發現，不能賦值，push值。
var classes:[];
// 實際上上面的那個等價於 
var classes:Array<never>;
// 或者等價於
var classes:never[];
複製代碼

never ts獨有的修飾類型，表示當前什麼也沒有。和undefined/null不一樣，ts只存在never的申明，不存在never這個值。

// 當使用
var a:never;
var b = a;
// 此時的a會被語法提示，在賦值前使用了a。所以，須要將a先初始化才能使用，可是又沒有一種值叫never，所以a是無效的聲明類型。

// 那麼，咱們必定要用呢？
// 藉助數組實現
var a:never[] = [];
var b:never = a[0];

// 若是在對象裏聲明使用never呢？
var a = { b:never /*Error: 「never」僅表示類型，但在此處卻做爲值使用。 */ }

複製代碼

2. class 面向對象的類

• 單獨js寫法和ts並沒有不一樣，而且不支持多繼承

class A {  }
class B extends A { }

//子類使用構造函數時，須要有效調用父級構造函數
class Animal { 
    name:string;
    constructor(name:string){
        this.name = name;
    } 
}
class Dog extends Animal {
    constructor(name:string){ 
        super(name)
    } 
}
複製代碼

• js沒有interface，可是在ts下有，支持多實現接口

interface A {  }
interface B extends A { }
class C implements A,B { }
複製代碼

interface 能夠用來類型限定嗎？ 答案是能夠。對於ts來講，所謂類型限定僅僅就是屬性類型和名稱相符合，和類型和名稱沒有太大關係

interface A { name: string; age: number }
interface B { name: string; age: number }
class C { name!: string; age!: number }
var a: A = new C;
var b: B = new C;
var c: C;
// 使用非空類型時，須要先初始化值纔可使用
// 不然就會報錯 Error:在賦值前使用了變量「c」。
a = b = c;
複製代碼

3. 申明類型不可變

js支持var重複申明，ts有<條件>的支持重複聲明

/* 後續變量聲明必須屬於同一類型。變量「a」必須屬於類型「string」，但此處卻爲類型「number」 */
var a:string;
var a:number;

// 重複聲明印證了，類型只和屬性相關，和名稱無關
interface A { name: string; age: number }
interface B { name: string; age: number }
class C { name!: string; age!: number }
var a: A;
var a: B;
var a: C;
複製代碼

4.!: 與 ?:

在咱們編寫代碼的時候，常常會遇到 !: ?:這兩個組合符號，它們和 : 有什麼不一樣？

!: 表示必定存在，?:表示可能不存在 這兩種在語法上叫賦值斷言

所以：

/* : 能夠在任何須要的場合使用 */
 var a:number;
 
 // 不能夠申明變量的時候使用
 var a!:number;
 var a?:number;
 
 // ?: 不能夠字面量賦值時使用
 var a = { name?:"Pluto" }
複製代碼

關於賦值斷言：一般會在class中看見他們的身影

class a {
    sad!: string;
    // 確定斷言不能賦初值
    sad!: string = 'so sad';
    
    // 可是否認斷言，就能夠
    age?: number = 2;
    
    bg = { age!: 16 }
}
複製代碼

在Vue中最多見的確定斷言就是prop還有store引入了，由於咱們確信他們已經存在了

@Component
export default class MyComponent extends Vue {
    @Prop({ default : "" }) myName !: string;
    @State  mystate !: boolean;
}
複製代碼

在Vue中最多見的否認斷言就是函數傳參和類型定義

interface A { 
    name:string
    /* 賦值時，age不是必選項，所以能夠不使用 */
    age?:number
}

var a:A = { 
    name:"16"
}

function getSome(some?:string){
    /* 一般函數咱們使用 給函數參數賦初始值的形式而不是用這種形式 */
    return some||""
}
function getSome(some:string=""){
    return some
}
複製代碼

5. 賦初值屬性

ts中 class定義的屬性若是沒有賦初值，編譯後是不存在的

class A {
    name!:string;
}
new A() .hasOwnProperty("name") // false
複製代碼

更多內容 在線TS編譯結果對照

上一章 如何使用 vue + typescript 編寫頁面 （Vue生命週期函數）