export class Todo {
  id: number;
  value: string;
  done: boolean = false;
  edit: boolean = false;
  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

let todo = new Todo({
  title: 'The first todos',
  done: false
});

import { Todo } from './todo';

describe('Todo', () => {

    it('应该创建一个实例', () => {
        expect(new Todo()).toBeTruthy();
    });

    it('应该在构造函数中接受值', () => {
        const todo = new Todo({
            value: 'hello',
            done: true
        });
        expect(todo.value).toEqual('hello');
        expect(todo.done).toEqual(true);
        expect(todo.edit).toEqual(false);
    });

});

import { Injectable } from '@angular/core';
import { Todo } from './todo';

@Injectable()
export class TodoService {
  // Placeholder for todo's
  todos: Todo[] = [];
  /** Used to generate unique ID's */
  nextId = 0;

  constructor() { }

  // Simulate POST /todos
  addTodo(todo: Todo): TodoService {
    todo.id = Date.now();
    this.todos.push(todo);
    return this;
  }

  // Simulate DELETE /todos/:id
  deleteTodoById(id: number): TodoService {
    this.todos = this.todos
      .filter(todo => todo.id !== id);
    return this;
  }

  // Simulate POST /todos/delete
  deleteAllTodo(): TodoService {
    this.todos = this.todos
      .filter(todo => !todo.done);
    return this;
  }

  // Simulate PUT /todos/:id
  updateTodoById(id: number, values: Object = {}): Todo {
    const todo = this.getTodoById(id);
    if (!todo) {
      return null;
    }
    Object.assign(todo, values);
    return todo;
  }

  // Simulate GET /todos
  getAllTodos(): Todo[] {
    return this.todos;
  }

  // Simulate GET /todos/done
  getAllDoneTodos(): Todo[] {
    return this.todos.filter(todo => todo.done);
  }

  // Simulate GET /todos/:id
  getTodoById(id: number): Todo {
    return this.todos
      .filter(todo => todo.id === id)
      .pop();
  }

  // Toggle todo done
  toggleTodoDone(todo: Todo) {
    const updatedTodo = this.updateTodoById(todo.id, {
      done: !todo.done
    });
    return updatedTodo;
  }
}

import {
  inject, TestBed
} from '@angular/core/testing';

import { Todo } from './todo';
import { TodoService } from './todo.service';

describe('Todo Service', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      providers: [TodoService]
    });
  });

  describe('#getAllTodos()', () => {

    it('应该默认返回一个空数组', inject([TodoService], (service: TodoService) => {
      expect(service.getAllTodos()).toEqual([]);
    }));

    it('应该返回所有待办事项', inject([TodoService], (service: TodoService) => {
      const todo1 = new Todo({ value: 'Hello 1', done: false });
      const todo2 = new Todo({ value: 'Hello 2', done: true });
      service.addTodo(todo1);
      service.addTodo(todo2);
      expect(service.getAllTodos()).toEqual([todo2, todo1]);
    }));

  });

  describe('#save(todo)', () => {

    it('应该自动分配一个时间戳的ID', inject([TodoService], (service: TodoService) => {
      const todo1 = service.addTodo(new Todo({ value: 'Hello 1', done: false }));
      const todo2 = service.addTodo(new Todo({ value: 'Hello 2', done: true }));
      expect(service.getTodoById(todo1.id)).toEqual(todo1);
      expect(service.getTodoById(todo2.id)).toEqual(todo2);
    }));

  });

  describe('#deleteTodoById(id)', () => {

    it('应该删除相应ID的待办事项', inject([TodoService], (service: TodoService) => {
      const todo1 = service.addTodo(new Todo({ value: 'Hello 1', done: false }));
      const todo2 = service.addTodo(new Todo({ value: 'Hello 2', done: true }));
      expect(service.getAllTodos()).toEqual([todo2, todo1]);
      service.deleteTodoById(todo1.id);
      expect(service.getAllTodos()).toEqual([todo2]);
      service.deleteTodoById(todo2.id);
      expect(service.getAllTodos()).toEqual([]);
    }));

    it('如果没有找到使用相应ID的待办事项，则不应删除任何内容', inject([TodoService], (service: TodoService) => {
      const todo1 = service.addTodo(new Todo({ value: 'Hello 1', done: false }));
      const todo2 = service.addTodo(new Todo({ value: 'Hello 2', done: true }));
      expect(service.getAllTodos()).toEqual([todo2, todo1]);
      service.deleteTodoById(3);
      expect(service.getAllTodos()).toEqual([todo2, todo1]);
    }));

  });

  describe('#updateTodoById(id, values)', () => {

    it('应该返回相应ID和更新的数据todo', inject([TodoService], (service: TodoService) => {
      const todo = service.addTodo(new Todo({ value: 'Hello 1', done: false }));
      const updatedTodo = service.updateTodoById(todo.id, {
        value: 'new value'
      });
      expect(updatedTodo.value).toEqual('new value');
    }));

    it('如果未找到待办事项应该返回null', inject([TodoService], (service: TodoService) => {
      const todo = service.addTodo(new Todo({ value: 'Hello 1', done: false }));
      const updatedTodo = service.updateTodoById(2, {
        value: 'new value'
      });
      expect(updatedTodo).toEqual(null);
    }));

  });

  describe('#toggleTodoDone(todo)', () => {

    it('应该返回更新后的待办事项与完成状态', inject([TodoService], (service: TodoService) => {
      const todo = new Todo({ value: 'Hello 1', done: false });
      service.addTodo(todo);
      const updatedTodo = service.toggleTodoDone(todo);
      expect(updatedTodo.done).toEqual(true);
      service.toggleTodoDone(todo);
      expect(updatedTodo.done).toEqual(false);
    }));

  });

});

