快速掌握TS基础知识

发布时间:2023年12月25日

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可以进行类型推断
文章来源:https://blog.csdn.net/bfbshs_ddd/article/details/135207275
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。