TypeScript

官方地址

TypeScript

1. 下載

npm install -g typescript

查看是否安裝成功

tsc -v Version 3.9.7

基本使用

helloworld.ts

console.log("ts hello world");

編譯ts->js

tsc helloworld.ts 即可生成helloworld.js

配置自動編譯

初始化tsconfig.json

tsc --init

找到tsconfig的outdir打開注釋改成outDir:./js

然后終端--> 運行任務(wù)-->typescript-->tsc 監(jiān)視

2. 基礎(chǔ)類型

在編寫ts的時候變量如果聲明了是什么類型的瘪松，是允許修改的！盡管編譯是通過的，但是不建議這么操作

2.1 布爾boolean

let isFlag:boolean = false;
console.log(isFlag)

2.2 數(shù)字類型number

let count:number = 0;
count++;
for(let i:number=0;i<10;i++){
    console.log(i)
}

2.3 字符串類型

let str:string = '123';
str = 'bob'
console.log(str)

2.4 數(shù)組類型

在聲明數(shù)組的時候就已經(jīng)限定好數(shù)組里面的每一個項的類型了市俊，所以在進(jìn)行數(shù)組的CRUD的時候娩缰，都必須要是相同的類型

定義數(shù)組的兩種方式

let arr:number[] = [123,456]

let arr1:Array<string> = ['aaa','111']

let arr:number[] = [123,456]
let arr1:Array<string> = ['aaa','111']
arr.push(1111)
- 這種是不允許的
arr.push('a')
arr[0] = 45444;
console.log(arr,arr1)

2.5 元組類型

元組就是指定義數(shù)組的時候可以指定多種類型萌踱，但是指定的類型必須要和數(shù)組中的元素一一對應(yīng)，不允許超出或者缺少

// 允許
let anyArray:[string,number,boolean] = ['1',1,false]

// 不允許
let anyArray:[string,number,boolean] = ['1',1,false,'aaaa']

// 不允許
let anyArray:[string,number,boolean] = ['1',1]

2.6 枚舉類型

枚舉就是定義一些常量供自己使用 待定

enum Status {
    success = 200,
    serverError = 500,
    noAuth = 403
}

let requestStatus:Status = Status.success;
console.log(requestStatus) // 200

2.7 any類型

定義一個變量為任意類型萨醒，你可以重新給他賦任意類型的值

也可以給一個變量指定多種類型

let num:string|boolean|undefined|null;

let a:any ;
a=123;
a=[123]
console.log(a)

let arr4:Array<any> = [1233,'aaa']
let arr5:any[] = ['aaaa',1]

console.log(arr4,arr5)

2.8 void類型

void一般用于函數(shù) 標(biāo)識函數(shù)沒有返回值

function foo():void{
    console.log('foo')
    // return 123;
}
// 標(biāo)識函數(shù)的返回值是數(shù)字類型
function foo():number{
    console.log('foo')
    // return 123;
}
foo();

2.9 null和undefined

定義一個變量類型為null和undefined 其用處并不是很大

let u: undefined = undefined;
let n: null = null;

2.10 never

用來告知編譯器某處代碼永遠(yuǎn)不會執(zhí)行,從而獲得編譯器提示, 以避免程序員在一個永遠(yuǎn)不會(或不應(yīng)該)執(zhí)行的地方編寫代碼.

function listen() : never{
    while(true){
        let conn = server.accept()
    }
}

listen()
console.log("!!!")  //Error: Unreachable code detected.ts(7027)

// 這里聲明為never函數(shù)表示這個函數(shù)調(diào)用之后下面的代碼不會執(zhí)行 避免別人在下面繼續(xù)寫代碼
function throwError(msg: string ) :never {
    throw new Error(msg)
}

throwError("some error")
// 程序報錯 代碼不會執(zhí)行到著 所以在這里打印是沒有用的
console.log("從這開始代碼是不會執(zhí)行的")  //Error: Unreachable code detected.ts(7027)

2.11 object