import { Component } from '@angular/core';
@Component({
  selector: 'app-todo-app',
  templateUrl: './todo-app.component.html',
  styleUrls: ['./todo-app.component.scss']
})
export class TodoAppComponent implements OnInit {
    constructor() { }
}

import { Directive, AfterViewInit, ElementRef } from '@angular/core';

@Directive({
  selector: '[appAfterViewFocus]'
})
export class AfterViewFocusDirective implements AfterViewInit {

  constructor(private elementRef: ElementRef) { }

  ngAfterViewInit() {
    this.elementRef.nativeElement.focus();
  }

}

import { TodoService } from './todo.service';
import { Todo } from './todo';

@Component({
  selector: 'app-todo-app',
  templateUrl: './todo-app.component.html',
  styleUrls: ['./todo-app.component.scss'],
  providers: [TodoService]
})
export class TodoAppComponent {
  newTodo: string = '';
  constructor(
    private todoService: TodoService
  ) { }

  /**
   * add todo
   * @memberof TodoAppComponent
   */
  addTodo(): void {
    if (!this.newTodo) {
      return alert('What do you need to write?');
    }
    this.todoService.addTodo(new Todo({
      value: this.newTodo
    }));
    this.newTodo = '';
  }

  /**
   * destroy todo
   * @memberof TodoAppComponent
   */
  destroyTodo(todo: Todo): void {
    this.todoService.deleteTodoById(todo.id);
  }

  /**
   * destroy done todo
   * @memberof TodoAppComponent
   */
  destroyAllTodo(): void {
    if (!this.clearCount) {
      return;
    }
    if (!confirm('Do you need to delete the selected one?')) {
      return;
    }
    this.todoService.deleteAllTodo();
  }

  /**
   * toggle todo done
   * @memberof TodoAppComponent
   */
  toggleDoneTodo(todo: Todo): void {
    this.todoService.toggleTodoDone(todo);
  }

  /**
   * toggle all todo done
   * @memberof TodoAppComponent
   */
  toggleAllTodoDone(event: boolean): void {
    this.todos.forEach(item => item.done = event);
  }

  /**
   * editing todo
   * @memberof TodoAppComponent
   */
  editingTodo(todo: Todo): void {
    if (!todo.done) {
      todo.edit = true;
    }
  }

  /**
   * cancel editing todo
   * @memberof TodoAppComponent
   */
  cancelEditingTodo(todo: Todo): void {
    todo.edit = false;
  }

