文章标题

在写青训营项目的过程中,我发现自己对于ts属于半生不熟的情况,~~恰好文章还一篇没写~~,故写决定写一篇ts相关的文章辅助自己巩固ts知识.

本文章除了掘金所学课程,还依据掘金小册TypeScript 全面进阶指南进行复习

在学习过程中发现ts有很多类似java的部分,看着还挺轻松的

基础类型注解

基础类型

基础类型很简单,属于望文生义的级别,只需要在声明后面添加: <类型>即可.

const name: string = 'linbudu'; 
const age: number = 24;
const male: boolean = false;
const undef: undefined = undefined;
const nul: null = null; 
const obj: object = { name, age, male };
const bigintVar1: bigint = 9007199254740991n;
const bigintVar2: bigint = BigInt(9007199254740991); 
const symbolVar: symbol = Symbol('unique');

集装箱类型

笔者是一个比较粗心的人,在此前曾经将上述的基础类型注解写为了大写的形式Number,String等等.

这类大写的注解被称为装箱类型（Boxed Types）,小写形式的称为拆箱类型（Unboxed Types）.

在ts中,:后面写为装箱类型不会报错,但是不建议这么写,两者的含义并不相同.

void

除了上面的基础类型,ts中还有void类型. void的含义与java中的类似,主要用于表示函数没有返回值或者返回return;

不过其他地方也能用,比如:

const voidVar1: void = undefined;
const voidVar2: void = null; // 需要关闭 strictNullChecks

数组与元组

数组

数组类型也很简单,有两种声明方式

const arr1: string[] = [];
const arr2: Array<string> = [];

一般第一种用得更多

元组

元组(truple) 在我看来是优化的数组对比数组,元组有以下优势

检查越界问题
一个元组的元素可有多种类型
双向映射

对象类型

对象类型的属性很多,如果再像基础类型使用:<声明类型>,将显得非常冗余,不好阅读,因此我们可以将声明使用interface单独列出.

interface

在java中,存在抽象类abstract,在ts中,interface有些类似于abstract,它可以声明对象的结构.

interface IDescription {
  name: string;
  age: number;
  male: boolean;
}

const obj1: IDescription = {
  name: 'linbudu',
  age: 599,
  male: true,
};

type与interface

interface 用来描述对象、类的结构，而类型别名type用来将一个函数签名、一组联合类型、一个工具类型等等抽离成一个完整独立的类型。

函数类型

又叫函数签名.

函数类型有两种声明方式

//函数表达式
const fun = function(num:number):void{}
//函数声明
 function fun (num:number):void{}

但是注意,上面的函数表达式没有对fun进行定义,对于函数类型,我们用下面的形式进行:

// 函数表达式
const foo = (name: string): number => 
{ return name.length } 
// 函数声明 
const foo: (name: string) => number = (name) => 
{ return name.length }

这样注释后,就不用在function部分再标注一次了,不过这样的可读性比上面的差很多,函数表达式的写法不建议用第二种当然还有第三种:用类型别名将函数声明抽取出来

type func = (name:string)=>number
const foo: FuncFoo = (name) => { return name.length }

class类型注解

class的类型与java神似,理解起来还挺轻松的(雾)

class Foo{
    prop:string
    constructor(prop:string){
        this.prop = prop
    }
    print():void{
        console.log(`你好,${this.prop}`)
    }
    get propA():string{
        return `propsA${this.prop}`;
    }
    set propA(value:string){
        this.prop = `${value}+A`
    }

}

记录一些复习发现的遗漏知识点(class的东西太多了,可以另写一篇文章,这里就不再水字数)

getter&setter

get & set可以动态设置属性,当=时调用set,获取时调用get,还可以检查属性是否正确

其中set不能有批注

更简洁的constructor

使用形如this.name = name来初始赋值还是有点子啰嗦,所以还有简化的方法

const Human = class {
    // public name:string
    public age:number
    // private alive:boolean
    // constructor(name:string){
    //     this.name = name
    //     this.age = 10
    //     this.alive = true
    // }
    constructor(public name:string,private alive:boolean){}
}

static和readonly

ts中的static不同于java,它用于指明某变量是原型方法,不会被实例化,不能用this访问,只能通过Human.staticHandler形式访问 readonly表示只能阅读,它可以在实例化对象中读取,不能进行修改.

学习TS ｜ 青训营