TypeScript基礎語法

TypeScript基礎語法

1、定義數據類型的變量

let myname:string="l4g";
let age:number=32;
let hobby:undefined;

2、當你不確定某個變量是什麼類型時，你可以使用 any 作爲這個變量的類型

let temp:any="test";
temp = false;
temp = 1234;

3、枚舉 可以把類型限制在指定的場景之內

enum course {good,veryGood,ggGood}
console.log(course.good === 0,course[0] === 'good')

4、組合類型 組合的方式組合出新的類型

let course1:string|number ="VUE3"
type courseScore = 'good' | 'veryGood' | 'ggGood'
let score1: courseScore = 'good'
score1 = 'veryGood11'  //報錯

//interface 接口可以定義對象的類型限制
interface course3 {
    name:string,
    price:number,
    img?:string | boolean,
    readonly address:string
}
let vueCourse:course3 = {
    name:'vue3',
    price:55,
    address:'北京市******'
}
vueCourse.address = "湖南省******"  //報錯

5、函數的類型限制

function add(x:number,y:number):number {
    return x+y;
}
type addType = (a:number,b:number)=>number;
let add2:addType = function(x:number,y:number):number{
    return x+y;
}
interface addType1 {
    (a:number,b:number):number
}
let add3:addType1 = function(x:number,y:number):number{
    return x+y
}

6、很多瀏覽器的變量和屬性，怎麼限制類型

let w:Window = window;
let ele:HTMLElement = document.createElement("span")
let allSpan:NodeList = document.querySelectorAll('span')
ele.addEventListener('click',function(e:MouseEvent){
    const args:IArguments = arguments;
})

7、泛型

function getInfo<T>(arg:T):T{
    return arg;
}
getInfo<string>("vue3")
getInfo<number>(1)


//使用keyof語法獲得已知類型的屬性列表，相當於 ‘name’|‘price’
interface couser4 {
    name:string,
    price:number
}
type CourseProps = keyof couser4 // 只能是name和price選一個
let k:CourseProps = 'name'  //值可以是name或price

function getProperty<T,K extends keyof T>(o:T,name:K):T[K]{
    return o[name]
}
const coursePrice={
    'vue':55,
    'go':69
}
getProperty(coursePrice,"vue")
getProperty(coursePrice,"node")  //報錯

8、關鍵字infer，

• <T> 讓我們擁有了給函數的參數定義類型變量的能力，infer 則是可以在 extends 之後的變量設置類型變量，更加細緻地控制類型。下面的代碼中我們定義了 ReturnType 類型函數，目的是返回傳入函數的返回值類型。infer P 的意思就是泛型 T 是函數類型，並且這個函數類型的返回類型是 P。

type Foo = () => CourseProps
// 如果T是一個函數，並且函數返回類型是P就返回P
type ReturnType1<T> = T extends ()=>infer P ?P:never 
type Foo1 = ReturnType1<Foo>