认识TypeScript

TypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码。

变量的声明

在ts中定义变量需要指定标识符的类型。
所以完整的声明格式如下：

• 声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解
• var/let/const 标识符：数据类型 = 赋值

  TypeScript数据类型

  number类型

  ```javascript let num: number = 123;

num = 222;

let num1: number = 100; let num2: number = 0b111; let num3: number = 0o456; let num4: number = 0x123ac;

<a name="b1EZM"></a>
### boolean类型
<a name="kKdYP"></a>
### string类型
<a name="uibYd"></a>
### array类型
```javascript
const names1: Array<string> = [];
const names2: string[] = [];
names1.push("abc");
names2.push("abc");

object类型

null和undefined类型

let n1: null = null;
let n2: undefined = undefined;

symbol类型

const title1 = Symbol("title");
const title2 = Symbol("title");
const info = {
  [title1]: "程序员",
  [title2]: "老师",
};

any类型

let message: any = "hello world";
message = 123;
message = true;

unkonw类型

function foo() {
  return "abc";
}
function bar() {
  return 123;
}
let flag = true;
let result: unknown;
if (flag) {
  result = foo();
} else {
  result = bar();
}

void类型

function sum(num1: number, num2: number) {
  console.log(num1 + num2);
}
sum(20, 30);

never类型

function handleMessage(message: string | number | boolean) {
  switch (typeof message) {
    case "string":
      console.log("string处理方式");
      break;
    case "number":
      console.log("number处理方式");
      break;
    case "boolean":
      console.log("boolean处理方式");
      break;
    default:
      const check: never = message;
  }
}
handleMessage("abc");
handleMessage(123);
handleMessage(true);

tuple类型

const info: [string, number, number] = ["why", 18, 1.88];
const name = info[0];
console.log(name.length);
const age = info[1];

类型断言as

有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言(Type Assertions)。

• 比如我们通过 document.getElementById，TypeScript只知道该函数会返回 HTMLElement，但并不知道它具体的类型：

  案例一：

  ```javascript const el = document.getElementById(“why”); // 如果这里的why是标签 el.src = “”; // 这个时候调用el.src方法会报错，因为Ts只能识别出el是HTMLElement

const el = document.getElementById(“why”) as HTMLImageElement; // 通过类型断言 el.src = “”; // 这个时候Ts就知道el是HTMLImageElement，调用el.src就不会报错

<a name="kstGc"></a>
### 案例二：
```javascript
class Person {}
class Student extends Person {
  studying() {}
}
function sayHello(p: Person) {
  (p as Student).studying(); // 如果直接调用p.studying会因为Person类型没有该方法而报错
}
const stu = new Student();
sayHello(stu);

TypeScript函数

TypeScript类

TypeScript接口

TypeScript泛型