初识 TypeScript

1. TypeScript 是什么 ?

2. 为什么要学习 TypeScript ?

3. 安装 TypeScript

4. 原始数据类型和 any 类型

5. 数组和元组(tuple)

6. Interface 接口

7. 函数中声明数据类型

8. 类型推论 (type inference)

9. 联合类型

10. 泛型 Generics

11. 类型别名

12. 字面量

13. 交叉类型

1. TypeScript 是什么 ?

编程语言的类型: 静态类型语言、动态类型语言

静态类型语言的数据类型是在编译期间检查的。也就是说，在编写程序时就要声明变量的数据类型。如: Java

动态类型语言是指在运行期间才去做数据类型检查的语言。也就是说，永远不用给变量指定数据类型。如: Python、PHP

TypeScript 究竟是什么 ?

typescript 官网: https://typescriptlang.org

TypeScript 是 Type 和 JavaScript 的结合，TypeScript 就是将不看重类型的动态语言 JavaScript，变成关注类型的静态语言

2. 为什么要学习 TypeScript ?

程序更容易理解

ts 可以约定函数或方法输入输出的参数类型，外部条件等

效率更高

在不同的代码块和定义中进行跳转、代码补全、接口提示

更少的错误

编译期间能够发现大部分错误，杜绝一些比较常见的错误

3. 安装 TypeScript

全局安装 typescript

npm install -g typescript

查看版本

tsc -V

创建 helloworld.ts

const hello = (name: string) => {}

编译

tsc helloworld.ts

补充: 命令行运行 ts 文件需要安装 ts-node 包

npm install -g ts-node

然后就可以使用 ts-node 命令运行 ts 文件了

ts-node helloworld.ts

4. 原始数据类型和 any 类型

最新的 ESMAScript 标准定义了八种数据类型

七种原始数据类型: number、string、boolean、undefined、null、BigInt、Symbol。另外一种是 Object

注意: undefined、null 是所有类型的子类型，所以下面写法是正确的

let age: number = undefined

顶级类型: any，可以接收所有数据类型的数据

let all: any = null;all = true;all = 123456;all = 'liang';

5. 数组和元组(tuple)

声明一个 number 类型的数组，数组元素必须为 number 类型

let numArr: number[] = [1, 2, 3]

元组: 给数组元素分别指定数据类型

// 定义元组时，数组元素个数不能超过声明的类型个数let user: [string, number] = ['liang', 23]// 但可以追加数组元素，追加的数据类型必须在声明的类型中，也就是 string, numberuser.push(10)

6. Interface 接口

Interface 不是 JavaScript 中的概念，而是 ts 作类型检查用的，所以 ts 在编译后，Interface 是不会被转译过去的

interface 描述对象类型

// 定义接口interface Person {    // 只读属性    readonly id: number,    // 必须属性    name: string,    // 可选属性    age?: number,}// 变量使用接口let user: Person = {    id: 1,    name: "liang",    // age: 23, // 可选属性,定义不定义都可以    // like: "code", // 对象文字可以只指定已知属性，但 “like”不在接口“Person”中}// user.id = 2 // 报错: 因为 id 是只读属性, 无法修改

7. 函数中声明数据类型

普通的声明函数，函数的结果返回 number 类型

/** * 可选参数z: 省略时为 undefined */function add(x: number, y: number, z?: number): number {    if (typeof z === 'number') {        return x + y + z    } else {        return x + y    }}

函数表达式声明的函数返回的是一个函数类型

const add = (x: number, y: number, z?: number): number => {    if (typeof z === 'number') {        return x + y + z    } else {        return x + y    }}// 在 ts 中 : 后面都是在声明类型，和实际代码逻辑无关let abc: (x: number, y: number, z?: number) => number = add// interface 描述函数类型interface ISum {    (x: number, y: number, z?: number): number}let def: ISum = add

8. 类型推论 (type inference)

官方文档: https://www.typescriptlang.org/docs/handbook/type-inference.html

当我们把数据赋给变量时，没有指定数据类型，ts 会自动推测出一个类型，如下图:

因为 ts 已经将变量 x 的类型推断为 number，那么当我们给变量 x 赋值一个 string 类型的数据则会提示错误

9. 联合类型

// 联合类型 union typeslet numOrString: number | stringnumOrString.toString() // toString() 是 number|string 的共有方法// numOrString.length // 报错: length 不是共有属性, string 有，但 number 没有

10. 泛型 Generics

基础使用

function echo<T>(arg: T): T {    return arg}const str: string = 'liang'const num: number = 123456console.log(str, num);

交换数组中两个元素的位置

function swap<T, U>(tuple: [T, U]): [U, T] {    return [tuple[1], tuple[0]]}const res1 = swap(['123', 456])console.log(res1);

约束泛型

interface ILength {    length: number}// 约束泛型function echoWithArr<T extends ILength>(args: T): T {    console.log(args.length);    return args}echoWithArr('12345')echoWithArr(['1', 2])echoWithArr({width: <span class="hljs-num