TS基础知识记录（一）-全栈工程师需要了解的前端知识

ts是作为一个全栈工程师必须要了解的前端知识。如果我们使用ionic或者angular的话，都要用到ts。ts对会使用java和c#的开发人员来说是比较简单的。下面的记录作为学习备忘。

typescript安装

首先确保安装了nodejs

在命令行工具输入

npm install -g typescript

网络不好的话，使用cnpm

cnpm install -g typescript

以下是我实际的安装过程（Linux或者UNIX系统如果安装的时候提示权限不够的话就需要要切换到root用户）：

安装完成过后，输入tsc-v查看版本为3.9.5，安装成功。

ts中的可选参数

// ts方法可选参数 
// es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数，配置可选参数的方法就是在你要配置的那个参数后面打一个"?"

function getInfo (name: string, age?: number): string {
    if (age) {
        return `${name} --- ${age}`;
    } else {
        return `${name} ---年龄保密`;
    }
}

alert(getInfo('zhangsan'));
alert(getInfo('zhangsan', 123));
       
// 注意:可选参数必须配置到参数的最后面

剩余参数，使用三点运算符接收

// 三点运算符,接受新参传过来的值
        
function sum (...params: number[]): number {
    let sum=0;
    for (let i = 0; i < params.length; i ++) {
        sum += params[i];  
    }
    return sum;
}
alert(sum(1, 1, 1, 1, 1, 1));

箭头函数

// 箭头函数
// this指向,箭头函数里面的this指向上下文
  
// 原来的写法
setTimeout (function() {
    alert('no-arrow');
}, 2000)

// 箭头函数的写法
setTimeout (() => {
    alert('arrow');
}, 2000)

ts中的类

class Person{
    name: string; 
    constructor(name: string){  // 构造函数   实例化类的时候触发的方法
        this.name=name;
    }
    getName(): string{
        return this.name;
    }
    setName(name: string): void{
        this.name=name;
    }
}

var p = new Person('张三');
alert(p.getName());

p.setName('李四');
alert(p.getName());

ts中的类的继承，extends,super关键字

// 父类
class Person{
    name: string;
    constructor(name: string){
        this.name = name;
    }
    run(): string{
        return `${this.name}在运动`
    }
}
var p = new Person('王五');
alert(p.run())

// 子类
class Web extends Person{
    constructor(name: string){
        super(name);  /*初始化父类的构造函数*/
    }
}

var w = new Web('李四');
alert(w.run());

ts中的抽象类

// typescript中的抽象类：它是提供其他类继承的基类，不能直接被实例化。
// 用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
// abstract抽象方法只能放在抽象类里面
// 抽象类和抽象方法用来定义标准 。   标准：Animal 这个类要求它的子类必须包含eat方法
// 标准:
abstract class Animal{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    abstract eat():any;  // 抽象方法不包含具体实现并且必须在派生类中实现。
    run(){
        console.log('其他方法可以不实现')
    }
}

// var a=new Animal() /*错误的写法*/

class Dog extends Animal{
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    eat(){

        console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小花花');
d.eat();

class Cat extends Animal{
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    run(){
    }
    eat(){
        console.log(this.name+'吃老鼠')
    }
}

var c=new Cat('小花猫');
c.eat();