TypeScript ​

// 如同写 js，你可以任意操作你的变量，TypeScript 并不会抛出相关的提示
let free: any = 1
free = { name: 'donggua' }
free.log()
free = 'any'

let notSure: unknown = 4
notSure = 'maybe a string instead'

// OK, definitely a boolean
notSure = false

const demo: 'demo' = 'demo'

// 更常用的联合类型
type Alignment = 'left' | 'right' | 'center'

const obj: { name: string; job: string } = {
  name: 'donggua',
  job: 'fe'
}

const obj: { [key: string]: string } = {
  name: 'donggua',
  job: 'fe'
}

function sum(a: number, b: number): number {
  return a + b
}

function log(): void {
  console.log('TypeScript is Cool!')
}

const names = ['Alice', 'Bob', 'Eve'] // 此处不做类型注解

names.forEach(function (s) {
  console.log(s.toUppercase())
  // Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
})

// 箭头函数同样支持
names.forEach(s => {
  console.log(s.toUppercase())
  // Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
})

function errorHandler(message: string): never {
  throw new Error(message)
}

function infiniteLoop(): never {
  while (true) {}
}

const queues: number[] = [1, 2, 3]
const stack: Array<number> = [1, 2, 3]

type Tuple = [string, number]
const tuple: Tuple = ['donggua', 123]
tuple[0] = 666 // Type 'number' is not assignable to type 'string'
console.log(tuple[2]) // Tuple type 'Tuple' of length '2' has no element at index '2'

type ID = number
type Person = {
  name: string
  age: number
}

interface Person {
  name: string
  age: number
}

let nickname: string = 'donggua'
let job = 'FE' // TypeScript 自动推断为 job: string

function print(value: number | string): void {
  console.log(value)
}

type Bird = {
  fly: () => void
}
type Fish = {
  swim: () => void
}

type Animal = Bird & Fish
// Animal: {
//   fly: () => void;
//   swim: () => void;
// }

enum FORM_ITEMS {
  INPUT: 'input',
  SELECT: 'select'
}

// 默认由 0 开始递增
enum Queues {
  FIRST,
  SECOND
}
console.log(Queues.FIRST) // 0
console.log(Queues.SECOND) // 1

// 按序递增
enum Queues {
  FIRST = 1,
  SECOND,
  THIRD = 5,
  FOURTH,
  FIFTH
}
console.log(Queues.FIRST) // 1
console.log(Queues.SECOND) // 2
console.log(Queues.THIRD) // 5
console.log(Queues.FOURTH) // 6
console.log(Queues.FIFTH) // 7

enum Queues {
  FIRST,
  SECOND
}
console.log(Queues[0]) // FIRST
console.log(Queues[1]) // SECOND

const enum SEX {
  UNKNOWN,
  MAN,
  WOMAN
}

class Person {
  name: string
  constructor(name: string) {
    this.name = name
  }
  introduce() {
    console.log(`Hello, my name is ${this.name}.`)
  }
}

class Man extends Person {
  gender = SEX.MAN
  constructor(name: string) {
    super(name)
  }
}

const man = new Man('donggua')
console.log(man) // Man { name: 'donggua', gender: 1 }
man.introduce() // Hello, my name is donggua.

class Person {
  _name: string
  constructor(name: string) {
    this._name = name
  }
  get name() {
    return this._name
  }
  set name(newName: string) {
    this._name = newName
  }
}

const man = new Person('donggua')
man.name = 'donggua_nor'
man.name // donggua_nor

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

const man = new Person('donggua')
man.name = 'donggua_nor'
// Cannot assign to 'name' because it is a read-only property

class Person {
  public name: string
  private age: number
  protected address: string
  constructor(name: string, age: number, address: string) {
    this.name = name
    this.age = age
    this.address = address
  }
}

class Man extends Person {
  constructor(name: string, age: number, address: string) {
    super(name, age, address)
  }
  getAge() {
    console.log(this.age)
    // Property 'age' is private and only accessible within class 'Person'
  }
  getAddress() {
    return this.address
  }
}

const man = new Man('donggua', 26, 'guangzhou')
console.log(man.name) // donggua
man.age
// Property 'age' is private and only accessible within class 'Person'
man.address
// Property 'address' is protected and only accessible within class 'Person'
// and its subclasses

class SingleInstance {
  static instance: SingleInstance
  private constructor(public name: string) {}
  static getInstance(name: string) {
    if (!this.instance) {
      this.instance = new SingleInstance(name)
    }
    return this.instance
  }
}

const instance1 = SingleInstance.getInstance('instance1')
const instance2 = SingleInstance.getInstance('instance2')
console.log(instance1 === instance2) // true

abstract class Person {
  constructor(public name: string) {}
  abstract introduce(): void
}

abstract class Person {
  constructor(public name: string) {}
  abstract introduce(): void
}

