TypeScript基础

1、TypeScript介绍

1.1 TypeScript 是什么：Type + JavaScript

TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。

在 JS 的基础之上，为 JS 添加了类型支持

 

TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行

1.2 TypeScript为什么要添加类型支持？

背景：JS的类型系统存在 先天缺陷  ，JS代码中绝大部分错误都是类型错误（Uncaught TypeError）

原因：增加了找Bug，改Bug的时间，严重影响开发效率。

TypeScript属于静态类型的编程语言，静态编程语言在编译器做类型检查。

JavaScript属于动态类型的编程语言，动态编程语言在执行器做类型检查。

代码是先编译再执行的

TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间

 

1、3 TypeScript 相比 JS 的优势

 

更早（写代码的同时）发现错误，减少找Bug、改Bug的时间，提高开发效率

程序中的任何位置的代码都有代码提示，增强了开发体验

支持ECMAScript语法，有强大的类型系统，会自动进行TS类型推断

 

2、TypeScript体验

2.1 安装编译TS的工具包：

因为node.js / 浏览器只认识JS代码，不认识TS代码，所以需要将TS代码转换为JS代码才能运行。

安装命令： npm install -g typescript

这是typescript包，用来编译ts代码，提供了tsc命令，可以将 TS 代码转化为 JS代码

2.2 编译并运行TS代码：

①：创建hello.ts文件

②：将TS编译为JS：在终端中输入命令，tsc hello.ts  （此时，目录中会编译生成一个hello.js文件）

③：执行JS代码：在终端输入命令    node hello.js    回车输出内容

注意：由 TS 编译生成的 JS 文件，代码中就没有类型信息了。

 

2.3 简化运行TS的步骤：

①：使用 ts-node 包，直接在node.js中执行TS代码

安装命令：npm install -g ts-node （ts-node 包提供了 ts-node 命令）

使用：ts-node hello.ts  回车

解释：ts-node 命令在内部偷偷将 TS 转化为了 JS，再运行JS代码

3、TyepScript常用类型

3.1 类型注解：

let age: number = 18

//  : number 就是类型注解

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

3.2 常用基础类型：

分为 2 类：JS已有类型、TS新增类型

①：JS已有类型：

原始类型：number / string / boolean / null / undefined / symbol

对象类型：object (包括：数组、对象、函数)

②：TS新增类型：

联合类型、自定义类型（也叫类型别名）、接口、元组、字面量类型、枚举、void、any等

3.3 原始类型：

let age: number = 18

 

let myName: string = '广州南方学院'

 

let isLoading: boolean = false

 

let a: null = null

 

let b: undefined = undefined

 

let s: symbol = Symbol()

3.4 数组类型：

// 推荐使用

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

 

// 不推荐使用

let numbers1: Array<number> = [1, 3, 5, 6]

 

let b: boolean[] = [true, false]

 

// 联合类型   | 

// 添加小括号，表示：首先是数组，然后这个数组中能够出现 number 或 string 类型的元素

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

 

// 不添加小括号，表示：arr1 既可以是number 类型，又可以是 string[]

let arr1: number | string[] = ['a', 'b']

let arr2: number | string[] = 123

3.5 类型别名：

使用 type 关键字来创建类型别名。

类型别名（自定义类型）：为任意类型起别名。

使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。

// 类型别名

type CustomArray = (number | string)[]

let arr: CustomArray = ['l', 5, 'y', 2, 't', 0]

let arr1: CustomArray = ['k', 5, 'e', 2, 'a', 0, 'i']

3.6 函数类型：

函数的类型实际上指的是：函数参数和返回值类型

/**

 *1、单独指定参数、返回值类型

 */

// 普通函数

function add(num1: number, num2: number): number {

  return num1 + num2

}

// 调用

console.log(add(1, 2)) // 3

 

// 箭头函数

const addNum = (num1: number, num2: number): number => {

  return num1 + num2

}

// 调用

console.log(addNum(2, 4)); // 6

 

/**

 * 2、同时指定参数、返回值的类型

 */

const sub: (num3: number, num4: number) => number = (num3, num4) => {

  return (num3 - num4)

}

console.log(add(6, 3));

如果函数没有返回值，那么，函数返回值类型为࿱