  /**
   * edited todo
   * @memberof TodoAppComponent
   */
  editedTodo(todo: Todo, input: HTMLInputElement): void {
    todo.value = input.value;
    todo.edit = false;
  }

  /**
   * get todos
   * @memberof TodoAppComponent
   */
  get todos(): Todo[] {
    return this.todoService.getAllTodos();
  }

  /**
   * get todos all done be get todos
   * @memberof TodoAppComponent
   */
  get allDone(): boolean {
    const todos = this.todos;
    return todos.length && todos.filter(item => item.done).length === todos.length;
  }

  /**
   * get todos all not done number
   * @memberof TodoAppComponent
   */
  get todoCount(): number {
    return this.todos.filter(item => !item.done).length;
  }

  /**
   * get todos all done number
   * @memberof TodoAppComponent
   */
  get clearCount(): number {
    return this.todos.filter(item => item.done).length;
  }

// 在JavaScript中调用函数
myFunction('one argument');
myFunction('one argument', 'two argument');
myFunction('one argument', 'some argument');

// 在TypeScript中使用内置类型
UtilityType<'one type'>;
UtilityType<'one type', 'two type'>;
UtilityType<'one type', 'some type'>;

type Partial<T> = {
    [P in keyof T]?: T[P];
};

// 一个可选的年龄的用户接口
interface Person {
    name: string;
    age?: number;
}
// 创建一个用户
const user: Person = {
    name: 'jack'
}

// 一个可选的年龄的用户接口
interface Person {
    name?: string;
    age?: number;
}
// 创建一个用户
const user: Person = {}

// 创建一个接口
interface Person {
  name: string;
  age: number;
  jobTitle: string;
  hobbies: string[];
}

// 使用 Person 接口创建对象
const jack: Person = {
  name: 'Jack',
  age: 33,
  jobTitle: 'CTO',
  hobbies: ['reading']
}
// 这是 ok，因为 “jack”对象包含在 Person 接口中指定的所有属性。

// 使用 Person 接口创建新对象
const lucy: Person = {
  name: 'Lucy',
  age: 18,
}
// TS error: Type '{ name: string; age: number; }' is missing the following properties from type 'Person': jobTitle, hobbies

// 使用 Partial<Type> 和 Person 接口使 Person 接口中的所有属性都是可选的
const lucy: Partial<Person> = {
  name: 'Lucy',
  age: 18,
}

type Required<T> = {
    [P in keyof T]-?: T[P];
};

// 创建一个接口
interface Cat {
  name: string;
  age: number;
  hairColor: string; 
  owner?: string; // <= 使“owner”属性可选
}

// 这将有效：
const suzzy: Cat = {
  name: 'Suzzy',
  age: 2,
  hairColor: 'white',
}

// 使用 Required<Type> 连同 Cat 接口使 Cat 接口中的所有属性都是必需的：
const suzzy: Required<Cat> = {
  name: 'Suzzy',
  age: 2,
  hairColor: 'white',
}
// TS error: Property 'owner' is missing in type '{ name: string; age: number; hairColor: string; }' but required in type 'Required<Cat>'.


// Required<Cat> 之后的 Cat 接口：
// interface Cat {
//   name: string;
//   age: number;
//   hairColor: string;
//   owner: string;
// }

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

// 创建一个接口：
interface Book {
  title: string;
  author: string;
  numOfPages: number;
}

// 创建一个使用 Book 接口的对象
const book: Book = {
  title: 'Javascript',
  author:  'Brendan Eich',
  numOfPages: 1024
}

// 尝试改变属性
book.title = 'Typescript'
book.author = 'Anders Hejlsberg'
book.numOfPages = 2048

// 打印 book的值：
console.log(book)

// Output:
// {
//   "title": "Typescript",
//   "author": "Anders Hejlsberg",
//   "numOfPages": 2048
// }

// 将 Book 的所有属性设置为只读：
const book: Readonly<Book> = {
  title: 'Javascript',
  author: ' Brendan Eich',
  numOfPages: 1024
}
// 尝试改变属性
sevenPowers.title = 'Typescript'
// TS error:  Cannot assign to 'title' because it is a read-only property.

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

// 创建Table类型
type Table = Record<'width' | 'height' | 'length', number>;
// type Table is basically ('width' | 'height' | 'length' are keys, number is a value):
// interface Table {
//   width: number;
//   height: number;
//   length: number;
// }

// 根据Table类型创建新对象:
const smallTable: Table = {
  width: 50,
  height: 40,
  length: 30
}

// 根据Table类型创建新对象:
const mediumTable: Table = {
  width: 90,
  length: 80
}
// TS error: Property 'height' is missing in type '{ width: number; length: number; }' but required in type 'Table'.

// 创建类型与一些字符串键:
type PersonKeys = 'firstName' | 'lastName' | 'hairColor'

// 创建一个使用 Personkeys 类型:
type Person = Record<PersonKeys, string>
// type Person is basically (personKeys are keys, string is a value):
// interface Person {
//   firstName: string;
//   lastName: string;
//   hairColor: string;
// }

const jane: Person = {
    firstName: 'Jane',
    lastName: 'Doe',
    hairColor: 'brown'
}

const james: Person = {
    firstName: 'James',
    lastName: 'Doe',
}
// TS error: Property 'hairColor' is missing in type '{ firstName: string; lastName: string; }' but required in type 'Person'.

type Titles = 'Javascript' | 'Typescript' | 'Python'

interface Book {
  title: string;
  author: string;
}

const books: Record<Titles, Book> = {
  Javascript: {
    title: 'Javascript',
    author: 'Brendan Eich'
  },
  Typescript: {
    title: 'Typescript',
    author: 'Anders Hejlsberg'
  },
  Python: {
    title: 'Python',
    author: 'Guido Van Rossum'
  },
}

// Record<Titles, Book> 基本上相当于:
Javascript: { // <= "Javascript" 键是指定的 "Titles".
  title: string,
  author: string,
}, // <= "Javascript" 值是指定的 "Book".
Typescript: { // <= "Typescript" 键是指定的 "Titles".
  title: string,
  author: string,
}, // <= "Typescript" 值是指定的 "Book".
Python: { // <= "Python" 键是指定的 "Titles".
  title: string,
  author: string,
} // <= "Python" 值是指定的 "Book".

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

// 创建一个 Beverage  接口：
interface Beverage {
  name: string;
  taste: string;
  color: string;
  temperature: number;
  additives: string[] | [];
}

// 创建一个仅使用“name”，“taste”和“color”属性 Beverage 类型：
type SimpleBeverage = Pick<Beverage, 'name' | 'taste' | 'color'>；

// 把 Basically  转化成:
// interface SimpleBeverage {
//   name: string;
//   taste: string;
//   color: string;
// }

// 使用 SimpleBeverage 类型创建新对象:
const water: SimpleBeverage = {
  name: 'Water',
  taste: 'bland',
  color: 'transparent',
}

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

// 创建一个 Car 接口：
interface Car {
  model: string;
  bodyType: string;
  numOfWheels: number;
  numOfSeats: number;
  color: string;
}

// 基于 Car 接口创建 Boat 类型，但省略 “numOfWheels” 和 “bodyType” 属性
type Boat = Omit<Car, 'numOfWheels' | 'bodyType'>;

// 把 Boat 转化成:
// interface Boat {
//   model: string;
//   numOfSeats: number;
//   color: string;
// }

// 基于 Car 创建新对象:
const tesla: Car = {
  model: 'S',
  bodyType: 'sedan',
  numOfWheels: 4,
  numOfSeats: 5,
  color: 'grey',
}

// 基于 Boat 创建新对象:
const mosaic: Boat = {
  model: 'Mosaic',
  numOfSeats: 6,
  color: 'white'
}

type Exclude<T, U> = T extends U ? never : T;

// 创建 Colors 类型:
type Colors = 'white' | 'blue' | 'black' | 'red' | 'orange' | 'grey' | 'purple';

type ColorsWarm = Exclude<Colors, 'white' | 'blue' | 'black' | 'grey'>;
// 把 ColorsWarm 转化成:
// type ColorsWarm = "red" | "orange" | "purple";

type ColorsCold = Exclude<Colors, 'red' | 'orange' | 'purple'>;
// 把 ColorsCold 转化成:
// type ColorsCold = "white" | "blue" | "black" | "grey"

// 创建 varmColor:
const varmColor: ColorsWarm = 'red'

// 创建 coldColor:
const coldColor: ColorsCold = 'blue'

// 尝试混合:
const coldColorTwp: ColorsCold = 'red'
// TS error: Type '"red"' is not assignable to type 'ColorsCold'.

type Extract<T, U> = T extends U ? T : never;

type Food = 'banana' | 'pear' | 'spinach' | 'apple' | 'lettuce' | 'broccoli' | 'avocado';

type Fruit= Extract<Food, 'banana' | 'pear' | 'apple'>;
// 把 Fruit 转换成:
// type Fruit = "banana" | "pear" | "apple";

type Vegetable = Extract<Food, 'spinach' | 'lettuce' | 'broccoli' | 'avocado'>;
// 把 Vegetable 转换成:
// type Vegetable = "spinach" | "lettuce" | "broccoli" | "avocado";

// 创建 someFruit:
const someFruit: Fruit = 'pear'

// 创建 someVegetable:
const someVegetable: Vegetable = 'lettuce'

// 尝试混合:
const notReallyAFruit: Fruit = 'avocado'
// TS error: Type '"avocado"' is not assignable to type 'Fruit'.

type NonNullable<T> = T extends null | undefined ? never : T;

// 创建类型:
type prop = string | number | string[] | number[] | null | undefined;

// 基于以前的类型创建新类型，不包括 null 和 undefined:
type validProp = NonNullable<prop>
// 把 validProp 转换成:
// type validProp = string | number | string[] | number[]

// 这是有效的:
let use1: validProp = 'Jack'

let use2: validProp = null
// TS error: Type 'null' is not assignable to type 'validProp'.

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

// 声明函数类型:
declare function myFunc(num1: number, num2: number): number;

// 使用 Parameter<type> 从 myFunc 函数的参数创建新的 Tuple 类型:
type myFuncParams = Parameters<typeof myFunc>;
// 把 myFuncParams 转换成:
// type myFuncParams = [num1: number, num2: number];

//  这是有效的：
let someNumbers: myFuncParams = [13, 15];

let someMix: myFuncParams = [9, 'Hello'];
// TS error: Type 'string' is not assignable to type 'number'.

// 使用 Parameter<type> 从函数的参数创建新的 Tuple 类型:
type StringOnlyParams = Parameters<(foo: string, fizz: string) => void>;
// 把 StringOnlyParams 转换成:
// type StringOnlyParams = [foo: string, fizz: string];

//  这是有效的：
let validNamesParams: StringOnlyParams = ['Jill', 'Sandy'];

let invalidNamesParams: StringOnlyParams = [false, true];
// TS error: Type 'boolean' is not assignable to type 'string'.

type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;

// 创建一个 class:
class Human {
  public name
  public age
  public gender

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

// 创建基于 Human 构造函数类型:
type HumanTypes = ConstructorParameters<typeof Human>
// 把 HumanTypes 转换成:
// type HumanTypes = [name: string, age: number, gender: string]

const joe: HumanTypes = ['Joe', 33, 'male']
const sandra: HumanTypes = ['Sandra', 41, 'female']
const thomas: HumanTypes = ['Thomas', 51]
// TS error: Type '[string, number]' is not assignable to type '[name: string, age: number, gender: string]'.
// Source has 2 element(s) but target requires 3.

// 创建基于 String 构造函数类型:
type StringType = ConstructorParameters<StringConstructor>
// 把 StringType 转换成:
// type StringType = [value?: any]

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

// 声明函数类型:
declare function myFunc(name: string): string;

// 使用 ReturnType<Type> 从 myFunc 类型中提取返回类型:
type MyFuncReturnType = ReturnType<typeof myFunc>;
// 把 MyFuncReturnType 转换成:
// type MyFuncReturnType = string;

// 这是有效的:
let name1: MyFuncReturnType = 'Types';

// 这是有效的:
let name2: MyFuncReturnType = 42;
// TS error: Type 'number' is not assignable to type 'string'.

type MyReturnTypeBoolean = ReturnType<() => boolean>
// 把 MyReturnTypeBoolean 转换成:
// type MyReturnTypeBoolean = boolean;

type MyReturnTypeStringArr = ReturnType<(num: number) => string[]>;
// 把 MyReturnTypeStringArr 转换成:
// type MyReturnTypeStringArr = string[];

type MyReturnTypeVoid = ReturnType<(num: number, word: string) => void>;
// 把 MyReturnTypeVoid 转换成:
// type MyReturnTypeVoid = void;

type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;

// 创建一个 class:
class Dog {
  name = 'Sam'
  age = 1
}

type DogInstanceType = InstanceType<typeof Dog>
// 把 DogInstanceType 转换成:
// type DogInstanceType = Dog

// 类似于使用 class 声明:
type DogType = Dog
// 把 DogType 转换成:
// type DogType = Dog

type ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;

// 创建一个使用 this 参数函数:
function capitalize(this: String) {
  return this[0].toUpperCase + this.substring(1).toLowerCase()
}

// 创建基于 this 参数的 capitalize函数类型:
type CapitalizeStringType = ThisParameterType<typeof capitalize>
// 把 CapitalizeStringType 转换成:
// type CapitalizeStringType = String

// 创建一个不使用 this 参数函数:
function sayHi(name: string) {
  return `Hello, ${name}.`
}

// 创建基于不带 this 参数的 printUnknown 函数类型:
type SayHiType = ThisParameterType<typeof sayHi>
// 把 SayHiType 转换成:
// type SayHiType = unknown

type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;

// 创建一个使用 this 参数函数:
function capitalize(this: String) {
  return this[0].toUpperCase + this.substring(1).toLowerCase()
}

// 根据 capitalize 函数创建类型:
type CapitalizeType = OmitThisParameter<typeof capitalize>
// 把 CapitalizeStringType 转换成:
// type CapitalizeType = () => string


// 创建一个不使用 this 参数函数:
function sayHi(name: string) {
  return `Hello, ${name}.`
}

// 根据 Sayhi 函数创建类型:
type SayHiType = OmitThisParameter<typeof sayHi>
// 把 SayHiType 转换成:
// type SayHiType = (name: string) => string

interface ThisType<T> { }

// 创建 User 对象接口:
interface User {
    username: string;
    email: string;
    isActivated: boolean;
    printUserName(): string;
    printEmail(): string;
    printStatus(): boolean;
}

// 创建用户对象，并将 ThisType 设置为 user interface:
const userObj: ThisType<User> = {
  username: 'Jiayi',
  email: '[email protected]',
  isActivated: false,
  printUserName() {
    return this.username;
  },
  printEmail() {
    return this.email;
  },
  printStatus() {
    return this.isActivated;
  }
}

// 创建 User 接口:
interface User {
  username: string;
  password: string;
}

// 创建 SuperUser 接口:
interface SuperUser {
  clearanceLevel: string;
  accesses: string[];
}

// 结合 User 和 SuperUser 创建 RegularUser 类型
// 让 User 属性必需的和  SuperUser 属性可选的:
type RegularUser = Required<User> & Partial<SuperUser>

// 这是有效的:
const jack: RegularUser = {
  username: 'Jack',
  password: 'some_secret_password_unlike_123456',
}

// 这是有效的:
const jason: RegularUser = {
  username: 'Jason',
  password: 'foo_bar_usually-doesnt_work-that_well',
  clearanceLevel: 'A'
}

// 这将抛出异常:
const jim: RegularUser = {
  username: 'Jim'
}
// TS error: Type '{ username: string; }' is not assignable to type 'RegularUser'.
// Property 'password' is missing in type '{ username: string; }' but required in type 'Required<User>'

import myModule from './myModule';

function toNumber(numberString: string): number {
  const num: number = parseFloat(numberString);
  return num;
}

function numberStringSwap(value: any, radix: number = 10): any {
  if (typeof value === 'string') {
    return parseInt(value, radix);
  } else if (typeof value === 'number') {
    return String(value);
  }
}  
 
const num = numberStringSwap('1234') as number;
// <> 断言容易和 tsx 中的 React 产生冲突 推荐使用 as
const str = <string>numberStringSwap(1234);

let easing: "ease-in" | "ease-out" | "ease-in-out";

type VerticalAlignment = "top" | "middle" | "bottom";
type HorizontalAlignment = "left" | "center" | "right";

declare function setAlignment(value: `${VerticalAlignment}-${HorizontalAlignment}`): void

let point: {
  x: number;
  y: number;
};

let point: { x: number; y: number; };

// OK, 属性匹配
point = { x: 0, y: 0 };

// Error, x 属性类型错误
point = { x: 'zero', y: 0 };

// Error, 缺少所需属性 y
point = { x: 0 };

// Error, 对象字面量只能指定已知的属性
point = { x: 0, y: 0, z: 0 };

const otherPoint = { x: 0, y: 0, z: 0 };

// OK, 与非字面量赋值无关的额外属性
point = otherPoint;

let point: { x: number; y: number; };
let point2: { x: number; y: number; };

let point: { x: number; y: number; };
let point2: typeof point;

interface Point {
  x: number;
  y: number;
}

let point: Point;
let point2: Point;

interface Point3d extends Point {
  z: number;
}

interface Point {
  x: number;
  y: number;
  z?: number;
}

let point: Point;

// OK, 属性匹配
point = { x: 0, y: 0, z: 0 };

// OK, 属性匹配，可选属性缺失
point = { x: 0, y: 0 };

// Error, `z` 属性类型错误
point = { x: 0, y: 0, z: 'zero' };

interface Point {
  x: number;
  y: number;
  z?: number;