定義obj類型可能是用來限定函數(shù)傳入的參數(shù) 待驗真

let obj:Object ={a:123};
// obj.a = 456; // error
obj = {a:456}
console.log(obj)


declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

3. 函數(shù)

3.1函數(shù)的兩種定義方式

ts中的函數(shù)注意以下兩點

• 函數(shù)的返回值類型
• 形參的數(shù)據(jù)類型

function foo1(a:string,b:number):string{
    return 'aaa'
}
const bar2 = function(bar:string):void{
    console.log(bar)
}

函數(shù)也可以返回一個Promise對象

   
async getList(payload?: any):Promise<object>{
        const res = await get_List()
        this.updateList(res)
        return Promise.resolve({a:123})
    }

3.2 可選參數(shù)和默認(rèn)參數(shù)

可選參數(shù)一定要在必須參數(shù)的后面

const bar3 = function(bar:string,age?:number=15):void{
    if(age){
        console.log(age)
    }
    console.log(bar)
}

3.3 剩余參數(shù)

const bar4 = function(...rest:number[]):void{
    console.log(rest)
}
const bar5 = function(...rest:any[]):void{
    console.log(rest)
}
bar5(12,'aaa') // [12, "aaa"]

3.4 函數(shù)重載

同一個函數(shù)名，傳入不同類型的函數(shù)

function hello(name: string): string;
function hello(age: number): number;
function hello(str: any): any {
    if (typeof str == 'string') {
        return str + 'str'
    } else {
        return str + 'number'
    }
}

hello(123)

snabbdom的列子

export declare function h(sel: string): VNode;
export declare function h(sel: string, data: VNodeData | null): VNode;
export declare function h(sel: string, children: VNodeChildren): VNode;
export declare function h(sel: string, data: VNodeData | null, children: VNodeChildren): VNode;

3.5 箭頭函數(shù)

和普通函數(shù)是一樣的

setTimeout(():void => {
    console.log('箭頭函數(shù)')
}, 1000);

4. 類

ts中的類和ES6的類很相似

class Person {
    public name: string;
    public age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    work() {
        console.log(`${this.name}正在學(xué)習(xí)ts`)
    }
}

const per = new Person('liuxuan', 24)
console.log(per)
per.work(); // liuxuan正在學(xué)習(xí)ts

4.1 繼承

class Person {
    public name: string;
    public age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    work() {
        console.log(`${this.name}正在學(xué)習(xí)ts`)
    }
}


class Son extends Person {
    public gender: number;
    constructor(name: string, age: number, gender: number) {
        super(name, age)
        this.gender = gender;
    }
    Console():void {
        if (this.gender == 0) {
            console.log('男')
        } else {
            console.log('女')
        }
    }
}

let son = new Son('劉德華', 15, 0)
son.work(); // 劉德華正在學(xué)習(xí)ts
son.Console(); // 男

4.2 修飾符

• public 子類 類內(nèi)部 類外部都可以訪問
• private 類內(nèi)部可以訪問
• protected 子類和類內(nèi)部可以訪問

private

class Person {
    private name: string;
    public age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    work() {
        console.log(`${this.name}正在學(xué)習(xí)ts`)
    }

}
let son = new Son('劉德華', 15, 0)
子類和類外部無法訪問
let p = new Person('liuxuan',24)
console.log(p.name)// 屬性“name”為私有屬性苇倡，只能在類“Person”中訪問验靡。
let son = new Son('劉德華', 15, 0)
console.log(son.name) // 屬性“name”為私有屬性，只能在類“Person”中訪問雏节。

protected

/*
 * @Description: 
 * @Author: 劉宣
 * @email: 1395380336@qq.com
 * @Date: 2021-05-11 23:17:18
 * @LastEditTime: 2021-05-11 23:41:39
 */

