Typescript 基本語法+ 新特性

TypeScript ：

1、獲取TypeScript

$ npm install -g typescript
1.1 編譯TypeScript
$ tsc helloworld.ts
# helloworld.ts => helloworld.js

2、TypeScript基礎(chǔ)語法

2.1 Boolean 類型
let isDone: boolean  = false;
2.2 Number 類型
let count: number = 10;
2.3 String 類型
let name:   string = "zx"
2.4 Array 類型
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];(泛型語法)
2.5 unknown 類型
類型只能被賦值 any 類型 和 unknown 類型
2.6 Tuple 類型(元組)
let tupleType: [string, boolean];
tupleType = ["Semlinker", true];
2.7 Any 類型
let notSure: any = 666;
notSure = "Semlinker";
notSure = false;
在 TypeScript 中，任何類型都可以被歸為 any 類型。這讓 any 類型成為了類型系統(tǒng)的頂級類型（也被稱作全局超級類型）。
2.8 Enum 類型
數(shù)字枚舉：
enum Direction {
    NORTH,
    SOUTH,
    EAST,
    WEST,
}
默認(rèn)情況下，NORTH 的初始值為 0，其余的成員會從 1 開始自動增長

字符串枚舉：
enum Direction {
  NORTH = "NORTH",
  SOUTH = "SOUTH",
  EAST = "EAST",
  WEST = "WEST",
}       
      
異構(gòu)枚舉：
enum Enum {
  A,
  B,
  C = "C",
  D = "D",
  E = 8,
  F,
}
2.9 Void 類型
某種程度上來說，void 類型像是與 any 類型相反，它表示沒有任何類型。當(dāng)一個函數(shù)沒有返回值時，你通常會見到其返回值類型是 void：

tips: 需要注意的是，聲明一個 void 類型的變量沒有什么作用，因為它的值只能為 undefined 或 null：
2.10 Never 類型
never 類型表示的是那些永不存在的值的類型。 
例如，never 類型是那些總是會拋出異?；蚋揪筒粫蟹祷刂档暮瘮?shù)表達(dá)式或箭頭函數(shù)表達(dá)式的返回值類型。

在 TypeScript 中，可以利用 never 類型的特性來實現(xiàn)全面性檢查，具體示例如下:
            type Foo = string | number;
      function controlFlowAnalysisWithNever(foo: Foo) {
          if (typeof foo === "string") {
            // 這里 foo 被收窄為 string 類型
          } else if (typeof foo === "number") {
            // 這里 foo 被收窄為 number 類型
          } else {
            // foo 在這里是 never
            const check: never = foo;
          }
      }
2.11 TypeScript 斷言
2.11.1尖括號 形式
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
2.11.2 as語法
let someValue: any  = "this is string"
let strLength: number = (someValue as string).length
2.12 類型守衛(wèi)（類型保護(hù)）
2.12.1 in 關(guān)鍵字
interface Admin {
    name:   string;
    privileges: string[];
}

interface Employee {
     name: string;
     startDate: Date;
}

type UnknownEmployee = Employee | Admin

function printEmployeeInformation( emp: UnknownEmployee) {
    console.log( "Name:" + emp.name)
    if("privileges" in emp) {
        console.log("Privileges" + emp.privileges);
    }
    if("startDate" in emp) {
        console.log("Start Date" + epm.startDate)
    } 
}
2.12.2typeof 關(guān)鍵字
function padLeft( value: string, padding: string | number) {
    if(typeof padding === "number"){
        return Array(padding + 1).join("") +value;
    }
    if(typeof padding === "string") {
        return padding + value
    }
    throw new Error(`Expected string or number, got '${padding}'.`)
}

注釋：typeof類型保護(hù)只支出兩種形式；typeof v === "typename" 和 
typeof v !=="typename", typename 必須是 "string","number","boolean"或 "symbol"; 但是 typeof  不會阻止你與其他字符串比較； 語言不會把那些表達(dá)式當(dāng)成類型保護(hù)
2.12.3 instanceof關(guān)鍵字
interface Padder {
    getPadderString() : string;
}
class SpaceRepeatingPadder implements Padder {
     constructor(private numSpaces: number ) {}
     getPadderString() {
            return Array(this.numSpace + 1 ).join("");
     }
}

