TypeScript(一)

一.TypeScript基础类型

  1. boolean

    const flag: boolean = false

  2. number

    const num: number = 123

  3. string

    const str: string = 'abc'

  4. 数组（两种书写方式）

    const arr: Array<number> = [1, 2, 3, 4, 5];
const arr: string[] = ['a', 'b', 'c'];

  5. 元组Tuple：元组是一种特殊的数组，用于指定数组中指定位置的元素类型, 后面值必须与前面的类型一一对应

    const tup: [string, number, boolean] = ['a', 123, true];

  6. enum枚举：一般用于标识多种不同的状态

    enum State {
    success,
    error = 3,
    warning
}
let currentState1: State = State.success
console.log(currentState1) // 输出：0  默认情况下，元素编号从0开始
let currentState2: State = State.error
console.log(currentState2) // 输出: 3  可以手动指定元素的编号，上面指定为3
let currentState3: State = State.warning
console.log(currentState3) // 输出: 4 因为前一个元素的编号被手动指定为3，所以下一个元素如果没有指定编号，则其编号在上一个元素编号的基础上继续叠加

// 当我们知道数值是4， 但是不确定4是哪一个状态时，可以查找相应的名字
let StateName: string = State[4]
console.log(StateName) // warning

  7. void：一般用于函数没有返回值

    const func = (): void => {
   console.log('not return')
}

  8. any：可移除类型检查

  9. null/ undefined：是其他类型(never)的子类型

    const a: null = null
const b: undefined = undefined

  10. 其他类型 never：表示从不会出现的值

    let c: never = (() => {
    throw new Error('error')
})()
let d: never = (() => {
    while(true) {}
})()

二.TypeScript函数

  1. 函数定义

    1-1.函数声明

    function getName(): string { // 在参数列表后面指定函数返回值类型
    return 'john'
}

    1-2.匿名函数

    let foo = function(): number {
    return 123
}

    1-3.ts中定义方法传参

    let getUserInfo = function (name: string, age: number): string { // 指明参数的类型和函数返回值的类型
    return `姓名：${name}, 年龄：${age}`
}

    1-4.ts中没有返回值的方法

    function foo(): void {
    console.log('foo')
}

  2. 可选参数

    ES5里面方法的实参和形参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数

    配置可选参数的方法： 在参数之后 冒好之前加上 "?"

    注意：可选参数必须配置到参数列表的最后面

    function getUserInfo(name: string, age?:number): string {
    if (age) {
        return `姓名：${name}, 年龄：${age}`
    } else {
        `姓名：${name}, 年龄: 未知`
    }
}

  3. 默认参数

    function getUserInfo(name: string, age: number = 20): string {
    if (age) {
        return `姓名：${name}, 年龄：${age}`
    } else {
        `姓名：${name}, 年龄: 未知`
    }
}

  4. 剩余参数

    // function sum(a: number, b: number, c: number, d: number): number {
//   return a + b + c + d
// }
// sum(1, 2, 3, 4) // 参数传多了会报错\

// 扩展运算符： 接收形参传过来的值
function sum(a: number, ...result: number[]): number {
    let sum = a;
    for(let i = 0; i < result.length; i++) {
        sum += result[i]
    }
    return sum;
}

  5. 函数重载

    es5中如出现同名方法，后面的方法会覆盖前面的方法

    ts中的重载，同样的方法传入不同的参数，从而实现不同的功能

    function getInfo(name: string): string;
function getInfo(age: number): number;
function getInfo(a: any): any {
    if (typeof a === 'string') {
        return '姓名：' + a
    } else {
        return '年龄：' + a
    }
}
console.log(getInfo(20)); // 年龄：20
console.log(getInfo('zhangsan')) // 姓名：zhangsan

