TypeScript 学习笔记（一）

TypeScript 是什么？

TypeScript 是 JavaScript 的超集，在 JavaScript 的基础之上，为 JavaScript 添加了类型支持。

为什么要有 TypeScript？

JavaScript 是一门弱类型语言，其代码中的错误绝大多数是类型错误（Uncaught TypeError）。这些经常出现的错误，严重影响了开发效率。

从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JavaScript 属于动态类型的编程语言。

静态类型：编译期做类型检查
动态类型：执行期做类型检查

因此：

对于 JavaScript 来说，需要等到代码执行的时候才能发现错误（晚）；
对于 TypeScript 来说，在代码编译的时候就能发现错误（早），配合开发工具，可以提前到在编写代码的时候就能发现代码中的错误（更早）。

另外，对于 TypeScript 编辑器的代码提示更丰富，开发体验更好。

类型注解

1	let age: number = 18

形如 : number 这部分代码叫类型注解，作用是为变量添加类型约束。浏览器据此可以进行报错和代码提示。

JavaScript 已有类型：
- 原始类型：number/string/boolean/null/undefined
- 复杂类型：数组、对象、方法
TypeScript 新增类型：联合、自定义、接口、元组、字面量、枚举、void 等

let name: string = ''
let age: number = ''
let bool: boolean = false
let gender: undefined = undefined
let hobby: null = null

// 声明数组的方式 1
let arr1: number[] = [1, 2, 3]
// 声明数组的方式 2，范型
let arr2: Array<number> = [1, 2, 3]

联合类型

1
2
3

// 联合类型
let arr: (number | string)[] = [1, 2, 3, 'abc']
// 会丢失一部分代码提示，只能提示共有的方法和属性

类型别名

type ArrType = (number | string)[]

let arr1: ArrType = [1, 2, 3, 'abc']
let arr2: ArrType = [1, 2, 3, 'abc']
let arr3: ArrType = [1, 2, 3, 'abc']

type ItemType = number | string
let arr4: ItemType[] = [1, 2, 3, 'abc']

函数类型

function add1(a: number, b: number): number {
  return a + b
}
const add2 = (a: number, b: number): number => {
  return a + b
}

函数的类型别名

函数的类型别名通常是给箭头函数 / 函数表达式使用，不会给函数声明使用

type FnType = (a: number, b: number) => number

const add: FnType = function (a, b) {
  return a + b
}

const sub: FnType = (a, b) => {
  return a - b
}

void 类型

如果函数不写 return，默认返回值是 undefined，但是 TypeScript 类型推断为 void。在 TypeScript 中写 : undefined 的意思是必须返回一个 undefined。TypeScript 提供了一个返回值类型 : void 意思就是没有返回值。

1
2
3

const show = (content: string): void => {
  console.log(content)
}

可选参数

在 JavaScript 中定义了形参，调用函数时可以不传实参
在 TypeScript 中定义了形参，调用函数时必须传入实参，否则报错

如果要实现可选参数，加一个 ?，可选参数只能放在参数列表的最后。

1
2
3

const print = (name?: string, gender?: string) => {
  console.log(name, gender)
}

对象类型

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。