TypeScript基础 - 技术栈

变量

JS中的变量，弱类型

声明变量时不用指定类型，且变量的数据类型可任意切换
TS中在声明变量时，大部分情况需要指定数据类型
var num:number = 10声明变量num，且指定变量类型为数字类型

如果把变量修改成指定类型以外的数据类型，则会报错
num = 'abc'错误:(4, 1) TS2322: Type 'string' is not assignable to type 'number'.

在编译的过程中会提示错误，但是不会阻止编译

如果不指定类型会怎样？

typescript 复制代码

var abc;
// abc = 10;
// abc = 'abc';
abc = true;

情况一：声明时未赋值，则该变量可以保存任意类型的值

typescript 复制代码

var bcd = 10;
bcd = 'bcd';

情况二：声明时虽然不指定类型，但是赋值，那么赋值的数据类型就是该变量的指定类型

如何声明一个可以保存具有初始的变量且可以切换数据类型

typescript 复制代码

var zzz:any = 10;
zzz = 'zzz';

特殊变量------数组

指定保存一种数据类型的数组

typescript 复制代码

var arr1:Array<number> = [1,2,3]
// arr1 = [1,2,'a']

不指定保存类型，且直接赋值的数组中存在多种类型

typescript 复制代码

var arr2 = [1,2,'a','b']
arr2 = [1,2,3]
arr2 = ['a','b','c']
//arr2 = [true]

此时数组中只能保存第一次赋值时就存在的数据类型，否则报错。

如何声明，保存任意类型的数组

typescript 复制代码

var arr3:Array<number>
arr3 = [1,2]
arr3 = ['a']
arr3 = [false]

方法（function）

参数

typescript 复制代码

function fn0(a: any, b: any, c: any){
    console.log(a+b+c);
}
//参数个数
fn0(1,2,3)
// TS2554: Expected 3 arguments, but got 2
fn0(4,5)
// TS2554: Expected 3 arguments, but got 4
fn0(4,5,6,7)

所以实参与形参必须一一对应

参数默认值

typescript 复制代码

function fn1(a: number,b=100){
    console.log(a+b);
}
fn1(10)// 11 不给b传值，则b默认是10
fn1(10,20)// 3 传值则使用实参
fn1(1,'a')// 报错

形参相当于在运行函数时声明的局部变量，参数默认值相当于在声明时赋的值，没有参数默认值，就相当于声明未赋值，所以此例中，b的默认值是10，相当于变量b声明时就赋值为数字类型，后续中b的指定类型就是数字，所以实参如果改变类型，就会报错

不定参数

typescript 复制代码

function fn2(a: any, b?: any){
    if (b)
        console.log(a+b);
    else
        console.log(a);
}
fn2(10)
fn2(10,20)

不定参数，可传可不传，但是函数内，不能直接使用不定参数，需分类讨论

typescript 复制代码

// TS1016: A required parameter cannot follow an optional parameter.
function fn3(b?: any, c: any){ }

不定参数后面不能有普通参数

返回值

指定返回值的类型

typescript 复制代码

function fn5(a: number, b: number):number{
    return a+b;
}

特殊的，指定不允许有返回值

typescript 复制代码

// Type number is not assignable to type void
function fn6():void{
    return 1;
}

此时函数不允许有返回值

允许返回任意类型（包括没有返回值）

指定返回any和不指定返回值类型，均可实现

typescript 复制代码

function fn7():any{
    // return 1;
    // return 'abc';
    // return [1,2,3];
    // return true;
}

没有返回值也被允许

typescript 复制代码

function fn7(){
    // return 1;
    // return 'abc';
    // return [1,2,3];
    // return true;
}

参数长度不确定

求所有参数的和

typescript 复制代码

function sum(...args:Array<number>){
    var sum=0;
    for(let i=0;i < args.length;i++){
        sum += args[i];
    }
    console.log(sum);
}

TS中的类

TS中的类，需要先声明构造函数中的属性

typescript 复制代码

class Person{
    public name;
    public age;
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    }
    eat(){
        console.log(this.name+" is eating");
    }
}

TS中的继承

需要给子类的新属性提前声明

typescript 复制代码

class Student extends Person{
    private school;
    constructor(name:string,age:number,school:string){
        super(name,age);
        this.school=school;
    }
    study(){
        console.log(this.name+" is studying in "+this.school);
    }
}