三.TypeScript中的类

  1. ts中类的定义

    class Person {
  name: string // 属性 前面省略了public关键词
  constructor(name: string) { // 构造函数 实例化类的时候触发的方法
    this.name = name
  }

  getName(): string {
    return this.name
  }

  setName(name: string): void {
    this.name = name
  }

  run(): void {
    console.log(this.name)
  }
}
let p = new Person('mike')
console.log(p.getName()) // mike

p.setName('john')
console.log(p.getName()) // john

  2. ts中如何实现继承：extends，super关键字

    class Person {
  name: string
  constructor(name: string) {
    this.name = name
  }

  run(): string {
    return `${this.name} is sporting`
  }
}
// 让 Web类 继承 Person类
class Web extends Person {
  constructor(name: string) {
    super(name) // 初始化父类的构造函数
  }
  run() {
    return `${this.name} is sporting --- children`
  }
}
let w = new Web('lucy')
console.log(w.run());

  3. 类里面的修饰符

    typescript里面定义属性的时候给我们提供了三种修饰符：

    public: 公有， 在当前类里面、子类里面、类外面都可以访问

    protected： 保护类型，在当前类里面、子类里面可以访问，在类外面无法访问

    private： 私有，在当前类里面可以访问、子类、类外面都无法访问

    class Person {
  public name: string    // 公有属性 public
  // protected name: string // 保护属性 protected
  // private name: string      // 私有属性 private
  constructor(name: string) {
    this.name = name
  }
  run(): string {
    return `${this.name} is sporting`        // 当前类里面
  }
}

class Web extends Person {
  constructor(name: string) {
    super(name)
  }
  sleep(): string {
    return `${this.name} is sleepping`   // 子类里面
  }
}

let p = new Person('hhh')                   // 类外部
console.log(p2.name); // 输出： hhh

  4. 静态属性，静态方法

    静态属性：直接通过类来调用

    实例属性：需要先实例化对象，再通过实例化对象来调用

    class Person {
  public name: string
  public age: number
  static sex = '男'
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  run() { // 实例方法
    console.log(`${this.name} is runing`)
  }

  static print() { // 静态方法 静态方法里面没法直接调用类里面的属性，只能访问静态属性
    console.log('静态方法里面访问静态属性：' + this.age) // 报错
    console.log('静态方法里面访问静态属性：' + this.sex) // 静态方法里面访问静态属性： 男
  }
}

Person.print()

console.log(Person.sex)  // 男

  5. 多态

    父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现

    多态也是继承的一种表现

    class Animal {
  public name: string
  constructor(name: string) {
    this.name = name
  }
  eat() {
    console.log('eat funciton')
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name)
  } 

  eat() {
    return this.name + 'eat meat'
  }
}

class Cat extends Animal {
  constructor(name: string) {
    super(name)
  }
  
  eat() {
    return this.name + 'eat fish'
  }
}

  6. 抽象方法

    ts中的抽象类，它是提供其他类继承的基类，不能直接被实例化

    用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现

    abstract抽象方法只能放在抽象类里面

    // 抽象类和抽象方法来定义标准， 标准：Animal这个类要求它的子类必须包含eat方法
abstract class Animal { // 无法创建抽象类的实例
  public name: string
  constructor(name: string) {
    this.name = name
  }
  abstract eat(): any // 抽象方法在子类中必须实现（抽象类中的抽象方法不包含具体实现并且必须在派生类（子类）中实现）
}

class Dog extends Animal {
  constructor(name: any) {
    super(name)
  }

  // 抽象类的子类必须实现抽象类里面的抽象方法
  eat() {
    console.log(this.name + ' eat meat')
  }
}

class Cat extends Animal {
  constructor(name: any) {
    super(name)
  }

  eat() {
    console.log(this.name + ' eat fish')
  }
}
let d = new Dog('dog')
d.eat() // dog eat meat
let c = new Cat('cat')
c.eat() // cat eat fish

持续更新。。。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,470评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,393评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,577评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,176评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,189评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,155评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,041评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,903评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,319评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,417评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,013评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2赞 353

推荐阅读更多精彩内容