class Man extends Person {
  constructor(name: string) {
    super(name)
  }
  introduce() {
    console.log(`Hello, my name is ${this.name}.`)
  }
}

const err = new Person() // Cannot create an instance of an abstract class
const man = new Man('donggua')

interface Person {
  name: string
  introduce: () => void
}

class Man implements Person {
  constructor(public name: string) {}
  introduce() {
    console.log(`Hello, my name is ${this.name}.`)
  }
}

class Person {
  constructor(public name: string, public age: number) {}
}
interface Man extends Person {
  address: string
}

const donggua: Man = {
  name: 'donggua',
  age: 26,
  address: 'guangzhou'
}

function identity(arg: any): any {
  return arg
}

function identity<T>(arg: T): T {
  return arg
}

console.log(identity<string>('donggua')) // 'donggua'

const identity: <T>(arg: T) => T = arg => arg

type GenericFn = <T>(arg: T) => T
let identity: GenericFn
identity = arg => arg // identity = (arg) => { return arg }

// type GenericFn = <T>(arg: T) => T
type GenericFn = { <T>(arg: T): T }

interface GenericFn {
  <T>(arg: T): T
}

interface GenericFn<T> {
  (arg: T): T
}

class GenericNumber<T> {
  zeroValue: T
  add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function (x, y) {
  return x + y
}

interface Ctor<T> {
  new (): T
}
function createInstance<T>(ctor: Ctor<T>): T {
  return new ctor()
}

class Person {
  name: string = 'donggua'
}

const man = createInstance(Person)
console.log(man) // Person { name: 'donggua' }

type Bird = {
  fly: () => void
}
type Fish = {
  swim: () => void
}

function behavior(pet: Fish | Bird) {
  if ((pet as Fish).swim) {
    ;(pet as Fish).swim() // pet: Fish
  } else {
    ;(pet as Bird).fly() // pet: Bird
  }
}

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined
}

function behavior(pet: Fish | Bird) {
  if (isFish(pet)) {
    pet.swim() // pet: Fish
  } else {
    pet.fly() // pet: Bird
  }
}

// 最为常见的接口合并
interface Person {
  name: string
  age: number
}
interface Person {
  gender: number
}
const person: Person = {
  name: 'donggua',
  age: 26,
  gender: 1
}

// 函数重载
function add(a: number, b: number): number
function add(a: string, b: string): string
function add(a: number | string, b: number | string): number | string {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b
  }
  return `${a}${b}`
}

type IsBoolean<T> = T extends boolean ? true : false
type IsArray<T> = T extends { length: number } ? true : false

type Res1 = IsBoolean<string> // false
type Res2 = IsBoolean<true> // true
type Res3 = IsBoolean<true> // false
type Res4 = IsArray<[1, 2]> // true

type GetArrayItem<T> = T extends any[] ? T[number] : T
type Item = GetArrayItem<string[]>
// Item: string
type Arg = GetArrayItem<number>
// Arg：number

type GetArrayItem<T> = T extends Array[infer Item] ? Item : T
type Item = GetArrayItem<string[]>
// Item: string
type Arg = GetArrayItem<number>
// Arg：number

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

const add = (a: number, b: number): number => a + b

type Result = ReturnType<typeof add>
// Result: number

type FilterStr<T> = T extends string ? never : T
type Union = string | number | boolean
type Result = FilterStr<Union>
// Result: number | boolean

string | number | boolean extends string
=> string extends string   // true
=> number extends string   // false
=> boolean extends string  // false

// 对原始类型使用时等同于 JavaScript 中的 typeof，返回对应类型，但并没有什么必要
type name: string = 'donggua'
type Base = typeof name
// Base: string

// 对对象使用时，将获取对象完整的属性类型
const person = { name: "donggua", age: "26" }
type Obj = typeof person;
// Obj: { name: string; age: number }

// 对枚举类型使用形似于对象
enum TYPES {
  INPUT,
  SELECT,
}
type Enum = typeof TYPES
// Enum: { INPUT: number; SELECT: number }

// 对函数使用
function sum(a: number, b: number): number {
  return a + b
}
type Func = typeof sum
// Func: (a: number, b: number) => number

// 定义
type test = 'name' | 'age' | never
// 实际
type test = 'name' | 'age'

type Person = {
  name: string
  age: number
}
type Result = keyof Person
// Result: 'name' | 'age'

type Mapish = {
  [key: number]: string
}
type Result = keyof Arrayish
// Result: 'string' | 'number'

const obj: Mapish = {}
obj[1] = 'donggua' // 等同于 obj['1'] = 'donggua'

type Readonly<T> = {
  readonly [K in keyof T]: T[K]
}
type Person = {
  name: string
  age: number
}

type Result = Readonly<Person>
// Result：{
//   readonly name: string;
//   readonly age: number;
// }