TypeScript基础学习

1.基础类型

 

// 类型声明 指定ts变量的类型   ts编译器自动检查

 

// 布尔类型

let flag:boolean = true

// 字符串类型

 let str:string = 'a'

//  数字类型

let num:number = 10  //十进制

let num1:number = 0b1010  //二进制

let num2:number = 0o12 //八进制

let num3:number = 0xa //十六进制

 

// undefined和Null，用的不多

let u:undefined = undefined

let n:null = null

// undefined和Null 还可以作为其他类型的子类型

// 可以把undefined和Null赋值给其他类型的变量

let b:number = undefined

let str1:string = null

2.数组

// 定义数组一：

let arr:number[] = [1,2,3]

arr = [1,2,3]

// 定义数组二：泛型

let arr1:Array<number> = [10,20,30]

3.对象

// object表示非原始类型,除了number、string、Boolean之外的类型

let obj:object = {}

4.any和void

// any 任何类型   也有缺点

let h:any = 123

h = true

h = '12'

h = 12

h={}

h=[]

let newArr:any[] = [1,'',true]

 

// void 空值，表示没有任何返回值的函数 返回undefined

function fun1():void{

    console.log(12)

}

console.log(fun1())

5.类型推断

// ts 在没有明确的指定类型的时候推测一个类型

 

// 2种情况

// 1.定义变量的时候，直接给变量赋值，则定义类型为对应的类型

// 2.定义变量的时候，没有赋值，则定义类型为any类型

let t = 123  //将t定义为一个number类型通过类型推断

// t = ''报错

6.联合类型

// 表示取值可以为多种类型中的一种

let f:boolean  | number | string= true

// 只能访问此联合类型的所有类型里共有的属性或方法

f=123  //再次赋值，走类型推断，给变量定义一个类型

f='123'

f = true

7.接口

// 行为的抽象，用于对对象的形状进行描述 理解为一种约束

// 定义接口

// 1.接口---对象类型

 

// 接口一般首字母大写

// 定义的变量比接口少了一些属性是不允许的，不能多出其他的属性

//  ? 表示可选属性， 定义对象 ? 的属性可有可无

//  [propName:string]:any  任意属性和任意属性值

//  例子：[propName:string]:string 需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集

// 一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型:

 //用readonly定义只读属性

 

interface IPerson{

    readonly id:number,  //用readonly定义只读属性

    name:string,

    age:number,

    sex?:string, //  ? 表示可选属性

    // [propName:string]:any

    // [propName:string]:string

    // [propName:string]:string | number | boolean

}

let p:IPerson = {

    id:13,

    name:"李华",

    age:18,

    // sex:'男',

    // width:""

}

 

// 2.接口---数组类型

// 不常用，理解

interface INewArray{

    [index:number]:number  //任意属性，index表示数组中的下标

}

let array:INewArray = [12,3]

// 3.接口---函数类型

interface ISearchFunc{

    // (参数：类型,...):返回值的类型

    (a:string,b:string):boolean

}

// 参数，返回值

const fun:ISearchFunc = function(a:string,b:string):boolean{

    return a.search(b)!==-1

}

8.函数声明和函数表达式

// 函数声明，命名函数

// function add(a,b){

//     return a+b

// }

// ts函数声明，命名函数

// a 和b都是number类型

// ：number表示该函数的返回值为number类型

function add(a:number,b:number):number{

    return a+b

}

 

// 函数表达式 匿名函数

// let add2 = function(a,b) {

//     return a+b

// }

let add2 = function(a:number,b:number):number{

    return a+b

}

// 函数完整的写法

let add3:(a:number,b:number)=>number = function(a:number,b:number):number{

    return a+b

}

9.可选参数和默认参数

let getName = (x:string,y?:string)=>{

    return x+y;

}

// 可选参数 ?   必选参数不可能位于可选参数后

// 默认参数是可以放在必选参数和可选参数后的

console.log(getName('zhang'))

10.剩余参数和函数重载

//  剩余参数

function fn(x:string,y:string,...args:number[]){

    console.log(x,y,args);

   

}

fn('','',1,2,3,4)

// 函数重载 ：函数名相同，形参不同的多个函数

11.类型断言

// 定义一个函数 获取到一个数字或者字符串的长度

// 类型断言：可以手动指定一个类型

// 2种类型

// 1.变量as类型

// 2.<类型>变量

function getLength(x:string|number):number{

    if((x as string).length){

        return (<string>x).length

    }else{

        return x.toString().length

    }

}

 

console.log(getLength('123'));

console.log(getLength(123));

// 将任何一个类型断言为any ,any类型是访问任何属性和方法 的

// 它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。

// 一方面不能滥用 as any，另一方面也不要完全否定它的作用，我们需要在类型的严格性和开发的便利性之间掌握平衡

(window as any).a = 10

 

// 将any 断言为一个具体的类型

function abc(x:any,y:any){

    return x+y

}

let a = abc(1,2) as number

let bb = abc(1,2) as string

12.类型别名

// 通过type给类型起别名

type s = string

let st:s ='123'

 

type all = string |number |boolean

let aaa:all =123

aaa = ''

 

// 字符串字面量类型

// 用来约束取值只能是 某几个字符串中得一个

let names:string = '张三丰'

13.元组

let ar:number[] = [1,2,3,4]

 

// 元组（Tuple）合并了不同类型的对象。

let tom:[number,string] = [123,'123']

// 添加内容时，需要是number类型或者string类型

tom.push(123)

tom.push('123')

14.枚举

// 使用枚举类型给一组数值赋予名称

// 可以通过名称去拿取值，通过值去拿去名称

enum NumberType{

    one=1, //手动赋值，没有赋值，第一个参数默认为0

    two, //hou,后面的值如果没有手动赋值，会根据前面的进行

    three,

    four

}

// 手动赋值注意：尽量不要写一些、重复的值

console.log(NumberType.one);

 //枚举项有两种类型：常数项（constant memnber）和计算所得项(computed member)

 enum Color{

    red,

    blue="blue".length

 }

15.泛型

// 泛型指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定具体类型的一种特性。

// 在定义函数或者类时候，如果遇到类型不明确就可以使用泛型

// 泛型的作用就是在类型不明确的时候 使用

// 接口或者泛型 类似一种规范 约束类和方法的

function identity(value) {

   return value

}

function identity1(value:number):number{

    return value

}

function goBack<T>(n: T): T{

    return n;

}

// 可以直接调用具有泛型的函数

let result = goBack(10);  //不指定泛型，ts可以自动对类型进行推断

let result2= goBack<string>('hello');  //指定泛型

 

// 泛型可以同时指定多个

function fnx<T,K>(a:T,b:K){

    console.log(b);

    return a

   

}

fnx<number,string>(123,"hello");

 

interface Inter{

    length:number

}

// T extends Inter 表示泛型T必须是Inter 实现类（子类）

function fn7< T extends Inter >(a: T):number{

    return a.length

}

类