• 周一. 8月 15th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

typescript入门

admin

11月 28, 2021

typescript入门

1、环境
* 需要nodejs环境
* 安装:npm i -g typescript
* 查看版本:tsc -V
* 手动编译:tsc helloworld.ts
2、基本数据类型
名称 类型
布尔值 boolean
数字 number
字符串 string
undefined和null undefined/null
数组 number[]/Array<number>
元祖 [string,number,boolean]
枚举 enum Color{red=1,green,blue}
console.log(Color[1]) //red
any和void any/void
object object
联合类型 string|number
类型断言 (<string>str)/(str as string)
类型推断 let a=100 //number类型
let a //any类型
备注 首字母大写为包装类型,首字母小写为基本数据类型
3、接口
a、普通接口
interface IPerson {
  // 只读
  readonly name: string
  // 可有可无
  age?: number
}
b、函数式接口(只有一个方法的接口)
interface IPerson {
  (arg:string):boolean
}
c、未知属性接口
interface IProp{
  [propName:string]:any
}
d、数组接口
interface IArr{
  [index:number]:any
}
4、类
class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(this.name, this.age)
  }
}
5、继承
interface IPerson {
  sleep(arg: string): boolean
}

interface IAnimal extends IPerson {
  eat(arg: number): boolean
}

class Person implements IAnimal {
  gender: string

  constructor(gender: string) {
    this.gender = gender;
  }

  eat(arg: number): boolean {
    return false;
  }

  sleep(arg: string): boolean {
    return false;
  }
}

class Animal extends Person {
  constructor(gender: string = '男') {
    super(gender);
  }

  work() {
    // super关键字只能访问父类的方法,不能访问属性
    super.sleep('aaa')
  }
}
6、多态
// 与java不同,typescript无法强制类型转换
let person: IAnimal = new Person()
7、访问修饰符
public(默认):本类、子类、外部可以访问
private:本类可以访问
protected:本类、子类可以访问
readonly:只读修饰符(只能在构造函数中修改属性值)
备注:访问修饰符也可用在构造函数的参数上,此时构造函数的参数会成为类的属性
8、存取器(getter和setter)
// 只设置getter那就只能读,只设置setter那就只能写,都不设置或都设置可读可写
class Animal {
  private _name: string

  get name(): string {
    return this._name;
  }

  set name(value: string) {
    this._name = value;
  }
}
9、静态成员
// 与java不同实例对象无法访问静态成员
class Animal {
  // 类中有内置的name属性,所以name不能作为静态成员
  static age: number

  static eat() {
  }
}
10、抽象类
abstract class Animal {
  abstract name: string

  abstract eat()
}

class Person extends Animal {
  // 与java不同,抽象属性需要显式继承
  name: string;

  eat() {
  }
}
11、函数
// 方式一
function aaa(bbb: string): number {
  return 1
}

// 方式二
const bbb: (ccc: string) => number = function (ccc: string): number {
  return 1
}
12、参数
a、默认参数
function aaa(bbb: number = 1): void {
}
b、可选参数
function aaa(bbb?: number): void {
}
c、剩余参数(java叫动态参数)
// 剩余参数只能放在所有参数的最后
function aaa(...bbb: number[]): void {
}
13、函数重载声明
function aaa(bbb: string, ccc: string): string
function aaa(bbb: number, ccc: number): number
function aaa(bbb, ccc) {
  return bbb + ccc
}
14、泛型
a、泛型函数
function aaa<K, V>(bbb: K, ccc: V): [K, V] {
  return [bbb, ccc]
}
b、泛型接口
interface aaa<K, V> {
  bbb: K

  ccc(): V
}
c、泛型类
class aaa<K, V> {
  bbb: K

  ccc: (ddd: V) => number = function () {
    return 1
  }
}
d、泛型约束
interface ILength {
  length: number
}

function aaa<T extends ILength>(bbb: T): number {
  return bbb.length
}
15、声明文件
/*
当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。
声明语句:如果需要ts对新的语法进行检查,需要要加载了对应的类型说明代码
  declare var $: (selector: string) => any;
声明文件:把声明语句放到一个单独的文件(jquery.d.ts)中,ts会自动解析到项目中所有声明文件
下载声明文件:npm install @types/jquery --save-dev
*/

import $ from "jquery"
$('选择器')
16、内置对象
a、ECMAScript的内置对象
Boolean
Number
String
Date
RegExp
Error
b、BOM和DOM的内置对象
Window
Document
HTMLElement
DocumentFragment
Event
NodeList
17、类型别名
a、自定义类型起别名
type aaa=string|number
b、限制字符串选择
type sex='男'|'女'
18、命名空间
// ES2015模块语法优于自定义TypeScript模块和名称空间
export namespace com{
  export namespace wuxi{
    export namespace web{
      export class Person {
        name:string

        constructor(name: string) {
          this.name = name
        }
      }
    }
  }
}
19、装饰器
a、普通装饰器(无法传参)
// 定义一个装饰器
function logger(params:Function) {
  // params参数为所装饰的类本身
  params.prototype.aaa = 123
  params.prototype.bbb = function() {
    return 456
  }
}

@logger
class Mapper {
  save() {
    console.log('新增')
  }
}
function logger(params:any) {
  // 会重写所装饰的类的属性和方法
  return class extends Mapper {
    baseMapper='baseMapper'

    constructor(baseMapper: string) {
      super(baseMapper)
      this.baseMapper = baseMapper
    }

    save() {
      console.log('打印', params)
      super.save()
    }
  }
}

@logger
class Mapper {
  baseMapper='mapper'

  constructor(baseMapper: string) {
    this.baseMapper = baseMapper
  }

  save() {
    console.log('新增')
  }
}
b、装饰器工厂(可传参)
// 定义一个装饰器
function logger(params:string) {
  return function(target:Function) {
    console.log(params)
    // target参数为所装饰的类本身
    console.log(target)
  }
}

@logger('日志')
class Mapper {
  save() {
    console.log('新增')
  }
}
c、属性装饰器
function logger(params:any) {
  // 修饰静态属性target为构造函数,修饰成员属性target为原型对象
  return function(target:any, attr:any) {
    console.log(target)
    console.log(attr)
    target[attr] = params
  }
}

class Mapper {
  @logger('日志')
  static baseMapper='baseMapper'

  @logger('日志')
  mapper='mapper'
}
d、方法装饰器
function logger(params:any) {
  // 修饰静态方法target为构造函数,修饰成员方法target为原型对象
  // methodName:方法名
  // desc:方法描述信息
  return function(target:any, methodName:any, desc:any) {
    console.log(params)
    console.log(target)
    console.log(methodName)
    console.log(desc)
    // desc.value为所修饰的方法的函数对象
    const fun = desc.value
    desc.value = function(obj:any) {
      console.log(obj)
      fun.apply(this, obj)
    }
  }
}

class Mapper {
  @logger('日志')
  save(obj:any) {
    console.log(obj)
  }
}
e、方法参数装饰器
function logger(params:any) {
  // 修饰静态方法target为构造函数,修饰成员方法target为原型对象
  // methodName:方法名
  // paramsIndex:参数索引
  return function(target:any, methodName:any, paramsIndex:any) {
    console.log(params)
    console.log(target)
    console.log(methodName)
    console.log(paramsIndex)
  }
}

class Mapper {
  save(@logger('日志')obj:any) {
    console.log(obj)
  }
}
f、装饰器的执行顺序
* 属性 -> 方法 -> 方法参数 -> 类
* 如果有多个同样的装饰器,它会先执行后面的

发表回复

您的电子邮箱地址不会被公开。