class Person {
    protected name: string;
    public age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    work():void{
        console.log(`{this.name}正在學(xué)習(xí)ts`)
    }
}
class Son extends Person {
    public gender: number;
    static address:string = '安徽省';
    constructor(name: string, age: number, gender: number) {
        super(name, age)
        this.gender = gender;
    }
    Console():void{
        if (this.gender == 0) {
            console.log('男')
        } else {
            console.log('女')
        }
    }
    static yourAddr(){
        console.log(Son.address)
    }
    work():void{
        console.log(`{this.name}正在學(xué)習(xí)ts`)
    }
}
let p = new Person('liuxuan',24)
p.work()
let son = new Son('劉德華', 15, 0)
son.work()  // 劉德華正在學(xué)習(xí)ts
在類的外部是無法訪問的胜嗓。
console.log(p.name)// 屬性“name”受保護(hù)，只能在類“Person”及其子類中訪問
 console.log(s.name)// 屬性“name”受保護(hù)钩乍，只能在類“Person”及其子類中訪問

4.3 靜態(tài)屬性和方法

類的靜態(tài)屬性和靜態(tài)方法都是通過類名來調(diào)用的辞州，也就是說有些方法我們不想實例化之后再調(diào)用，我們希望直接調(diào)用

class Son extends Person {
    public gender: number;
    static address:string = '安徽省';
    constructor(name: string, age: number, gender: number) {
        super(name, age)
        this.gender = gender;寥粹、
        
    }
    Console() {
        if (this.gender == 0) {
            console.log('男')
        } else {
            console.log('女')
        }
    }
    static yourAddr(){
        console.log(Son.address)
    }

}

Son.yourAddr(); // 安徽省

4.4 多態(tài)

就是指 父親定義一個方法 子類都有這個方法 只是每個子類的表現(xiàn)（實現(xiàn)）不一樣 這就是多態(tài)

例如 動物都有吃這個功能 但是狗喜歡吃骨頭 貓喜歡吃老鼠 這就是多態(tài)

class Animal{
    name:string ;
    constructor(name:string){
        this.name = name
    }
    eat(){
        
    }
}
class Dog extends Animal{
    constructor(name:string){
        super(name)
    }
    eat():void{
        console.log(this.name+'吃肉')
    }
}
var dog = new Dog('金毛')
dog.eat();

4.5 抽象類

ts中的抽象類：它是提供其他類型繼承的基類变过，不能被實例化

用abstract關(guān)鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實現(xiàn)并且必須在派生類中的實現(xiàn)

抽象方法只能出現(xiàn)在抽象類中

抽象類和抽象方法用來定義標(biāo)準(zhǔn) 標(biāo)準(zhǔn)：Animal這個類要求它的子類必須包含eat方法 （也就是說抽象類的抽象方法必須在子類中進(jìn)行重寫）

// 定義一個Animal1抽象類
abstract class Animal1{
    abstract foo():any;
}
// Dog1繼承Animal1抽象類 并重寫Animal1的抽象方法eat
// 不重寫父類方法ts就會編譯報錯
class Dog1 extends Animal1{
    constructor(){
        super();
    }
    foo():number{
        console.log('抽象方法的抽象類必須要被重寫')
        return 123;
    }
}
console.log(new Dog1().foo())

5.接口 interface

接口：主要就是用來對行為和屬性的規(guī)范 以及對批量方法的約束

使用：函數(shù)的參數(shù)(key:interface)

屬性和行為的規(guī)范

接口的寫法與類的寫法不同 接口是{}

接口與類的關(guān)系：類實現(xiàn)這個接口

不使用接口進(jìn)行約束實現(xiàn),是無法實現(xiàn)對批量方法進(jìn)行約束的

// printLabel 函數(shù)規(guī)定傳入一個對象 對象上必須有一個label屬性且必須是字符串類型
function printLabel(labelledObj: { label: string }) {
    console.log(labelledObj.label);
}
// 我們傳入的對象參數(shù)實際上會包含很多屬性涝涤，但是編譯器只會檢查那些必需的屬性是否存在媚狰，并且其類型是否匹配
let myObj = { size: 10, label: "Size 10 Object" }; 
printLabel(myObj);

