全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Angular
  4. 正文

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

2020年7月6日 466点热度 0人点赞 0条评论

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

 

typescript安装

首先确保安装了nodejs

在命令行工具输入

npm install -g typescript

网络不好的话,使用cnpm

cnpm install -g typescript

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

安装typescript

安装完成过后,输入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();

 

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 备忘
最后更新:2020年7月10日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号