TypeScript(1)

发布时间 2023-12-06 18:46:21作者: Karle

1.数据类型

  1.1 基本数据类型

const a: number = 1
const b: string = '123'
const c: boolean = true
//undefined and null belongs to other types
const d: null = null
const e: undefined = undefined

  1.2 引用数据类型

const a : number[] = [] //all elements are number type
const a1 : Array<number> = []
const b : string[] = [] //all elements are string type
const b1 : Array<string> = []

  1.3 any、void

const a : any = {} // a can be any type
const arr : any[] = [1,'222',true,{}]

const b : void = undefined // void is return nothing

  1.4 类型推断

let a = '123'
//equal to
let a : string = '123'

  1.5 联合类型、交叉类型

// 联合类型
const b : string | number = '123'
const b : string | number = 123
// 混合类型
interface A {
    name:string
}
interface B {
    age:number
}
const a : A & B = {
    name:'123',
    age:123
}

2.接口

  2.1 对象接口

interface Obj {
    readonly id: string // string type && only read
    name: string //string type
    age: number //number type
    action?: Function //Function type && not required
    [propName: string]: any //propName is key name, belongs to string type, value belongs to any type
}
const obj: Obj = {
    id: '1234',
    name: 'abc',
    age: 123,
    otherMethod: '1827',
    money: true,
}

  2.2 数组接口

interface Arr {
    //index is array's index, belongs to number type
    //any is elements type
    [index: number]: any
}
const arr: Arr = [1, '123', {}, true, null, () => {}]

  2.3 函数接口

interface Fun {
    (a: string, b: string): boolean
}
const fun: Fun = function (a: string, b: string): boolean {
    return true
}

3.函数

  3.1 定义函数

//parameter: a, b belongs to number, return data belongs to boolean
//函数声明
function fun(a: number, b: number): boolean {
    return !!(a + b)
}
//函数表达式
const f = function fc(a: number, b: number): boolean {
    return !!(a + b)
}

  3.2 函数重载

//use one function to handle two different types
function fun(a: string, b: string): string
function fun(a: number, b: number): number
function fun(a: string | number, b: string | number): string | number {
    if (typeof a === 'number' && typeof b === 'number') return a * b
    else return `${a}${b}`
}


// arrow function can't use interface
type Func = {
    (a:number,b:number):number
    (a:string,b:string):string
    (a:Function,b:object):boolean
    (a:boolean,b?:boolean):Function
}

const func = ((a:number|string|Function|boolean,b?:number|string|object|boolean):number|string|boolean|Function => {
    if(typeof a === 'string' && typeof b === 'string'){
            return `${a}${b}`
    }
    else if(typeof a === 'number' && typeof b === 'number') {
            return a + b
    }
    else if(typeof a === 'function' && typeof b === 'object') {
            return true
    }
    else return ()=>{}
}) as Func

4.类型断言

//options will be two different kinds of types
//string type we don't want to toString
function func(option: number | string): number {
    return option.toString().length
}
//if using option.length to judge option whether is string type, throw error
function func2(option: number | string): number {
    if(option.lenth)return option
    else return option.toString().length
}
//使用类型断言
function func3(option:number|string):number{
    if((option as string).length) return (<string>option).length
    else return option.toString().length
}