//   并且同時是無法實現(xiàn)批量方法的約束
// printLabel2 和 printLabel對形參的約束是一樣的 但是我們需要重新寫一下
function printLabel2(labelledObj: { label: string }) {
    console.log(labelledObj.label);
}

換成interface

interface Print{
    label:string;
}
printLabel3/printLabel4都是被Print接口約束的
function printLabel3(labelledObj: Print) {
    console.log(labelledObj.label);
}
printLabel3(myObj)

function printLabel4(labelledObj: Print) {
    console.log(labelledObj.label);
}
printLabel4(myObj)

5.1 可選參數(shù)?/只讀參數(shù) readonly

// 可選參數(shù)/只讀屬性
// 和函數(shù)的可選一樣 在名字的后面加上?
interface Print2{
    label:string;
    age?:number;
    readonly gender:number;
}

function printLabel5(labelledObj: Print2) {
    console.log(labelledObj)
    labelledObj.gender = 45; // 無法分配到 "gender" ，因為它是只讀屬性
}

printLabel5({label:'111',gender:123,age:24}) // {label: "111", gender: 123}
printLabel5({label:'111',gender:123,age:24}) // {label: "111", gender: 123,age:24}

5.2 接口小案例

/*
 * @Description: 
 * @Author: 劉宣
 * @email: 1395380336@qq.com
 * @Date: 2021-05-12 11:27:18
 * @LastEditTime: 2021-05-12 13:53:30
 */
interface AjaxConfig {
    type: string;
    url: string;
    data?: any;
    dataType: string;
    header?: object
}

function Ajax(obj: AjaxConfig) {
    var xhr:any = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open(obj.type,obj.url)
    xhr.send(obj.data)
    xhr.onreadystatechange = ():void=>{
        if(xhr.readyState!=4)return;
        console.log(xhr.responseText
            )
    }
}

Ajax({
    type:"GET",
    url:"AAA",
    dataType:"1111"
})

5.3 對函數(shù)進(jìn)行限制

對函數(shù)進(jìn)行限定 可實現(xiàn)對函數(shù)的批量限定,規(guī)定被限定的函數(shù)必須符合我的接口規(guī)范

限定函數(shù)的name屬性為string類型阔拳，age為number類型 返回值為空

interface Func {
    (name: string, age: number): void;
}

// 批量對func和func1進(jìn)行限定
var func: Func = function (name: string, age: number): void {
    console.log(name + "==" + age)
}
func(12,22) // Error
func('12',22) // Success


var func1: Func = function (name: string, age: number): void {
    console.log(name + "==" + age)
}
func1(12,22) // Error
func1('12',22) // Success

5.4 對類類型進(jìn)行限定

對類的類型進(jìn)行限定崭孤。類和類之間叫實現(xiàn) implements

規(guī)定：凡是實現(xiàn)我這個類的 必須存在存在name為string 和eat方法 且這兩個方法的類型必須要和我接口保持一致

interface Animal {
    name: string;
    eat(name: string): number;
}

class Dog3 implements Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat() {
        console.log(name + "===吃")
        return 123;
    }
}

let d = new Dog3('金毛');
d.eat();

5.5 可索引接口

指的是對對象和數(shù)組進(jìn)行限定

索引為number類型就是對數(shù)組的限定，索引為字符串類型就是對對象進(jìn)行限定

數(shù)組：

interface Arrays {
    // 限定數(shù)組的索引為number 且數(shù)組項為數(shù)字
    [index: number]: number
}
let newArr: Arrays = [123, 'aa'] // 不能將類型“string”分配給類型“number”
let newArr1: Arrays = [123]

對象

interface Objects {
    // 限定對象的索引為string 對象的key限定為string
    [index: string]: string 
}
let obj1: Objects = {
    'name': 'zs',
     age: 18, // 這里的key應(yīng)該為字符串
}

5.5 接口的擴(kuò)展（接口繼承接口）

接口繼承接口 并且實現(xiàn)了類

City類必須要同時符合Area和Province接口規(guī)范糊肠，

