01-TypeScirpt 基本语法

数字 Number

var num: number = 1
console.log('num', num)
//  除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
var num1: number = 10 // 10进制
var num2: number = 0x000a // 16进制
var num3: number = 0b1010 // 2进制
var num4: number = 0o0012 //  8进制
console.log(num1, num2, num3, num4) // 10 10 10 10

布尔值 Boolean

var b: boolean = false
console.log('b', b)

字符串 String

var personName: string = 'Cloud'
//使用typescript 点方法时可以给出字符串方法的提示
// toLowerCase() 会将调用该方法的字符串值转为小写形式，并返回
var lowerCaseName: string = personName.toLowerCase()
// 同样在typescript中可以使用模板字符串
// 它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（`），并且以${ expr }这种形式嵌入表达式
var introduce: string = `my name is ${personName}`

console.log('personName', personName, lowerCaseName, introduce) // cloud

数组 Array

• 有两种方式可以定义数组。
• 第一种，可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：

var arr: number[] = [1, 3, 5]

• 第二种方式是使用数组泛型，Array<元素类型>：

var arr1: Array<number> = [2, 4, 6]
console.log('arr', arr, arr1)


// 当数组中有字符串和数字时  类似于或的意思
var arr2:(string | number)[] = [1, '2', 3]

• 任意类型数组

  let arr4: any[] // 表示定义了一个名称叫做arr4的数组, 这个数组中将来可以存储任意类型的数据
  arr4 = [1, 'b', false]
  console.log(arr4)

元组 Tuple

• var arr: number[] = [1, 3, 5] 数组中元素类型要都时number类型
• 而元组类型表示一个已经元素数量和类型的数组,各元素的类型可以不同

  // 第一个元素是字符串, 第二个是数字类型, 第三个元素必须是布尔类型
  let arr5: [string, number, boolean]
  arr5 = ['a', 3, true]
  // arr5 = ['a', 3, 'false'] // 'string' is not assignable to type 'boolean'.
  console.log('arr5', arr5)

var tup: [string, number] = ['cloud', 18]
// tup = [10,"cloud"] // error 报错
const teacherInfo: [string, string, number] = ['Dell', 'male', 18];

枚举 enum

• 枚举类型 取值是固定的

  // 定义一个名称叫做gender的枚举类型
  // 这个枚举的取值类型是Male 和 Female
  enum Gender {
    Male,
    Female,
  }
  let val: Gender
  val = Gender.Male
  // val = 'nan' // 报错
  // 注意: ts的枚举底层是实现的本质就是数值类型, 所以赋值一个数值不会报错
  val = 123 // 不会报错

  console.log(Gender.Male) // 0
  console.log(Gender.Female) // 1

// 定义一个ColorType 的枚举
enum ColorType {
  Red,
  Green = 3,
  Blue
}

var c: ColorType = ColorType.Red  // 0
// 注意: 如果手动指定了后面的枚举的取值, 那么前面枚举的取值不会受到影响
var c: ColorType = ColorType.Blue  // 4

console.log(c)

• 枚举类型提供的一个便利是你可以由枚举的值得到它的名字。
• 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

enum Color {
  Red = 1,
  Green,
  Blue
}
var colorName: string = Color[2]

console.log(colorName) // 显示'Green'因为上面代码里它的值是2

• 探究底层实现原理

    // 探究底层实现原理
    var Gender;
    (function (Gender) {
    // Gender[key] = value;
    Gender[Gender["Male"] = 0] = "Male";
    Gender[Gender["Femal"] = 1] = "Femal";
    })(Gender || (Gender = {}));
    
    let Gender = {};
    Gender["Male"] = 0;
    Gender[0] = "Male";
    Gender["Femal"] = 1;
    Gender[1] = "Femal";
      

数字枚举

• 数字枚举的取值默认是从0开始递增的
• 数字枚举的取值可以是字面量, 也可以是常量, 还可以是计算结果

  const num = 123
  function getNum() {
    return 23
  }

  enum Gender1 {
    Male,
    Female = num,
    //   Shen, // 如果使用常量给前面的枚举赋值了, 那么后面的枚举值也需要手动赋值
    Yao = getNum(),
  }

  console.log('Gender1', Gender1.Male) // 0
  console.log('Gender1', Gender1.Female) // 123
  console.log('Gender1', Gender1.Yao) // 23

• 枚举的反向映射

  enum Gender2 {
    Male,
    Female,
  }
  console.log('Gender2', Gender2.Male) // 0
  console.log('Gender2', Gender2[1]) // Female

