Typescript

简介

1. ts 是由微软开发的开源编程语言
2. ts 是 js 的超集
3. ts 是开发大型应用的基石
4. ts 提供了更丰富的语法提示

5. ts 在编写阶段能够检查错误

   数据类型

   js 数据类型

   • 原始数据类型： boolean string number null undefined symbol
   • 引用数据类型： object

ts 类型注解

// 字符串类性注解
let myName: string = "hao";
// 数字类性注解
let num: number = 123;
// 布尔类性注解
let bool: boolean = true;
// any类性注解 （能不用尽量不用）
// 1. 可以是任意数据类型
// 2. 如果是对象的话，any是不会提示原有的属性和方法
// 3. 未被初始值的变量类型就是 any
let notSure = 333; // 默认 -> let notSure: any = 333;
// isOk ↓
notSure = "maybe a string instead";
notSure = false;
// void（无任何类型） 在某种程度上与 any 相反 (一般自会用在函数的返回值为空时)
function fn (): void {
  console.log("我没有任何返回值哦");
  return undefined; // -> 返回undefined也可以 因为函数无返回值是默认返回undefined;
}
//never 表示是那些永远不存在的值的类型
function error (msg: string): never {
  throw new Error(msg);
}
function infinteloop(): never {
  while(true) {
  };
}
// --------------原始类型↑----------------
// object -> 表示非原始类型
let obj: object | null;
// all ok ↓
obj = {a: 1};
obj = null;
obj = [];
obj = () => {};
// all wrong ↓
obj = undefined;
obj = false;
obj = "1";
obj = 2;

ts 类型推断

let count = 0; // ts能够正确推断出count: number;
let addFn = (a, b) => { // ts这里就不能推断出函数参数的类型 需要手中注解 a: number, b: number
  return a + b;
};
addFn(1, 2);

ts 类型断言
有时候你可能比 ts 更清楚某个值的类型信息，你就可以进行类型断言。
有两种语法 一种是 as 语法， 另一种是<类型>语法。

let someVal: any = "hihihi~";
let length: number = (someVal as string).length;
let length: number = (<string>someVal).length;

联合类型

多个类型当中我们可以选择其中类型的一种即可。
注意：

1. 联合类型的共有属性是不会报错的。
2. 在赋值之后就会确定类型。

   let a = number | string;
   a = 123;   // ok
   a = "123"; // ok

   ts 静态类型 、js 动态类型

• ts

  let a: string  = "123";
  a = 123 // -> 提示 不能将类型123分配给类型"string" 
  console.log(a);

• js

  let a = "123";
  a = 123;
  console.log(a); // -> 123

  接口 interface

1. 对象的形状进行描述
2. 对类的一部分行为的抽象 ```typescript interface Person { // 不可多，也不可少 readonly id: number; // -> 只读属性 name: string; // -> 必有属性 age?: number; // -> 可选属性 [propName: string]: any // 任意属性(固定写法) 类型必须为any }

let person: Person { id: 001, name: “xiaoA”, age: 22, // 这个属性可以没有 sex: “male” }

person.id = 002; // -> 报错

<a name="j2FyF"></a>
## 数组
1. 类型    `let list: number[] = [1, 2, 3]`
**注：没有长度限制，push 非类型的数据是不可以的。**
2. 泛型    `let list Array<number> = [1, 2, 3]`
2. interface 方式   
```typescript
interface NumList {
  [index: number]: number
}
let list: NumList = [1, 2, 3]; // -> ok
// 类数组
interface Args {
  [index: number]: any;
  length: number;
  callee: Function;
}
function fn() {
  // IArguments 结构就是 Args 的结构
  let args: IArguments = arguments;
}
fn(1);

函数

声明函数

function test (a: number, b: number): number {
  return a + b;
}
test(1, 2);

表达式函数

let test = function (a: number, b: number): number {
  return a + b;
}
//--------[       这里就是函数的注解       ]----------------
let test: (a: number, b: number) => number = function (a, b) {
  return a + b;
}

可选参数、 默认值<br />**注: 默认值、收集多余参数一定是放到最后面才可以**

// 可选参数
function fullName (firstName: string, LastName?: string): string {
  return firstName + " " + LastName;
}
// all ok ↓
fullName("troye", "siven"); 
fullName("troye");
// 默认值
let buildName (firstName: stirng, LastName = "orz"): string {
  return firstName + " " + LastName;
}
buildName("Tommy", "shelby");
buildName("XD");
// 剩余参数
let longName (firstName: stirng, secondName: string, ...restName: string[]): string {
  return firstName + " " + secondName + " " + restName.join(" ");
}

重载

// 表意会更清晰
function reverse (x: string): string;
function reverse (x: number): number;
function reverse (x: string | number) {
  if (typeof x === "string") {
    return x.split("").reverse().join("");
  }
  if (typeof x === "number") {
    return Number(x.toString().split("").reverse().join(""));
  }
}
console.log(reverse("123"));
console.log(reverse(123));