interface Area {
    area: string;
}
// 接口繼承接口
interface Province extends Area {
    province: string;
}
class China {
    country: string;
    constructor(country: string) {
        this.country = country;
    }
}
// City類繼承China類并實現(xiàn)了Province接口
class City extends China implements Province {
    province: string;
    area: string;
    constructor(province: string, area: string, country: string) {
        super(country)
        this.province = province
        this.area = area
    }
    hello(){
        console.log(this.province,this.area,this.country)
    }
}

let C = new City("安徽省", "華東", "china")
C.hello(); // 安徽省 華東 china

6 泛型

泛型:可以支持不特定的數(shù)據(jù)類型 要求：傳入的參數(shù)和返回的參數(shù)是一致的

具體的類型 T由傳入時候的數(shù)據(jù)類型來決定

泛型就是解決類 接口 方法 的復(fù)用性 以及對不特定數(shù)據(jù)類型的支持

回顧之前 我們在定義函數(shù)或者類或者接口的時候 我們都是直接把它們的數(shù)據(jù)類型寫死了 辨宠，這導(dǎo)致他們無法進(jìn)行一個復(fù)用，使用泛型可以有效的解決這類問題

6.1 泛型函數(shù)

// 不使用泛型
function foo(name: string): string {
    console.log(name)
    return name;
}
foo('123')
// 如果我們想傳入數(shù)字怎么辦（可以設(shè)置為any類型货裹，但是這樣就失去了類型校驗的價值）?  再寫一份 

function foo1(name: number): number {
    console.log(name)
    return name;
}
foo1(123)

// 到此發(fā)現(xiàn) 這顯然是很冗余的

// 使用泛型 

function foo4<T>(name: T): T {
    console.log(name)
    return name;
}
foo4('123')
foo4(456)

// 使用泛型之后 foo4函數(shù)被重用了

6.2 泛型類

// 普通類

class Foo7 {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    printName() {
        console.log(this.name)
    }
}

let foo7 = new Foo7('liuxuan');
foo7.printName(); // liuxuan

let foo8 = new Foo7(123); // 類型“number”的參數(shù)不能賦給類型“string”的參數(shù)嗤形。

// 到此發(fā)現(xiàn)這個類也是存在局限的 因為我們在初始化的時候 只能傳入string類型的

泛型類

// 泛型類

class Foo8<T>{
    name: T;
    constructor(name: T) {
        this.name = name;
    }
    printName(): void {
        console.log(this.name, 'printName')
    }
}

let foo9 = new Foo8('foo8')
let foo10 = new Foo8(10)
foo9.printName()
foo10.printName()

// 使用泛型類之后，這個Foo8類 顯然可以支持更多的類型了 減少了代碼的冗余

6.3 泛型接口

// 泛型接口


// 普通接口
interface Bar1 {
    name: string;
    eat(name: string, food: string): void;
}

class Bar2 implements Bar1 {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(): void {
        console.log(this.name) // 楊訓(xùn)鵬
    }
}

let bar10 = new Bar2('楊訓(xùn)鵬')
bar10.eat();

// 這個接口也是存在局限性的弧圆，因為這個接口只支持string類型的
new Bar2(10) // 類型“number”的參數(shù)不能賦給類型“string”的參數(shù)赋兵。

泛型接口

// 使用泛型接口對函數(shù)和屬性進(jìn)行泛型限定

interface Bar99<T> {
    name: T;
    eat(name: T, food: T): void;
}

class Bar999<T> implements Bar99<T> {
    name: T;
    constructor(name: T) {
        this.name = name;
    }
    eat(name: T, food: T): void {
        console.log(name,food,"name-food") 
    }
}
new Bar999<string>('helloWorld').eat('name','food') // helloWorld
new Bar999<number>(123).eat(1,2) // 123

6.4 把類當(dāng)作泛型

用來限定傳入的類型是我類的實例

案例:封裝一個數(shù)據(jù)庫操作類

數(shù)據(jù)庫DBI接口

