TypeScript-基础

1.TypeScript是什么？

TypeScript是一种微软开发的自由和开源的编程语言。它是JS的一个超集，而且本质上向这个添加了可选的静态类型和基于类的面向对象编程。

TypeScript提供最新的和不断发展的JS特性，包括那些来自ES6和未来的提案中的特性，比如异步功能和Decorators,以帮助建立健壮的组件。

2.基础类型

我们可以在声明一个变量之后设置我们想要添加的类型：type。但是，如果变量有默认值的话，一般我们也不需要显式声明类型，TS会自动推断变量的类型（类型推断）

2.1-布尔类型boolean

最简单的数据类型：true / false值

const isOK:boolean = false
//ES6 : var isOK = false

2.2-数据类型number

各进制数都可以用number类型来表示

const num : number = 10;
//ES6 : var num = 10;

2.3-字符串类型string

双引号或者单引号表示字符串

模板字符串使用反引号来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法${xxx}的占位符，占位符内编写变量名，模板字符串会进行变量值的解析。

const sentence : string = "世界，你好";
//ES6 : var sentence = '世界，你好'

2.4-枚举类型enum

使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。TS支持数字的和基于字符串的枚举。

enum Kind {
  kindness，
  cruel
}

const kind : string = Kind[0]
console.log(kind)

enum Direction {
  NORTH = "NORTH",
  SOUTH = "SOUTH",
  EAST = "EAST",
  WEST = "WEST"
}

2.5-any类型

有时接入输入时，我们是无法确定其变量类型的。这种情况下，我们不希望类型检查器对这些值进行检查，而是直接让它们通过编译阶段的检查，any在这里就可以起到作用

如果一个数据是any类型，那就可以访问它的任意属性，即使这个属性不存在。

any的原理就是将TS代码转换回JS，这样TS就失去了意义，所以在项目中避免使用或是减少使用any。

let str : any = 666;
str = "世界，上号";
str = false;

2.6-元组类型Tuple

在我们需要在单个变量中存储不同类型的值时用到元组。JS中是没有元组的，元组是TS中的特有类型，其工作方式类似于数组。

元组可用于定义具有有限数量的未命名属性的类型。每个属性都有一个关联的类型。使用元组时，必须提供每个属性的值。说人话就是元组中可以放一条数据的多个不同类型的信息，就比如【姓名，年龄，性别，爱好】等

let user:[string, number, string?]
user = ['世界',18,'男']
console.log(user,'user')
user = ['世界本界', 20]
console.log(user,'user')

2.7-void类型

某种程度上void类型像与any类型相反，它表示没有任何类型。

当一个函数没有返回值时，通常就会见到其返回值类型是void。

声明一个void类型的变量没什么作用，因为只能给其赋值为undefined和null。

function fn(): void {
 console.log('void很没用。void:这很伤人');
}
const nothing: void = undefined

2.8-null和undefined类型

TS中，undefined和null两者有各自类型undefined和null

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

2.9-never与unknown类型

never类型表示哪些永不存在的值的类型。never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了他本身）。即使any也不可以赋值给never。

//一个抛出异常的函数表达式，其函数返回值类型为never：
function error(message: string): never {
   throw new Error(message);
}
// 函数里有死循环那么返回的也是never
function infiniteLoop(): never {
while (true) {}
}
let value: unknown
value = true // OK
value = 10 // OK
value = "Hello World" // OK
value = [] // OK
value = {} // OK
value = Math.random // OK
value = null // OK
value = undefined // OK
value = new TypeError() // OK
let value1: unknown = value // OK
let value2: any = value // OK
let value3: boolean = value // Error
let value4: number = value // Error
let value5: string = value // Error
let value6: object = value // Error
let value7: any[] = value // Error
value.foo.bar // Error
value.trim() // Error
value() // Error
new value() // Error
value[0][1] // Error

unknown类型是any类型对应的安全类型。我们知道any无需事先执行任何类型的检查，在许多情况下，这过于宽松。unknown类型只能分配给any类型和unknown类型本身。

2.10-字面量类型

在TS中，字面量不仅可以表示值也可表示类型，即所谓的字面量类型。

目前TS支持三种字面量类型：字符串/数字/布尔值字面量类型，三个都有与其值一样的字面量类型，字面量类型是集合类型的子类型，它是集合类型的一种更具体的表达。

// 字面量类型
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
// do something
}
handleEvent(document.getElementById('hello')!, 'scroll'); // 没问题
handleEvent(document.getElementById('world')!, 'dblclick'); // 报错，event 不能
为 'dblclick'