TypeScript 手册指北 Part1

function greet(person: string, date: Date): string {
    return `Hello ${person}, today is ${date.toDateString()}!`
}

function printCoord(pt: { x: number; y: number }) {
    console.log('The coordinate's x value is ' + pt.x)
    console.log('The coordinate's y value is ' + pt.y)
}
printCoord({ x: 3, y: 7 })

function printName(obj: { first: string; last?: string }) {
    // Error - might crash if 'obj.last' wasn't provided!
    // console.log(obj.last.toUpperCase())
    // Object is possibly 'undefined'.
    if (obj.last !== undefined) {
        // OK
        console.log(obj.last.toUpperCase())
    }
    // A safe alternative using modern JavaScript syntax:
    console.log(obj.last?.toUpperCase())
}

let fruits: string[] = ['Apple', 'Banana']
let numbers: Array<number> = [1]

function getArrayLength(arr: number[]) {
    return arr.length
}
function getArrayLength2(arr: Array<number>) {
    return arr.length
}

console.assert(typeof arr === 'object')

let obj: any = { x: 0 }

let uni: string | number = '123456'
type ID = string | number // 可以用 type 关键字来定义一个类型别名

ID uni1 = 123456

function printId(id: number | string) {
    console.log('Your ID is: ' + id)
}

function printId(id: number | string) {
    if (typeof id === 'string') {
        // In this branch, id is of type 'string'
        console.log(id.toUpperCase())
    } else {
        // Here, id is of type 'number'
        console.log(id)
    }
}

type Point = {
    x: number
    y: number
}
type ID = number | string
type InputType = string

interface Window {
    title: string
}
interface Window {
    id: number
}

const myCanvas: HTMLCanvasElement = document.getElementById('main_canvas') as HTMLCanvasElement
const myCanvas1 = <HTMLCanvasElement>document.getElementById('main_canvas')

const constantString = 'Hello World'
let x: 'hello' = 'hello'

function printText(s: string, alignment: 'left' | 'right' | 'center') {
    // 当编译器发现 alignment 的实参不是其中一种字面值，则会告知错误
}

function compare(a: string, b: string): -1 | 0 | 1 {
    // 同理，返回值只能是 -1，0，1 中之一
    return a === b ? 0 : a > b ? 1 : -1
}

interface Options {
    width: number
}
function configure(x: Options | 'auto') {
    // ...
}
configure({ width: 100 })
configure('auto')

const req = { url: 'https://example.com', method: 'GET' }
handleRequest(req.url, req.method)
// Argument of type 'string' is not assignable to parameter of type ''GET' | 'POST''.

// Way 1:
// Change 1:
const req = { url: 'https://example.com', method: 'GET' as 'GET' }
// Change 2
handleRequest(req.url, req.method as 'GET')

// Way 2:
const req = { url: 'https://example.com', method: 'GET' } as const
handleRequest(req.url, req.method)

interface Shape {
    kind: 'circle' | 'square'
}

function liveDangerously(x?: number | null) {
    // No error
    console.log(x!.toFixed())
}

type Fish = { swim: () => void }
type Bird = { fly: () => void }
 
function move(animal: Fish | Bird) {
    if ('swim' in animal) {
        return animal.swim()
    }
    return animal.fly()
}

type Fish = { swim: () => void }
type Bird = { fly: () => void }
type Human = { swim?: () => void; fly?: () => void }
 
function move(animal: Fish | Bird | Human) {
    if ('swim' in animal) {
        animal // animal: Fish | Human
    } else {
        animal // animal: Bird | Human
    }
}

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

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

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

interface Circle {
    kind: 'circle'
    radius: number
}
 
interface Square {
    kind: 'square'
    sideLength: number
}

interface Triangle {
    kind: 'triangle'
    sideLength: number
}

type Shape = Circle | Square;
// type Shape = Circle | Square | Triangle
 
function getArea(shape: Shape) {
    switch (shape.kind) {
        case 'circle':
            return Math.PI * shape.radius ** 2
        case 'square':
            return shape.sideLength ** 2
        default:
            const _exhaustiveCheck: never = shape
            // Type 'Triangle' is not assignable to type 'never'.
            return _exhaustiveCheck
    }
}

function greeter(fn: (a: string) => void) {
    fn('Hello, World')
}
function printToConsole(s: string) {
    console.log(s)
}
 
greeter(printToConsole)

function func1(arg: number) { return true }
func1.description = 'Function'

type DescribableFunction = {
    description: string
    (someArg: number): boolean
};

function doSomething(fn: DescribableFunction) {
    console.log(fn.description + ' returned ' + fn(6))
}

doSomething(func1)

// false: type '(arg: number) => true' lack property 'description'
// let func: DescribableFunction = (arg: number) => { return true }

type SomeConstructor = {
    new (s: string): SomeObject
};

function fn(ctor: SomeConstructor) {
    return new ctor('hello')
}

interface CallOrConstruct {
    new (s: string): Date
    (n?: number): number
}

// also
type CallOrConstruct = {
    new (s: string): Date
    (n?: number): number
}

// work, but bad
function firstElement(arr: any[]) {
    return arr[0]
}
// good
function firstElement<Type>(arr: Type[]): Type {
    return arr[0]
}

function longest<Type extends { length: number }>(a: Type, b: Type) {
    if (a.length >= b.length) {
        return a
    } else {
        return b
    }
}

function minimumLength<Type extends { length: number }>(
    obj: Type,
    minimum: number
): Type {
    if (obj.length >= minimum) {
        return obj
    } else {
        return { length: minimum } // error
        // Type '{ length: number; }' is not assignable to type 'Type'.
    }
}

function f(x?: number) {
    if (x !== undefined) {
        // do x
    }
}

function fd(x = 10) {
    // ...
}

function makeDate(timestamp: number): Date
function makeDate(m: number, d: number, y: number): Date
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
    if (d !== undefined && y !== undefined) {
        return new Date(y, mOrTimestamp, d)
    } else {
        return new Date(mOrTimestamp)
    }
}

function fn(x: string): string
function fn(x: number): string
function fn(x: string | number) {
    return 'oops'
}

function len(s: string): number
function len(arr: any[]): number
function len(x: any) {
    return x.length
}

function len(x: any[] | string) {
    return x.length
}

function multiply(n: number, ...m: number[]) {
    return m.map((x) => n * x)
}
// 'a' gets value [10, 20, 30, 40]
const a = multiply(10, 1, 2, 3, 4)

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
arr1.push(...arr2)

// Inferred as 2-length tuple
const args = [8, 5] as const
// OK
const angle = Math.atan2(...args)

function sum({ a, b, c }: { a: number; b: number; c: number }) {
    console.log(a + b + c)
}

// Same as prior example
type ABC = { a: number; b: number; c: number }
function sum({ a, b, c }: ABC) {
    console.log(a + b + c)
}

interface SomeType {
    readonly prop: string
}

interface StringByString {
    [key: string]: string
}
 
const heroesInBooks: StringByString = {
    'Gunslinger': 'The Dark Tower',
    'Jack Torrance': 'The Shining'
};

interface Options {
    [key: string]: string | number | boolean
    timeout: number
}
 
const options: Options = {
    timeout: 1000,
    timeoutMessage: 'The request timed out!',
    isFileUpload: false
};

interface Animal {
    name: string
}
interface Bear extends Animal {
    honey: boolean
}

type Animal = {
    name: string
}
type Bear = Animal & { 
    honey: boolean 
}

interface Colorful {
    color: string
}
interface Circle {
    radius: number
}
type ColorfulCircle = Colorful & Circle

interface Box<Type> {
    contents: Type
}
type Box<Type> = {
    contents: Type
}

let boxA: Box<string> = { contents: 'hello' }

function setContents<Type>(box: Box<Type>, newContents: Type) {
    box.contents = newContents
}

type OrNull<Type> = Type | null
type OneOrMany<Type> = Type | Type[]
type OneOrManyOrNull<Type> = OrNull<OneOrMany<Type>>
// OneOrManyOrNull<Type> = OneOrMany<Type> | null
type OneOrManyOrNullStrings = OneOrManyOrNull<string>
// OneOrManyOrNullStrings = OneOrMany<string> | null

type StringNumberPair = [string, number]

function doSomething(pair: [string, number]) {
    const a = pair[0]
    // a: string
    const b = pair[1]
    // b: number
}

doSomething(['hello', 42])

function doSomething(stringHash: [string, number]) {
    const [inputString, hash] = stringHash
    // use
}

interface StringNumberPair {
    // specialized properties
    length: 2
    0: string
    1: number
 
    // Other 'Array<string | number>' members...
    slice(start?: number, end?: number): Array<string | number>
}

type StringNumberBooleans = [string, number, ...boolean[]]
type StringBooleansNumber = [string, ...boolean[], number]
type BooleansStringNumber = [...boolean[], string, number]

function doSomething(pair: readonly [string, number]) {
    // ...
}
let point = [3, 4] as const