interface DBI<T> {
    add(info: T): boolean;
    update(info: T, id: number): boolean;
    delete(id: number): boolean;
    get(id: number): any[];
}

定義MSsql類

實現(xiàn)泛型接口的類也必須是一個泛型類

class MSSQL<T> implements DBI<T>{
    add(info: T): boolean {
        console.log(info) // User {username: "wgy", password: 91129}
        throw new Error("Method not implemented.");
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }
    get(id: number): any[] {
        throw new Error("Method not implemented.");
    }
}

定義一個MYSQL類

class MYSQL<T> implements DBI<T>{
    add(info: T): boolean {
        console.log(info) // User {username: "wgy", password: 91129}
        throw new Error("Method not implemented.");
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }
    get(id: number): any[] {
        throw new Error("Method not implemented.");
    }

}

我們要向數(shù)據(jù)庫添加用戶 所以要限定傳入的數(shù)據(jù)必須要限定為User類的實例

class User{
    username:string;
    password:any;
    constructor(username:string,password:any){
        this.username = username;
        this.password = password;
    }
}

操作

// 像數(shù)據(jù)庫中插入用戶信息
let user = new User('wgy',91129);
// 使用類泛型 來限定傳入我數(shù)據(jù)的數(shù)據(jù)必須是User的實例
let ms = new MSSQL<User>();
ms.add(user)
// ms.add(123) // 類型“number”的參數(shù)不能賦給類型“User”的參數(shù)笔咽。

7.模塊

ts中的模塊封裝遵循的是ES6的 export/import語法

對上面的DB案例進(jìn)行封裝

新建DB-interface.ts用來保存接口

interface DBI<T> {
    add(info: T): boolean;
    update(info: T, id: number): boolean;
    delete(id: number): boolean;
    get(id: number): any[];
}

export default DBI;

新建MYSQL類 操作mysql

import DBI from "./DB-interface"
export default class MYSQL<T> implements DBI<T>{
    add(info: T): boolean {
        console.log(info) // User {username: "wgy", password: 91129}
        throw new Error("Method not implemented.");
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }
    get(id: number): any[] {
        throw new Error("Method not implemented.");
    }

}

新建MSSQL類 操作微軟的sql

import DBI from "./DB-interface"
export default class MSSQL<T> implements DBI<T>{
    add(info: T): boolean {
        console.log(info) // User {username: "wgy", password: 91129}
        throw new Error("Method not implemented.");
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }
    get(id: number): any[] {
        throw new Error("Method not implemented.");
    }

}

新建User類 操作用戶信息

export default class User{
    username:string;
    password:any;
    constructor(username:string,password:any){
        this.username = username;
        this.password = password;
    }
}

demo.ts中使用

導(dǎo)入

import MSSQL from "./modules/MSSQL-DB";
import MYSQL from "./modules/MYSQL-DB";
import User from "./modules/User";

使用

// 像數(shù)據(jù)庫中插入用戶信息
let user = new User('wgy',91129);
// 使用類泛型 來限定傳入我數(shù)據(jù)的數(shù)據(jù)必須是User的實例
let ms = new MSSQL<User>();
ms.add(user)
// ms.add(123) // 類型“number”的參數(shù)不能賦給類型“User”的參數(shù)。

到此就完成了模塊話

----demo.ts
----modules
------DB-interface.ts
------MYSQL-DB.TS
------MSSQL-DB.TS
------User.ts

8.命名空間

9.裝飾器

9.1 類裝飾器

9.2 屬性裝飾器

10.ts在vue中的使用

前言：在寫法上 只有js的部分寫法變了 ,主要是以下兩個包(裝飾器)

vue-property-decorator

vuex-module-decorators

首先先創(chuàng)建一個ts的項目霹期，然后裝包(一個是vue的一個是)

cnpm i vue-property-decorator vuex-module-decorators -S

10.1與Vue 寫法上的區(qū)別

注意：下面的寫法都是在export default class About extends Vue {}寫的