class StringPadder implements Padder {
        constructor(private value:string ) {}
        getPaddingString(){
            return this value;
        }
}

let padder : Padder = new SpaceRepeatingPadder(6);
if(padder instanceof SpaceRepeatingPadder) {
    // padder的類型收窄為："SpaceRepeatingPadder"
}
2.12.4 自定義類型保護(hù)的類型謂詞
function isNumber (x :any): x is number {
    return trpeof x === "number"
}
function isString( x :any ): x is string {
    return typeof x === "string"
}

3.vue3.0 新特性語法

3.1 setup函數(shù)
一、生命周期函數(shù) beforeCreate 和 Created 兩個鉤子函數(shù)之間的函數(shù)； 在setup 函數(shù)中是無法訪問到 data 以及 medthods 的數(shù)據(jù)以及方法
二、setup函數(shù)是 Composition API（組合API）的入口
三、在setup方法中。由于還沒有執(zhí)行 Created周期 無法訪問到this
四、setup函數(shù)只能是同步的不能是異步的
五、setup 函數(shù)定義的方法以及變量最后必須 return 出去 不然模板中是無法使用的
export default {
  setup(props, context) {
    context.attrs, 
    context.slots,
    context.parent, 
    context.root, 
    context.emit
  }
};
3.2 Reactive、Ref、toRef、IsRef

reactive 和 ref 均為 數(shù)據(jù)響應(yīng)式監(jiān)聽 方式
ref 函數(shù)傳入一個值作為參數(shù)，返回一個基于該值的響應(yīng)式ref對象 該對象一旦被訪問或改變，如下 修改 count.value 的值 就可以觸發(fā)重新渲染顯示最新的值；但是ref雖然寫法簡單，但是只能監(jiān)聽一些簡單的數(shù)字、字符串、布爾之類的簡單類型；

 eg:
 export default {
    setup () {
      const count = ref(0)
      const state = reactive({
        reactiveField: 0,
        a: [
          {
            a:1
          }
        ]
      })
      const addRef = () => {
        count.value++
      }
      const addReactive = () =>{
        state.reactiveField++
      }
      const addA = () => {
        state.a[0].a++
      }
      return {
        count,
        ...toRefs(state),
        addA,
        addRef,
        addReactive
      }
    }
  }

一、toRef 將響應(yīng)式對象變?yōu)槠胀ǖ膶ο? ...toRef(data) 在模板中即可使用數(shù)據(jù) 無需增加 例： data.value
二、reactive 響應(yīng)式數(shù)據(jù) readonly 和 reactive 是互斥的數(shù)據(jù)結(jié)構(gòu)

3.3 defineComponent

defineComponent函數(shù)，只是對setup函數(shù)進(jìn)行封裝，返回options的對象；
defineComponent最重要的是：在TypeScript下，給予了組件 正確的參數(shù)類型推斷 。

export function defineComponent(options: unknown) {
    return isFunction(options) ? { setup: options } : options
}
3.4 watchEffect 監(jiān)聽

接收一個函數(shù)，當(dāng)依賴改變時，重新調(diào)用該函數(shù)

const count  = ref(0)
watchEffect(()=> console.log(count.value))
setTimeout(()=>{
    count.value ++
},1000)

當(dāng)watchEffect()在setup()或生命周期鉤子中被調(diào)用時，監(jiān)聽就始終存在該組件的生命周期中，直到組件unmount.另一種卸載監(jiān)聽的情況是，watchEffect()返回一個stop handler，調(diào)用該handler即可停止監(jiān)聽。

const stop = watchEffect(()=>{
      //todo
})
stop()

當(dāng)向后臺獲取數(shù)據(jù)時，watchEffect 接受async回調(diào)函數(shù)

const data = ref(null)
watchEffect( async ()=> {
        data.value = await fetchData(props.id)
})

在 update 函數(shù)也有 watch Effect 用戶定義的watchEffect 會在組件中update 之后再去調(diào)用

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      const count = ref(0)

      watchEffect(() => {
        console.log(count.value)
      })

      return {
        count
      }
    }
  }
</script>

上述代碼，第一輪會同步打印count.value（在onmount生命周期前）; 當(dāng)count發(fā)生改變時，先執(zhí)行組件更新，然后再去log

