这是我参与「第四届青训营」笔记创作活动的第3天

相信大家对JavaScript很熟悉了吧，那看到与JavaScript名字很相像的TypeScript应该也会有一种莫名的熟悉感吧。如果没有，没关系，咱们一起接下来学习一下TypeScript的知识吧！

什么是TypeScript

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成

TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

TypeScript是一种静态类型、弱类型语言，不同于JavaScript是一种动态类型、弱类型语言。

静态类型和动态类型有什么区别呢？

静态类型是在执行前就进行编译

动态类型是在执行时再进行编译

为什么选择TypeScript呢

静态类型
1. 可读性增强：基于语法解析TSDoc，ide增强
2. 可维护性增强：在编译阶段暴露大部分错误
=> 多人合作的大型项目中，获得更好的稳定性和开发效率
JS的超集
1. 包含于兼容所有js特性，支持共存
2. 支持渐进式引入与升级

接下来我们一起来学习TypeScript的基本语法吧

TypeScript基本语法

基础数据类型

在基础数据类型的定义上，TypeScript需要特别强调数据的类型。

// 字符串
const q: string = 'string'
// 数字
const w: number = 1
// 布尔值
const e:boolean = true
// null
const r: null = null
// undefined
const t:undefined = undefined

对象类型

TypeScript中对象类型说明更严格，可以添加readonly属性等，以及有可选属性，任意属性，创建对象时也需要强调其对象原型

函数类型

TypeScript中参数类型和返回值类型都需要强调

函数重载

TypeScript中函数重载可以通过传入的参数类型返回不同的参数类型，有更明确的声明

数组类型

TypeScript补充类型

TypeScript泛型

泛型：不预先指定具体的类型，而在使用的时候再指定类型的一种特性

type IGetRepeatArrR = <T>{target:T} => T[]
// 泛型接口 多泛型
interface IX<T,U>{
    key: T;
    val: U;
}
// 泛型类
class IMan<T> {
    instance: T;
}
// 泛型约束：限制泛型必须符合字符串
type IGetRepaetStringArr = <T extends string>{target:T} => T[]
// 泛型参数默认类型
type IGetRepeatArr<T = number> = {target: T} => T[]

字符串/数字字面量

// IDomTag必须为html、body、div、span的其一
type IDomTag = 'html'|'body'|'div'|'span'

TypeScript高级类型

联合/交叉类型

联合类型：IA | IB；联合类型表示一个值可以是几种类型之一
交叉类型：IA | IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

type IBookList = Array<{
    author: string;
} & ({
    type: 'history';
    range: string;
} | {
    type: 'story';
    theme: string;
})>

TypeScript入门|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天