首页  思维导图  详情

typescript学习笔记

2021-08-31 15:23:38   20  举报





AI智能生成

typescript 接口泛型类面向对象 javasscript es5 es6 html

TypeScript语法

class

interface

oop

javascript

作者其他创作

大纲/内容

安装

npm install -g typescript

查看安装版本

tsc -version

文件名 *.ts

编译

手动编辑

tsc file.ts

自动编译

创建配置文件

tsc --init

修改tsconfig.json

outDir:'./js'

vscode中，选择终端=》运行任务=》tsc：监视typescript

等同于命令：tsc -p e:\study_new_tech\typescript\tsconfig.json --watch

类型

任意类型 any 声明为 any 的变量可以赋予任意类型的值。

数字类型 number
双精度 64 位浮点值。它可以用来表示整数和分数。

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制

字符串类型 string
一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;

布尔类型 boolean
表示逻辑值：true 和 false。

let flag: boolean = true;

数组类型
声明变量为数组。

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];

元组
元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob

枚举 enum
枚举类型用于定义数值集合。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 输出 2

void void
用于标识方法返回值的类型，表示该方法没有返回值。

function hello(): void {
alert("Hello Runoob");
}

null null
表示对象值缺失。

undefined undefined
用于初始化变量为一个未定义的值

never
never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

函数

函数返回值

function function_name():return_type {
// 语句
return value;
}

带参数函数

function func_name( param1 [:datatype], param2 [:datatype]) {

}

function add(x: number, y: number): number {
return x + y;
}

可选参数

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

如果有多个参数，可选参数必须配置在最后一个参数上

默认参数

function calculate_discount(price:number,rate:number = 0.50) {
var discount = price * rate;
console.log("计算结果: ",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.30)

剩余参数

function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）。

function addNumbers(...nums:number[]) {
    var i;
    var sum:number = 0;

    for(i = 0;i<nums.length;i++) {
       sum = sum + nums[i];
    }
    console.log("和为：",sum)
}
addNumbers(1,2,3)
addNumbers(10,10,10,10,10)

函数重载

function disp(s1:string):void;
function disp(n1:number,s1:string):void;

function disp(x:any,y?:any):void {
console.log(x);
console.log(y);
}
disp("abc")
disp(1,"xyz");

类

定义示例

class Car {
    // 字段
    engine:string;

    // 构造函数
    constructor(engine:string) {
        this.engine = engine
    }

    // 方法
    disp():void {
        console.log("发动机为 :   "+this.engine)
    }
}

实例化

var obj = new Car("Engine 1")

继承

class Shape {
   Area:number

   constructor(a:number) {
      this.Area = a
   }
}

class Circle extends Shape {
   disp():void {
      console.log("圆的面积:  "+this.Area)
   }
}

var obj = new Circle(223);
obj.disp()

class Man {
  protected name: string
  constructor(name: string) {
    this.name = name
  }
  run(): void {
    console.log(`${this.name} is running`)
  }
}

class SuperMan extends Man {
  fly(): void {
    console.log(`${this.name} can fly`)
  }
}

let man: Man = new SuperMan('kongxm')
man.run()

let superMan: SuperMan = new SuperMan('outman')
superMan.run()
superMan.fly()

访问控制修饰符

public（默认） : 公有，可以在任何地方被访问。

protected : 受保护，可以被其自身以及其子类和父类访问。

private : 私有，只能被其定义所在的类访问。

static 关键字

class StaticMem {
   static num:number;

   static disp():void {
      console.log("num 值为 "+ StaticMem.num)
   }
}

StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

抽象类（多态）

abstract class Animal {
  protected name: string
  constructor(name: string) {
    this.name = name
  }
  abstract eat(): void
}

class Dog extends Animal {
  eat(): void {
    console.log(`${this.name} eat meat.`)
  }
}

let doc: Animal = new Dog('wang cai')
doc.eat()

接口

属性接口

interface Login { name: string password: string } let doLogin = (form: Login) => { console.log(`${form.name} & ${form.password}`) } doLogin({ name: 'kxm', password: 'pwd' })

函数接口

interface LoginForm {
  (usernmae: String, password: number): void
}

let wechatLogin: LoginForm = (usernmae: String, password: number) => {
  console.log(`wechat login = ${usernmae} & ${password}`)
}

let alipayLogin: LoginForm = (usernmae: String, password: number) => {
  console.log(`alipay login = ${usernmae} & ${password}`)
}

wechatLogin('wechat', 123)

alipayLogin('alipay', 456)

可索引接口

基本没什么卵用

类接口

interface Vehicle {
name: string;
run(tips: string): void
}

class Car implements Vehicle {
  name: string;

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

  run(): void {//子类实现不一定需要有参数值
    console.log('car name = ', this.name)
  }
}

class Bus implements Vehicle {
  name: string;

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

  run(tips: string): void {
    console.log('bus name = ', this.name)
  }
}

接口继承

interface Human {
eat(): void
}

interface Kid extends Human {
play(): void
}

class Programer implements Kid {
  play(): void {
    throw new Error("Method not implemented.");
  }
  eat(): void {
    throw new Error("Method not implemented.");
  }
}

泛型

泛型类

class TypeInfo<T> {
  print(str: T): void {
    if (typeof (str) === 'number') {
      console.log('this is type of number')
    }
    if (typeof (str) === 'string') {
      console.log('this is type of string')
    }
  }
}

let stringType: TypeInfo<String> = new TypeInfo()
stringType.print('string')

let numberType: TypeInfo<Number> = new TypeInfo()
numberType.print(123)

泛型接口

interface MyConfig<T> {
(config1: String, config2: T): T
}

let myConfig: MyConfig<Number> = (config1: String, config2: Number): Number => {
return config2;
}

myConfig("1", 2)

类作为泛型参数

class Person {
  username: string
  age: number
  constructor(params: {
    username: string,
    age: number
  }) {
    this.username = params.username
    this.age = params.age
  }
}

class Person2 {
  username: string
  age: number
  constructor(username: string, age: number) {
    this.username = username
    this.age = age
  }
}

class MysqlTool<T extends Person> {
  add(obj: T): void {
    console.log('add method ', obj)
  }
}

let person: Person = new Person({ username: 'kxm', age: 30 })
let mysqlTool = new MysqlTool()
mysqlTool.add(person)

模块

方式一

定义

export let url = 'http://www.baidu.com'

export function doSomething() {
console.log('do something else')
}

使用

import { url, doSomething } from "./modules/_m1"

console.log(url)

doSomething()

方式二

定义

let url = 'http://www.baidu.com'

function doSomething() {
  console.log('do something else')
}

export {
  url,
  doSomething
}

使用

同上

方式三