如果希望 watchEffect 中的回調(diào)函數(shù) 第一次執(zhí)行，放在onmount 后

onMounted(()=>{
        watchEffect(()=>{
                //to do something
        })
})

如果想讓 watchEffect() 調(diào)用發(fā)生在組件update前，或re-run同步，需要傳遞一個帶有flush屬性 ( 默認(rèn)值為post ) 的option對象。

watchEffect(()=>{
    //....
},{
    flush: 'sync'
})
3.5 watch

watch：watch( source, cb, [options] )
參數(shù)說明：

  • source：可以是表達(dá)式或函數(shù)，用于指定監(jiān)聽的依賴對象
  • cb：依賴對象變化后執(zhí)行的回調(diào)函數(shù)
  • options：可參數(shù)，可以配置的屬性有 immediate（立即觸發(fā)回調(diào)函數(shù)）、deep（深度監(jiān)聽

當(dāng)監(jiān)聽 ref 類型時


<script>
import {ref, watch} from 'vue'
export default {
    setup() { 
        const state = ref(0)

        watch(state, (newValue, oldValue) => {
          console.log(`原值為${oldValue}`)
          console.log(`新值為${newValue}`)
          /* 1秒后打印結(jié)果：
                  原值為0
                  新值為1
          */
        })

        // 1秒后將state值+1
        setTimeout(() => {
          state.value ++
        }, 1000)
    }
}
</script>

當(dāng)監(jiān)聽 reactive 類型時

<script>
import {reactive, watch} from 'vue'
export default {
    setup() { 
        const state = reactive({count: 0})

        watch(() => state.count, (newValue, oldValue) => {
          console.log(`原值為${oldValue}`)
          console.log(`新值為${newValue}`)
          /* 1秒后打印結(jié)果：
                  原值為0
                  新值為1
          */
        })

        // 1秒后將state.count的值+1
        setTimeout(() => {
          state.count ++
        }, 1000)
    }
}
</script>

同事監(jiān)聽多個值（數(shù)組形式展示）

<script>
import {reactive, watch} from 'vue'
export default {
    setup() { 
        const state = reactive({ count: 0, name: 'zs' })

         watch(
            [() => state.count, () => state.name], 
            ([newCount, newName], [oldvCount, oldvName]) => {
              console.log(oldvCount) // 舊的 count 值
              console.log(newCount) // 新的 count 值
              console.log(oldName) // 舊的 name 值
              console.log(newvName) // 新的 name 值
            }
          )

          setTimeout(() => {
            state.count ++
            state.name = 'ls'
          }, 1000)
    }
}
</script>
3.6 onRenderTracked onRenderTriggered 新鉤子

除了2.x生命周期等效項之外，3.0Composition API還提供了以下調(diào)試掛鉤

  • onRenderTracked
  • onRenderTriggered
    兩個鉤子都收到DebuggerEvent類似于onTrack和onTrigger觀察者的選項
export default {
  onRenderTriggered(e) {
    debugger
    // inspect which dependency is causing the component to re-render
  }
}

先更新到這里！ 持續(xù)更新~~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Vue3官網(wǎng)文檔[https://vue3js.cn/docs/zh/guide/introduction.htm...
    一蘇沨來閱讀 3,650評論 0贊 7
  • # Vue3的改進(jìn)及特點 1.性能的提升：打包大小減少 41%，初次渲染快 55%，更新快 133%，內(nèi)存使用減少...
    華爾街的主導(dǎo)曲閱讀 20,262評論 1贊 3
  • Vue 的下一代版本（3.0）終于在9.18日發(fā)布正式版了，代號居然叫“One Piece”，不知海賊王粉們會作何...
    飛空之羽閱讀 834評論 0贊 0
  • 1.setup() setup() 函數(shù)是我們使用vue3的Composition API新特性提供了統(tǒng)一的入口。...
    遇一頑石閱讀 1,522評論 0贊 2
  • 性能提升 打包大小減少41% 初次渲染快55%，更新快133% 內(nèi)存使用減少54% 原因：重寫虛擬dom的優(yōu)化和t...
    violet_syls閱讀 3,939評論 0贊 6

友情鏈接更多精彩內(nèi)容