  toGeo: () => Point;
}

interface Point {
  x: number;
  y: number;
  z?: number;

  toGeo(): Point;
}

interface Point {
  // ...
  toGeo?(): Point;
}

const p: Point = {
   toGeo: undefined
}

interface HashMapOfPoints {
  [key: string]: Point;
}

const serviceUrl = Symbol("ServiceUrl");
const servicePort = Symbol("ServicePort");
 
interface Configuration {
   [key: symbol]: string | number;
   [key: `service-${string}`]: string | number;
}
 
const config: Configuration = {};
 
config[serviceUrl] = "my-url";
config[servicePort] = 8080;
config["service-host"] = "host";
config["service-port"] = 8080;
config["host"] = "host"; // error

const Foo = 'Foo';
const Bar = 'Bar';
const Baz = Symbol();

interface MyInterface {
  [Foo]: number;
  [Bar]: string;
  [Baz]: boolean;
}

let point: [ number, number, number ] = [ 0, 0, 0 ];

function draw(...point: [ number, number, number? ]): void {
  const [ x, y, z ] = point;
  console.log('point', ...point);
}

draw(100, 200);         // logs: point 100, 200
draw(100, 200, 75);     // logs: point 100, 200, 75
draw(100, 200, 75, 25); // Error: Expected 2-3 arguments but got 4

let point: [x: number, y: number, z: number] = [0,0,0];
 
function concat<T, U>(arr1: T[], arr2: U[]): Array<T | U> {
    return [...arr1, ...arr2];
}

let bar: [boolean, ...string[], boolean];

let printPoint: (point: Point) => string;

let printPoint: (getPoint: () => Point) => string;

function printPoint(point: Point): string { ... }
const printPoint = (point: Point): string => { ... }

let printPoint: (point: Point): string

const printPoint = (point: Point) => string => { ... }

let printPoint: { (point: Point): string; };

let Point: { new (): Point; };
let Point: new () => Point;

let Point: {
  new (): Point;
  fromLinear(point: Point): Point;
  fromGeo(point: Point): Point;
};

function createPoint(x: number, y: number) {
  return new Point(x, y);
}

createPoint.print(point: Point): string {
  console.log(point);
}

let p: Point = createPoint(1, 2);

createPoint.print(p); // logs point

function numberStringSwap(value: any, radix: number): any {
  if (typeof value === 'string') {
    return parseInt(value, radix);
  } else if (typeof value === 'number') {
    return String(value);
  }
}

function numberStringSwap(value: string, radix?: number): number;
function numberStringSwap(value: number): string;
function numberStringSwap(value: any, radix: number = 10):  any {
  if (typeof value === 'string') {
    return parseInt(value, radix);
  } else if (typeof value === 'number') {
    return String(value);
  }
}

function numberStringSwap(value: any): any;
function numberStringSwap(value: number): string;

numberStringSwap('1234');

let numberStringSwap: {
  (value: number, radix?: number): string;
  (value: string): number;
};

createElement(tagName: 'a'): HTMLAnchorElement;
createElement(tagName: 'abbr'): HTMLElement;
createElement(tagName: 'address'): HTMLElement;
createElement(tagName: 'area'): HTMLAreaElement;
// ...
createElement(tagName: string): HTMLElement;

class Animal { breathe() { } }
class Dog extends Animal { bark() {} }
class Cat extends Animal { meow() {} }

let f1: (x: Animal) => void = (x: Animal) => x.breathe();
let f2: (x: Dog) => void = (x: Dog) => x.bark();
let f3: (x: Cat) => void = (x: Cat) => x.meow();

f1 = f2;
const c = new Cat();
f1(c); // 运行时错误

interface Array<T> {
    push(...args: T[]): number;
}

interface Arrayish<T> {
  map<U>(
    callback: (value: T, index: number, array: Arrayish<T>) => U,
    thisArg?: any
  ): Array<U>;
}

const arrayOfStrings: Arrayish<string> = [ 'a', 'b', 'c' ];
const arrayOfCharCodes: Arrayish<number> =
  arrayOfStrings.map(value => value.charCodeAt(0));

interface PointPromise<T extends Promise> {
}

interface Arrayish<T = string> {
  map<U>(
    callback: (value: T, index: number, array: Arrayish<T>) => U,
    thisArg?: any
  ): Array<U>;
}

function createArrayish(...args: T[]): Arrayish {
  return args;
}

function byId(element: string | Element): Element {
  if (typeof element === 'string') {
    return document.getElementById(element);
  } else {
    return element;
  }
}

function performSomeWork(someId: number | undefined) {
   const hasSomeId = typeof someId === "number";
 
   if (hasSomeId) {
       // someId 是 number
       // code
   }
 
   // someId 是 number | undefined
   // code
 
   if (hasSomeId) {
       // someId 是 number
       // code
   }
}

interface Foo {
  name: string;
  count: number;
}

interface Bar {
  name: string;
  age: number;
}

export type FooBar = Foo & Bar;

interface Foo {
  count: string;
}

interface Bar {
  count: number;
}

export type FooBar2 = Foo & Bar;

import * as foo from './foo';
type Foo = foo.Foo;
type Bar = () => string;
type StringOrNumber = string | number;
type PromiseOrValue<T> = T | Promise<T>;
type BarkingAnimal = Animal & { bark(): void };

type Stringify<T> = {
  [P in keyof T]: string;
};
 
interface Point { x: number; y: number; }
type StringPoint = Stringify<Point>;
const pointA: StringPoint = { x: '4', Y: '3' }; // ok

type MutableRequired<T> = { -readonly [P in keyof T]-?: T[P] };
type ReadonlyPartial<T> = { +readonly [P in keyof T]+?: T[P] };
    
interface Point { readonly x: number; y: number; }
const pointA: ReadonlyPartial<Point> = { x: 4 };
pointA.y = 3; // Error: readonly
const pointB: MutableRequired<Point> = { x: 4, y: 3 };
pointB.x = 2; // ok

type ToPromise<T> = { [K in typeof T]: Promise<T[K]> };
type Point = [ number, number ];
type PromisePoint = ToPromise<Point>;
const point: PromisePoint =
  [ Promise.resolve(2), Promise.resolve(3) ]; // ok

interface Person {
   name: string;
   age: number;
   location: string;
}

type Getters<T> = {
   [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};
type LazyPerson = Getters<Person>;