TypeScript

什么是TS?

TypeScript，简称 TS，是微软开发的一种静态的编程语言，它是 JavaScript 的超集

1. 简单来说，js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。

2. ts 支持类型支持，ts = type +JavaScript。

TS? JS?

1. JavaScript 属于动态编程语言，而ts 属于静态编程语言。

• js：边解释边执行，错误只有在运行的时候才能发现

• ts：先编译再执行，在写的时候就会发现错误了（ts不能直接执行，需要先编译成 js ）

2. ts 完全支持 js ，可以直接转换

类型注解

什么是类型注解？

变量后面约定类型的语法，就是类型注解

类型注解作用？

约定类型，明确提示

// 约定变量 length 的类型为 number 类型
let length: number = 18;
length = 19;

: number 就是类型注解，它为变量提供类型约束。

约定了什么类型，就只能给该变量赋值什么类型的值，否则报错。

而且：约定类型之后，代码的提示也会非常清晰。

原始类型

TS 常用类型：

JS 已有类型

简单类型，number string boolean null undefined

复杂类型，对象 数组 函数

TS 新增类型

联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等

let length: number = 18;
let myName: string = '这里是做梦都在睡';
let isLoading: boolean = false;
let nullValue: null = null;
let undefinedValue: undefined = undefined;

数组类型

let numbers: number[] = [1, 3, 5];

let strings: Array<string> = ['a', 'b', 'c'];

联合类型

需求：数组中有 number 和 string 类型

let arr: (number | string)[] = [1, 'a', 3, 'b'];

类型别名

type CustomArr = (number | string)[];
let arr: CustomArr = [1, 'a', 4];

类型别名:

type 类型别名 = 具体类型 基本语法

定义类型别名，遵循大驼峰命名规范，类似于变量

使用类型别名，与类型注解的写法一样即可

void 类型

如果函数没有返回值，定义函数类型时返回值类型为 void

const say = (): void => {
  console.log('hi');
};

可选参数

如果函数的参数，可以传也可以不传，这种情况就可以使用 可选参数 语法，参数后加 ? 即可

const fn = (n?: number) => {
  // ..
};
fn();
fn(10);

对象类型

TS 的对象类型，其实就是描述对象中的 属性 方法 的类型，因为对象是由属性和方法组成的。

// 空对象
let person: {} = {};

// 有属性和方法，一行书写多个属性 ; 分隔
let person: { name: string; sayHi(): void } = {
  name: '18cm_dream',
  sayHi() {},
};