React + ts 基礎篇

現如今前端使用ts做項目的已經占了50%
所以我們學習ts是有必要的，在未來使用ts也是一種趨勢。

這里我們先在通過cmd創建一個react + ts的項目

create-react-app 你的項目名稱 --template typescript

在寫代碼之前我們先了解下什么是typescript：
typescript文檔

TypeScript 的定位是靜態類型語言，在寫代碼階段就能檢查錯誤，而非運行階段。

類型系統是最好的文檔，增加了代碼的可讀性和可維護性。

我們在運行項目時，最終ts會轉成js

之后我們就可以進行代碼書寫
先了解下ts的基本類型用法

let myname: string = "zhaang" const s: string = myname.substring(0, 1) console.log(s);let myage: number = 1000 myage.toFixed(1)let myshow: boolean = false myshow = true console.log(myshow);let me: string | number = "1111" me = 111 console.log(me);let myany: any = 100 myany = true console.log(myany);

如上述所寫，我們在給變量賦值時，會發現如果我們賦值一個字符串，我們再去改變這個變量的值就只能去賦值字符串，而其他類型的我們都不可能去賦值，我們在使用時，可以不用在變量后面：string，去聲明他得類型（有些是必須要聲明的），為了規范我們需要強制自己去寫。如果有不確定的類型，我們可以用any進行聲明。

數組：

// 這里是我們聲明了一個string類型的數組，意思是我們數組里只能去寫string類型的值 let list1: string[] = ['1', '2', '3'] // push number類型會報錯 // list1.push(5) list1.push('4') console.log(list1);// 另一種寫法 泛型類型“Array<T>” T指的是泛型，意思是讓我們自己去規定類型 let list2: Array<string> = ['1', '2', '3'] list2.unshift('8') console.log(list2);// 數組里寫多個類型的值 let list3: (string | number)[] = [1, 2, '2'] list3.push(1111) console.log(list3);// 同理泛型一樣 let list4: Array<string | number> = [1, 2, "aaa"] list4.push(3) console.log(list4);

對象：

// 對對象類型的聲明，我們可以使用接口來進行定義/* * 其實我們在寫在這里的時候會發現（不去定義interface）我們可以正常執行代碼 * 在前面我們寫的時候也會發現，我們的編輯器VScode會在我們不在瀏覽器運行時，就會給我們報錯 * 我們就不必須寫完代碼了，保存了，在瀏覽器中運行了才能看到錯誤，這里如果我們不去定義interfance，編輯器會不報錯 * 但為了規范，我們也需要去實現interfance */interface IObj {name: string,age: number,location?: string, //可選屬性，我們可以不用在obj中寫[propName: string]: any //如果有多個我們可以這樣去寫，可選屬性 } let obj: IObj = {name: '張三',age: 18,// location: '大連'other: "111" } console.log(obj);

函數：

function test1(a: string, b: string, c?: number): string {console.log(a.substring(0, 1) + b.substring(0, 1))// return 返回值的話，我們也需要在函數后面加聲明返回值的類型（非必要）return a.substring(0, 1) + b.substring(0, 1) } // 我們在定義函數的時候有幾個參數我們需傳幾個 如果加入了可選就是非必要了 // 接收返回值也需要聲明類型 var myname: string = test1("aaa", "bbb", 100) console.log(myname)// 通過接口來實現對函數的聲明 interface IFunc {(a: string, b: string, c?: number): string } // c可選 const myFunc: IFunc = (a: string, b: string, c?: number) => {if (c) {return a.substring(0, 1).toUpperCase() + b.substring(1) + c} else {return a.substring(0, 1).toUpperCase() + b.substring(1)} } const str: string = myFunc("abc", "cv") console.log(str);// 另一種聲明方式 interface IObj {name: string,age: number,// 返回值類型直接returngetName: (name: string) => string } let obj: IObj = {name: '1111',age: 1000,getName: (name: string) => {return name} } const str1: string = obj.getName('zzz') console.log(str1);

類ts：

class Bus {// 三種修飾符 public private protected 還有一個靜態staticpublic name = "kerwin" //共有屬性 （外部或內部都可以訪問到）private _list: any = [] //私有變量 （只能在內部中訪問到，外部訪問不到）protected age = 100 //保護屬性（只會在父親或者繼承其類中訪問到）public subscribe(cb: any) {this._list.push(cb)}public dispatch() {this._list.forEach((cb: any) => {cb && cb()})} }class Child extends Bus {aaa() {console.log(this.name, this.age)} }var obj = new Bus() obj.subscribe(() => { })let children = new Child() children.aaa() console.log(children); console.log(obj.name)// obj._list = [] // console.log(obj._list)

類 + 接口

interface Ifunc {getName: () => string,getAge: () => number } // 這里類通過 implements 對接口進行實現 class A implements Ifunc {getAge() {return 100}a1() {}a2() {}getName() {return "AAA"} } class B implements Ifunc {getAge() {return 100}b1() {}b2() {}getName() {return "CCC"} } class C implements Ifunc {getAge() {return 100}getName() {return "CCC"} } function init(obj: Ifunc) {obj.getName()obj.getAge() } //這里我們new出來是一個對象 var objA = new A() var objB = new B() var objC = new C() //通過函數的執行，對類里面的方法調用 init(objA) init(objB) init(objC)

總結

以上是生活随笔為你收集整理的React学习分享（八）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。