字符串枚举

enum StringEnum {
    Title = '123',
    // text , // 如果字符串前面的枚举值赋值了,那么后面的枚举值也必须赋值
    Text = 'test',
  }

  console.log(StringEnum.Title)

• 字符串枚举的注意点
  • 和数字枚举不一样,字符串枚举不能使用常量或者计算结果给枚举赋值
  • 字符串枚举不能够使用常量或者计算结果给枚举赋值, 但是可以使用它内部的其他枚举值来赋值

  let str = 'sssddf'
  function getStr(): string {
    return 'sdfsd'
  }
  enum StringEnum1 {
    Str = '23',
    //   title = str,
    // text , // 如果字符串前面的枚举值赋值了,那么后面的枚举值也必须赋值
    Text = 'test',
    Str2 = Str,
    //   demo = getStr(),
  }
  console.log('StringEnum1', StringEnum1.Str2) // StringEnum1 23

异构枚举

• 枚举中既包含数字又包含了字符串,称为异构枚举

 enum Gender3 {
    Male = 3,
    Female = 'ss',
  }

  console.log('Gender3', Gender3.Female)
  console.log('Gender3', Gender3[3])
  // console.log('Gender3', Gender3['ss'])
  // 注意点: 如果是字符串枚举, 那么无法通过原始值获取到枚举值
  console.log('Gender3', Gender3) // {3: "Male", Male: 3, Female: "ss"}

联合枚举类型

  interface PersonInterface {
    gender: Gender
  }
  class Person implements PersonInterface {
    gender: Gender = Gender.Male
  }
  let p = new Person()
  console.log('p.gender', p.gender)

任意值 any

var a: any = 1
a = "cloud"
a = false

• 在对现有代码进行改写的时候，any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。

• 当你只知道一部分数据的类型时，any类型也是有用的。

• 比如，你有一个数组，它包含了不同的类型的数据：

let list: any[] = [1, false, 'cloud']
console.log(list[1])

空值 void

• 某种程度上来说，void类型像是与any类型相反，它表示没有任何类型.
• 当一个函数没有返回值时，你通常会见到其返回值类型是void：

function func(): void {
  console.log('hello')
}

• 声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

let unusable: void = null

let value: void // 定义了一个不可以保存任意类型数据的变量, 只能保存null和undefined
// value = 123; // 报错
// value = "abc";// 报错
// value = true;// 报错
// 注意点: null和undefined是所有类型的子类型, 所以我们可以将null和undefined赋值给任意类型
// value = null // 不会报错
value = undefined // 不会报错

Null 和 Undefined

• TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。
• 和void相似，它们的本身的类型用处不是很大：

let u: undefined = undefined
let n: null = null

Never 类型

• 表示那些不存在值的类型
• 一般用于抛出异常或者根本不可能有返回值的函数

  function demo(): never {
    throw new Error('报错了')
  }
  demo()

Object 类型

  //  Object 类型
  // 表示一个对象
  let obj: object

  // obj = 1 // 报错
  obj = { name: 'sss', age: 12 }
  console.log('obj', obj) // {name: "sss", age: 12}

类型断言

• 类型断言有两种形式。 其一是“尖括号”语法：

let str1: any = 'hello world'
let strLength: number = (<string>str1).length
console.log(strLength)

• 另一个为as语法：

let str2: any = 'hello world'
let strLength1: number = (str2 as string).length
console.log(strLength1)

• 两种形式是等价的。
• 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有as语法断言是被允许的。

null 和 undefined

• Typescript 具有两种特殊类型 null 和 undefined
• 如果不想让 null 和 undefined 相互赋值,
• 那么在tsconfig.json中开启 strictNullChecks

let value1 = null
let value2 = undefined
// 开启strictNullChecks
value1 = value2 // 报错

• 如果我们开启了strictNullChecks, 还想把null和 undefined赋值给其它的类型
• 那么我们就必须在声明的时候使用联合类型

let value:(number | null | undefined);
value = null;
value = undefined;

• 对于可选属性和可选参数而言
• 如果开启了strictNullChecks, 那么默认情况下数据类型就是联合类型
• 就是当前的类型 + undefined类型

 class Person {
    name?: string
  }
  function say(age?: number) {}

• 去除null 或者 undefined 检测

  function getLength(value: string | null | undefined) {
    value = 'abc'
    return () => {
      // return value.length // Object is possibly 'null' or 'undefined'.
      // 使用 ! 来去除 null 和 undefined
      // ! 的含义就是这个变量一定不是null 和 undefined
      return value!.length
    }
  }