快速掌握TS基础知识

TypeScript基础知识

JavaScript是弱类型的脚本语言，使用灵活，但对于大型项目而言，不利于后期代码维护，TypeScript应运而生，是强类型语言

1.常见操作

类型推断

根据变量存放的初始值，对变量数据类型进行限定

let str ='abc';
str =10;//error

类型注解

声明变量或初始化变量时即对变量进行类型限定

let str:string;

let str2:string = 'hello world';

类型断言

断言某个操作结果为某一数据类型否则后续操作可能受影响，需要人工判断

let nums = [1,2,3];
const result = nums.find(item=>item>2) as number;//断言
const ans = result*2;

类型别名

使用 type关键字进行类型别名，也就是自己定义一种类型的使用方式

type MyUserName = string | number;
let a: MyUserName =10;

2.数据类型

基础类型和联合类型

• string

• number

• boolean

• null

• undefined

• object 表示除上面所有类型的类型（非原始类型）

• 使用 |可以联合多个类型或取值，可以结合类型别名使用

  let v1: string | null = null;
  let v2: 1|2|3 = 5;//error
  

数组、元组、枚举

• array 数组 限定存放元素的类型，不能存放不同类型

  let arr: string[] = ['a','b','c'];
  let arr2: Array<number> = [1,2,3];
  

• tuple 元组 限定存储的数据个数和每个数据类型

  let t1:[number,string,number] = [1,'a',3];
  t1[0]='a';//error
  let t2:[number,string,number?] = [1,'a'];//?代表可选，在必选值后面
  

• enum 枚举 使用新关键字enum ,枚举出数据自动进行值的分配（0，1，2……）,定义了一组具名常量，存储了多个对应关系

  enum MyEnum{A,B,C};
  console.log(MyEnum.A);//0
  console.log(MyEnum[0]);//0
  

其他类型

• any表示任意类型
• void表示没有返回值的类型，主要用于函数

3.接口

通常进行一个对象的定义，可以看作对自己创造的类型进行约束

是一个规范，对类型、函数都可以进行规范

interface Person {
    name:string,
    age:number
}

let obj: Person = {
    name:'a',
    age:10
} 

4.函数

• 形参数据类型需要限定
• 形参可以设置默认值，可以设置可选，可选一定在必选后，可以使用剩余运算符
• 返回数据类型需要限定

//a默认值10，c可选，剩下的number类型参数收集为rest数组
function MyFun(a=10,b:string,c?:boolean,...rest:number[]):number{
    return 100;
}

const f = MyFun(20,'abc',true,1,2,3)

5.泛型（Generics）

一种参数化类型的机制，定义函数、类、接口时都可以使用，提高代码复用性

泛型类

class Box<T> {
    //private是指明私有性的关键字
    private value: T;
    constructor(value: T){
        this.value = value;
    }
    
    getValue(): T{
        return this.value;
    }
}

let box = new Box<number>(5);
console.log(box.getValue());//5

泛型接口

interface List<T> {
    add(item: T): void;
    get(index: number): T;
}
//implements 关键字用于类实现接口
class MyList<T> implements List<T>{
    private items: T[];
    
    add(item: T){
        this.items.push(item);
    }
    
    get(index: number){
        return this.items[index];
    }
}

let myList = new MyList<string>();
myList.add('study');
console.log(myList.get(0));//study

泛型函数

function myFun<T>(a:T,b:T): T[]{
    return [a,b];
}

myfun<number>(1,2);
myFun<string>('a','b');
myFun(1,2);//不报错，因为ts可以进行类型推断