本週typescript實戰小技巧(1)

最近用ts寫了一個vue小插件, 收穫了些小知識點, 和你們分享下. 將來還會持續更新.

獲取類上的屬性的類型

class A{
    n: number
}

const num: A['n'] // number
複製代碼

捕獲字符串類型

注意, typeof捕獲字符串的類型, 是字面量類型, 不是string

// 捕獲字符串的類型與值
const foo = 'Hello World';

// 使用一個捕獲的類型
let bar: typeof foo;

// bar 僅能被賦值 'Hello World'
bar = 'Hello World'; // ok
bar = 'anything else'; // Error'
複製代碼

捕獲鍵的名稱的字面量類型

先用typeof獲取對象類型, 而後用keyof後去鍵值

const colors = {
  red: 'red',
  blue: 'blue'
};

type Colors = keyof typeof colors;

let color: Colors; // color 的類型是 'red' | 'blue'
複製代碼

指定構造函數中this的類型

interface A{
    x:number
}
let a:(this:A)=>number
a =function(){
    this.x =123
    this.y = 467// 錯誤, 不存在y
    return 123 
}
複製代碼

typeof

返回數據類型

const f = (n:number)=>n+1;
type A = typeof f // => (n:number)=>number;
複製代碼

個人項目: 命令式調用vue組件.

github.com/any86/vue-c…