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>