TypeScript基础快速上手

//基础类型
(()=>{
    //布尔类型
    console.log("###########布尔类型###########")
    //基本语法
    //let 变量名:数据类型 = 值
    let flag:boolean=true
    flag=false
    //flag=10 会报错因为只能定义为布尔值
    console.log(flag)


    //数字类型
    console.log("#########数字类型#############")
    let a1: number = 10 // 十进制
    let a2: number = 0b1010  // 二进制
    let a3: number = 0o12 // 八进制
    let a4: number = 0xa // 十六进制
    //a1='哈哈' 报错，只能改为数字类型，下面的以此类推
    console.log(a1)
    console.log(a2)
    console.log(a3)
    console.log(a4)


    //字符串类型
    console.log("###########字符串类型###########")
    let name:string = 'tom'
    name = 'jack'
// name = 12 // error
    let age:number = 12
    const info = `My name is ${name}, I am ${age} years old!`
    console.log(info)

   /* 总结：ts中变量开始是什么类型，那么后面赋值的时候，
   只能用这个类型的数据，是不允许用其他类型的数据赋值给当前这个变量中*/


    //undefined 和 null 类型
    console.log("##########undefined 和 null 类型############")
    let u: undefined = undefined
    let n: null = null
    console.log(u)
    console.log(n)
    let w:number = undefined
    console.log(w)
    /*默认情况下 null 和 undefined 是所有类型的子类型。
    就是说你可以把 null 和 undefined 赋值给 number 类型的变量。*/


    //数组类型
    console.log("############数组类型##########")
    //let 变量名:数据类新[] = [值1，值2]
    let list1: number[] = [1, 2, 3]
    console.log(list1)
    //数组定义方式2：泛型写法
    //let 变量名:Array<数据类型> = [值1，值2]
    let list2: Array = [1, 2, 3]
    // let list2: Array = [1, 2, 3,'a']//Error
    console.log(list2)
    /*注意问题：数组定义后，里面的数据类型必须与定义数组的时候的类型一致 */



    //元组类型
    console.log("#########元组类型#############")
    let t1: [string, number]
    t1 = ['hello', 10.13214] // OK
    // t1 = [10, 'hello'] // Error
    console.log(t1) // OK
    // console.log(t1[1].substring(1)) // Error, 'number' 不存在 'substring' 方法
    /*//注意：元组类型在使用的时候，数据的类型位置和数据个数，
    应该与定义元组的时候的数据类新和位置应该一致*/
    console.log(t1[0].split(""))
    console.log(t1[1].toFixed(2))


    //枚举类型
    //枚举类型:枚举类型里面的每个数据值都可以叫元素，每个元素都有编号，从0开始，依次递增
    console.log("#########枚举类型#############")
    enum Color {
        Red,
        Green,
        Blue
    }

    // 枚举数值默认从0开始依次递增
    // 根据特定的名称得到对应的枚举数值
    let myColor: Color = Color.Green  // 0
    console.log(myColor, Color.Red, Color.Blue)
    console.log(Color[2])
    //小例子,枚举中的元素可以是中文的数据值，但是不推荐
    /*enum Gender {
        女,
        男
    }
    console.log(Gender.男)*/

    /*枚举类型提供的一个便利是你可以由枚举的值得到它的名字。
    例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：
    */
    enum color {red = 1, green, blue}
    let colorName: string = color[2]
    console.log(colorName)  // 'Green'

    /*默认情况下，从 0 开始为元素编号。 你也可以手动的指定成员的数值。
    例如，我们将上面的例子改成从 1 开始编号：
    enum Color {Red = 1, Green, Blue}
    let c: Color = Color.Green

    或者，全部都采用手动赋值：
    enum Color {Red = 1, Green = 2, Blue = 4}
    let c: Color = Color.Green*/


    //any 类型
    //可包含不同的类型的数据
    console.log("######### any类型 #############")
    let notSure: any = 4
    notSure = 'maybe a string'
    notSure = false // 也可以是个 boolean
    console.log(notSure)
     /*在对现有代码进行改写的时候，any 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。
     并且当你只知道一部分数据的类型时，any 类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：*/
    //当一个数据中存储多个数据，类型不确定个数不确定时，也可以用any类型
    let list: any[] = [1, true, 'free']
     list[1] = 100
     console.log(list)


    //void类型
    /*某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。
     当一个函数没有返回值时，你通常会见到其返回值类型是 void：*/
    console.log("######### void类型 #############")
    /* 表示没有任何类型, 一般用来说明函数的返回值不能是undefined和null之外的值 */
    //在函数声明时的小括号后面加上 :void 表示该函数没有返回值，就算设置返回值也会是undefined
    function fn(): void {
        console.log('只要富婆把握住，连夜搬进大别墅')
        // return undefined  //返回undefined
        // return null      //返回null
        // return 1 // error
    }fn()
    /* 声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null：*/
    let unusable: void = undefined
    console.log(unusable)


    //object类型
    //object 表示非原始类型，也就是除 number，string，boolean之外的类型。
    console.log("######### object类型 #############")
    //定义一个函数，参数是object，返回值也是object
    function fn2(obj:object):object {
        console.log('fn2()', obj)
        return {
            name:'阿达西哇',
            age:14
        }
        // return undefined
        // return null
    }
    // console.log(fn2({ name:'阿达西哇', age:14}))
    // console.log(fn2(new String('abc')))
    // console.log(fn2('abc') // error
    console.log(fn2(String))


    //联合类型
    // 联合类型（Union Types）表示取值可以为多种类型中的一种
    // 需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值
    console.log("######### 联合类型 #############")
    function toString2(x: number | string) : string {
        return x.toString()
    }console.log(toString2(123))


    //类型断言，告诉编译器，我知道我是什么类型的，也知道自己在干嘛
    console.log("######### 类型断言 #############")
    //类型断言有两种形式。
    // 其一是“尖括号”语法:<类型>变量名
    // 另一个为 as 语法:值 as 类型
    //需求2: 定义一个一个函数得到一个数字或字符串值的长度
    function getLength(x: number | string) {

        // return x.length // error

        if ((x).length) { // error
            //str存在吗，如果存在说明x是string类型
            // return (x).length
            return (x as string).length
        } else {
            //如果是number则用toString转换为string类型
            return x.toString().length
        }
    }console.log(getLength(11231))
    console.log(getLength("dajdhsajfkh"))

    //类型推断：TS会在没有明确的指定类型的时候推测出一个类型
    console.log("######### 类型推断 #############")
    /*类型推断: TS会在没有明确的指定类型的时候推测出一个类型
        有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型.
        2. 定义变量时没有赋值, 推断为any类型*/
    /* 定义变量时赋值了, 推断为对应的类型 */

    let b9 = 123 // 推断出为number类型
    // b9 = 'abc' // error
    console.log(b9)

    /* 定义变量时没有赋值, 推断为any类型 */
    let b10  // 没有赋值推断为 any类型
    b10 = 123
    b10 = 'abc'
    console.log(b10)

})()