TypeScript基本概念学习

54 阅读3分钟

使用TS的必要性

问题

  • JS本身是一个弱类型的脚本语言,不利于后期代码维护。
  • 其只能在运行时检查,影响效率,而TS可以在编译前提示错误。

使用TypeScript的优点和必要性

  • 静态类型检查:TypeScript通过类型系统在编译时捕获潜在的错误,例如类型不匹配、未定义的变量等,有助于提高代码质量和减少运行时错误。

  • 代码可读性和可维护性:类型注解提供了更清晰的代码结构,使得代码更易于阅读和理解。此外,类型信息可以充当代码文档,有助于团队合作和代码维护。

  • 提高开发效率:通过提供更强大的自动补全和代码导航功能,TypeScript可以加快开发速度。类型检查和错误提示也有助于减少调试时间。

  • 更好的工具支持:TypeScript具有更丰富的工具生态系统,例如强大的集成开发环境(IDE)支持、自动化构建工具等,能够提升开发体验。

  • 适用于大型项目:在大型项目中,TypeScript的静态类型系统可以帮助开发人员更好地理解和维护代码,减少潜在的错误,并提高代码的可扩展性。

TS基本概念

类型推断

  • ts会根据为变量存放的初始值来进行变量类型限定。
let str='abc';
str = 10;
//报错,不能将number类型赋值给string

类型注解

通过类型注解手动声明当前变量的类型

let str:string='abc';

类型断言

let numArr=[1,2,3];
// 使用类型注解将result的值限定为number,否则代码会出现报错,因为result的值可能存在undefind的情况。
const result=numArr.find(item=>item*2) as number;
result*5;

基础类型和联合类型

// 基础类型
let v1:string='abc';
let v2:number=10;
let v3:boolean=true;
let v4:null=null;
let v5:undefind=undefind;

// 联合类型
let v6:string|null=null;
let v7:1|2|3=2;  //类似枚举;

数组,元组,枚举

// 类型约束
let arr:number[]=[1,2,3];
let arrl:Array<string>=['a','abc'];

//元组:类数组。限定存储数据的个数和类型
//可选操作符?
let t1:[number,string,number?]=[1,'a',2];

//枚举 enum
enum MyEnum {
A,B,C
}

// 两个值是相互对应的
console.log(MyEnum.A);
console.log(MyEnum[0]);

函数

  • void: 通常被赋值给函数
// 所有可选参数应该放在右侧
// 剩余参数rest
function MyFn(a:number,b?:number,...rest:number[]):number{
return a+b;
}

接口

  • 自定义数据类型。
interface Obj {
name:string,
age:number,
}

const obj:Obj={
name:'a',
age:10,
}

类型别名

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

泛型

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

// 可以填入目标类型来调用函数
myFn<number>(1,2);
myFn<string>('a','b');

总的来说,TypeScript 在提高代码质量、可维护性和开发效率方面具有显著优势,对于大型项目或者团队合作来说,使用TypeScript通常能够提供更好的代码质量、可维护性和开发效率。