首先最基本的我們需要引入兩個函數(shù)吧

import { Component, Vue} from "vue-property-decorator";

@Component聲明組件

https://segmentfault.com/a/1190000019906321

@Component 裝飾器可以接收一個對象作為參數(shù)叶组，可以在對象中聲明 components ，filters经伙，directives等未提供裝飾器的選項，也可以聲明computed勿锅，watch等 ,目前我還沒用到帕膜，用到了寫

@Component({
  name: "About",
  components: {
    User
  }
})

以前的寫法

name:"About",
components:{
    User
}

10.1.1.vue文件的寫法區(qū)別

react

class Test extends React.Component{}

ts-vue

export default class About extends Vue {}

js-vue

export default {}

10.1.2.data

// 定義一個User接口 用來約束UserList的數(shù)據(jù)類型
interface IUser {
  name: string;
  age: number;
  sex?: number;
  id: number;
}

private firstName: string = "liu";
  private lastName: string = "xuan";
  private CPC: any = "v-model自定義組件";
  private obj: any = {
    names: "zs",
    age: 20,
    sex: 1,
    id: 123
  };
  userList: IUser[] = [
    {
      name: "zs",
      age: 20,
      sex: 1,
      id: 123
    },
    {
      name: "wu",
      // age: '18', // 受到interface接口的約束
      age: 15,
      sex: 0,
      id: 456
    }
  ];

vue

  data(){
    return {
      firstName:"liu",
     lastName:xuan
  },

10.1.3 computed

private get fullName():string{
    return this.firstName + this.lastName;
}

 computed:{
      fullName(){
        return this.firstName+this.lastName
      }
 },

10.1.4 watch

import {Watch} from "vue-property-decorator"
@Watch("firstName",{immediate:true,deep:true})
 // 這里的名字是隨便寫的 不固定的
private firstNameChange(newVal: any, oldVal: any): void {
    console.log(newVal, oldVal, "我相當(dāng)于Vue的Watch監(jiān)聽");
  }

watch(){
   firstName:{
       handler:(newval,oldval){
       
        },
        deep:true,
        immediate:true
   }
}

10.1.5 生命周期函數(shù)

生命周期函數(shù)的寫法還是和之前是一樣的

  public created() {
    this.lastName = "wgy";
    this.getList();
    console.log("我是聲明周期函數(shù) 我的寫法還是和之前是一樣的");
  }
  public mounted() {
    console.log("我是聲明周期函數(shù) 我的寫法還是和之前是一樣的");
  }

10.1.6 普通函數(shù)

寫法也是和之前一樣的 真要說區(qū)別的話 多了一些方法的修飾符

  private addCount()：void {
    AboutStore.updateCount(11);
  }

  private getList():void{
     AboutStore.getList().then(res=>{
       console.log(res) // {a:123}
     })
  }

子組件

    <User
      v-for="(userItem, index) in userList"
      :sex="userItem.sex"
      :age="userItem.age"
      :id="userItem.id"
      :name="userItem.name"
      :key="index"
      :userItem="userItem"
      v-model="CPC"
    ></User>

10.1.7 prop

  import { Prop } from "vue-property-decorator";
  @Prop(Number) private id!: number; // id后面加上! 表示屬性斷言 表示這個屬性在ts里面一定會有的
  @Prop({ type: Number, required:true }) private age!: number;
  @Prop({ type: String }) private name!: string;
  @Prop({ type: Number }) private sex!: number;

prop:{
    age:{
        type:Number,
        required:true
    }
}

10.1.8 emit

 @Emit("changeCPCtocpc")
  clickHandle(): string {
    //這里return得會作為參數(shù)傳遞給父組件
    return "cpc-vue1";
  }

  clickHandleJs(): void {
    this.$emit('changeCPCtocpc','cpc-vue1')
  }

10.1.9 model

  @Model("changeCPCtocpc", { type: String }) private vmodel!: any;

model:{
    event:"changeCPCtocpc",
    prop: vmodel
}

10.2 Vuex的使用