typescript是什么？

我们看一下百度百科对 typescript 的介绍 TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性（如装饰器 [1] ）

看到这里，你是不是会产生两个疑问？

• 1、typescript为什么是javascript的超级；
• 2、静态类型是什么；

下面我就一一道来

javascript的超集

javascript和typescript的关系可以用下面这幅图来表示。

image.png

在 TypeScript 可以使用一些尚在提案阶段的语法特性，可以有控制访问符，而最主要的区别就是 TypeScript 是一门静态语言。

静态类型

编程语言的静态类型定义在学术上理解起来比较复杂，简单来说，一门语言在编译时报错，那么是静态语言，如果在运行时报错，那么是动态语言。

我们为什么要去使用typescript呢？

TypeScript 提供了类型提示功能，我们可以非常舒服地调用同伴的代码，由于 TypeScript 的存在我们可以节省大量沟通成本、代码阅读成本等等。

• 程序更容易理解
• 效率更高
• 更少的错误
• 非常好的包容性

ts原始数据类型

TypeScript的原始类型包括: boolean、number、string、void、undefined、null、symbol、bigint。

boolean

let isDone: boolean = false

number

JavaScript中的二进制、十进制、十六进制等数都可以用 number 类型表示。

const decLiteral: number = 6
const hexLiteral: number = 0xf00d 
const binaryLiteral: number = 0b1010 
const octalLiteral: number = 0o744

string

let firstName: string = "dai"

void

function warnUser(): void { 
    alert("This is my warning message"); }
    
// 实际上只有null和undefined可以赋给void:
const a: void = undefined

null 和 undefined

let u: undefined = undefined; 
let b: null = null;

// 默认情况下 null 和 undefined 是所有类型的子类型
let num: number = undefined
let str: string = undefined

any类型和联合类型

any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。

这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。

这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用any类型来标记这些变量：

let notSure: any = 4
notSure = "abc"
notSure = false

unknow（联合）

unknown 和 any 的主要区别是 unknown 类型会更加严格:在对unknown类型的值执行大多数操作之前,我们必须进行某种形式的检查,而在对 any 类型的值执行操作之前,我们不必进行任何检查。

unknow可以规定数据类型范围

let stringOrNumber: string | number = 123
stringOrNumber = 'abc'

数组类型和元组类型

数组

数组有两种定义方式

• 直接在元素类型后面接上 []

let arrayNumbers: number[] = [1, 2, 3, 4]

• 使用泛型

let list: Array<number> = [1, 2, 3, 4]

元组

元组类型与数组类型非常相似，表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let x: [string, number] = ['abc', 123]

接口（interface）

接口的作用：

• 对对象的形状进行描述
• 对类进行抽象
• duck typing（鸭子类型）

例子

interface Person {
    name: string;
    age: number;
}

let person: Person = {
    name: 'dj',
    age: 25
}

可选属性

我们可以在接口定义的时候，在某个变量后面加一个 ? 来表示这个属性不是必须的

interface Person {
    name: string;
    age?: number;
}

let person: Person = {
    name: 'dj'
}

只读属性

在接口的某个变量前加一个 readonly ，就可以把一个属性变成只读属性

interface Person {
    readonly id: number;
    name: string;
    age?: number;
}

let person: Person = {
    id: 1,
    name: 'dj'
}

函数（function）

ts中的函数的基本格式

function add(a: number, b: number): number {
    return a + b
}

let result = add(2, 3)

可选参数

当某个参数不确定是否存在时，可以在参数后面加一个 ?

注意：可选参数不能在一定存在的参数前面

function add(a: number, b?: number): number {
    return a + (b ? b : 0)
}

let result = add(2, 3)

默认参数

当一个参数是默认参数时，这个时候传不传值都可以

function add(a: number, b: number = 5): number {
    return a + (b ? b : 0)
}

let result = add(2)