TypeScript ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第4天

什么是TS？

TypeScript 是 JavaScript 的语法超集，它添加了静态类型

TS的基础语法

上图可以看得出ts的命名规则是：let 变量名: 类型 = 初始值，同时ts在原有的几个类型number/string/boolean/null/undefined/symbol的基础上还增加了几个新类型：联合类型、自定义类型(类型别名)、接口、 元组、字面量类型、枚举、void、any。

同时还有一个新的叫做联合类型，使用场景是当一个变量也可以是string也可以是number的时候就可以用 | 来使用。

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值 
let arr1 :number | string = 1 // 可以写两个类型

还有类型别名

如字面意思，就是给我们定义的类型起个别名，格式和简单如下：type 别名 = 类型

 type NewType = string | number
 let a: NewType = 1
 let b: NewType = '1'

数组类型

也进行了对应的变化，主要如下：

// 写法1：
let 变量: 类型[] = [值1，...]:
let numbers: number[] = [1, 3, 5] 
//  numbers必须是数组，每个元素都必须是数字
// 写法2：
let 变量: Array<类型> = [值1，...]
let strings: Array<string> = ['a', 'b', 'c'] 
//  strings必须是数组，每个元素都必须是字符串 

函数

较为重要的是函数，里面有很多新内容

语法是

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值,...): 返回值类型 { }
// 声明式实际写法:
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值, ...):返回值类型 => { }
const add2 = (a: number =100, b: number = 100): number =>{
   return a + b
 }
 // 注意： 箭头函数的返回值类型要写在参数小括号的后面
add（1,'1') // 报错 

同时，当一个函数没有返回值的时候，要使用void类型，

function greet(name: string): void { console.log('Hello', name) //}

函数的参数也可以是可选参数，在参数后面加?就好了，

function greet(name: string): void { console.log('Hello', name) //}

函数的重载

泛型

几个高级玩法

联合/交叉类型

类型保护和类型守卫

总结

我感觉，使用 typescript 开发无疑就是在尝试换一种思维方式做事情。TS 能强化了「面向接口编程」这一理念。我们都知道稍微复杂一点的程序都离不开不同模块间的配合，不同模块的功能理应是更为清晰的，TS 能帮我们梳理清不同的接口。同时我也能简单体会到维护一个大项目时，ts的优势。