TypeScript 学习之路（二）

接口

• 赋予一个类型 函数调用
• 可选属性：option bags 模式；
• 只读属性：readOnly=> ReadonlyArray类型 数组无法修改；
• 可索引类型：索引签名设置为只读 防止索引赋值；
• 类类型；
• 继承接口：一个接口可以继承多个接口，创建出多个接口的合成接口；
• 混合类型；
• 接口继承类；

interface Person {
  firstName: string;
  lastName: string;
}
function greeters(person: Person) {
  return " Hello, " + person.firstName + "" + person.lastName;
}
let users = { firstName: 'Jane', lastName: 'User' };
document.body.innerHTML = greeters(users);

• • option bags 模式

interface SquareConfig {
  color?: string;
  width?: number;
}
function createSquare(config: SquareConfig): {
  color: string;
  area: number;
} {
  let newSquare = { color: 'white', area: 100 };
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}
let mySquare = createSquare({ color: "black" });
console.log('option bags')
console.log(mySquare);//{ color: "black", area: 100 }

interface StringArray {
  [index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
console.log(myStr)//Bob

• 类类型：接口描述类的公有

interface ClockInterface {
  current: Date;
}
class Clock implements ClockInterface {
  currentTime: Date;
  constructor(h: number,m: number);
}

类（class）

• 继承：extends
• 修饰符；
• public(默认)：共有 在类里面、子类、类外面都可以访问
• protected：保护类型 在类里面、子类里面可以访问，在类外面无法访问
• private：私有 在类里面可以访问，子类、类外部都无法访问

class Greeter {
  greeting: string;
  // constructor: 构造函数 super()
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello," + this.greeting;
  }
}
let VV = new Greeter("world");
console.log(VV)//Hello,world

泛型

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>('my');
let output2 = identity('my');
console.log('**********')
console.log(output)//my

泛型变量 Array < T > 泛型类型

let myIdentity: <T>(arg: T) => T = identity;
// let myIdentity: <U>(arg: U) => U = identity;
// let myIdentity: {<T>(arg: T): T} = identity;
console.log(myIdentity)//函数

class GenericNumber<T> {
  zeroValue: T;
  add: (xbb: T, yy: T) => T;
}

let myGenericNumber = new GenericNumber<string>();
myGenericNumber.zeroValue = '0';
myGenericNumber.add = function (xbb, yy) { return xbb + yy; };
console.log(myGenericNumber.add(myGenericNumber.zeroValue, 'txt'));//0txt

泛型约束

class BeeKeeper {
  hasMask: boolean;
}

class ZooKeeper {
  nametag: string;
}

class Animal {
  numLegs: number;
}

class Bee extends Animal {
  keeper: BeeKeeper;
}

class Lion extends Animal {
  keeper: ZooKeeper;
}

function createInstance<A extends Animal>(c: new () => A): A {
  return new c();
}

createInstance(Lion).keeper.nametag;  // string
createInstance(Bee).keeper.hasMask;   // boolean

函数

函数定义

function greet(): string { // 返回一个字符串
  return "Hello World"
}

function caller() {
  var msg = greet() // 调用 greet() 函数 
  console.log(msg) //Hello World
}
// 调用函数
caller();

function add(x: number, y: number): number {
  return x + y;
}
console.log(add(1, 2))//3

//默认参数
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 factorial(number) {
  if (number <= 0) {         // 停止执行
    return 1;
  } else {
    return (number * factorial(number - 1));     // 调用自身
  }
};
console.log(factorial(5)); //120 
console.log(factorial(6)); //720 

Lambda函数

var foo = (x: number) => 10 + x;
console.log(foo(100))//110

匿名函数

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

剩余函数

function sum(...result: number[]): number {
  let sum = 0
  result.forEach(item => {
    sum += item
  })
  return sum
}
console.log(sum(1, 2, 3, 4))//10

转载：
Typescript中文手册： https://typescript.bootcss.com/
TypeScript 基础入门及综合案例使用：https://www.jianshu.com/p/d86a8698cb75