携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

前言

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。
同时扩展了JavaScript 的语法，所以任何现有的JavaScript 程序可以不加改变的在 TypeScript 下工作；为了保证兼容性，TypeScript 在编译阶段需要编译器编译成纯 JavaScript 来运行。

1.安装TypeScript

全局安装TypeScriptnpm i -g typescript
查看是否安装成功tsc -v

2.简单数据类型

同JS一样，TS也有基本数据类型

function fn() {
    let str: string = 'Hello TypeScript'
    console.log(str)
}

fn()

这里str: string中，str是变量名称，string是指这个字段的类型为字符串，如果你给它赋值任何其它的值，都是不被允许的。在上图中，提示到不能将类型“number”分配给类型“string”这就是静态类型检测，在编译时期，静态类型的编程语言即可准确地发现类型错误，这就是静态类型检测的优势。
TS比JS更加注重变量的数据类型校验。

字符串string
数字number / bigint(一般较大的整数才会使用)
布尔值boolean
唯一值symbol
请注意：虽然number和bigint都表示数字，但是这两个类型不兼容。 TS具有类型注释与推断

3.复杂数据类型

1.数组类型Array

一个数组可以定义不同的字段类型，第一种方式

let arr1: number[] = [1, 2, 3]
let arr2: string[] = ['react', 'vue', 'electron']

第二种方式：数组泛型，Array<元素类型>

let arr3: Array<number> = [2,3,4]
let arr4: Array<string> = ['Tom', 'Anne', '张三']

如果不按照规定赋值，就会报错
TS类型推断，如果我们有一个数组，里面的值不一样，我们把鼠标移上去，会自动给我们推断出它是什么数据类型。
TS帮我们推断出了数组其中的数据类型，我们可以把代码改成这样

let arr:(number | string | null | boolean)[] = [1, '2', null, true]

这样写，方便了我们开发者的编写代码时，能知道该传入什么类型的参数，让开发者少花费很多时间在传入类型参数上。

2.元组类型Tuple

什么时候需要用到元组？

如果一个数组中的每一项也是数组，那么我们这个时候就需要依赖于元组。\

元组最重要的特性是可以限制数组元素的个数和类型，它特别适合用来实现多值返回。在 JavaScript 中并没有元组的概念，作为一门动态类型语言，它的优势是天然支持多类型元素数组。

let arr: [string, number][] = [
    ["Tom", 26],
    ["Jone", 18],
    ["anne", 24]
]

如果每个数组项不是数组，而是对象，那么写法如下：

let arr: {name: string, age: number}[] = [
    {name: "蔡文姬", age: 12},
    {name: "瑶瑶", age: 18},
    {name: "小乔", age: 24}
]

3.无返回值void

当一个函数没有返回值时，我们需要加上void：

function fn(a:number, b:number):void {
    console.log(123)
}
fn(2,3)

4.undefined和null

-TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。和 void相似，它们的本身的类型用处不是很大：

let u: undefined = undefined
let n: null = null

5.任意类型any

any 指的是一个任意类型，它是官方提供的绕过静态类型检测的方法。如：

let arr:any[] = [1, 'typescript', true]

注意，非必要时，我们不要使用any，这几乎违背了TS的出发点。

6.枚举enum

使用枚举类型可以为一组数值赋予别名。

enum Color {Red, Yello, Blue, Green}
let c: Color = Color.Yello
console.log(c); // 1

默认情况下，从0开始标号，我们也可以手动的制定成员的数值，可以一个，也可以全部指定。

enum Color {Red = 2, Yello, Blue, Green}
let c: Color = Color.Yello
console.log(c); // 3

7.never

-never 表示永远不会发生值的类型。一个永远不会有返回值，或者产生死循环的函数，就可以加上never：

// 只有产生报错才会产生错误返回
function fn1(str: string): never {
    throw Error(str);
}

// 只有条件为真才会产生值返回
function fn2(): never {
    while(true) {}
}

8.object

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
当我们在obj里面定义了object,null,number类型之后，我们不能给这几个类型之外的值类型进来，不然会报错。

9.类型断言

断言的语法分为两种：

<> 尖括号
as 语法
你已经可以很明确的知道返回值一定是某种数据类型，就可以使用as给它断言：

// as语法
const b:number = 1
const a = b as number

// <>语法
let value: any = "this is a string";
let strLength: number = (<string>value).length

10.不确定变量unknown

我们可以把任何值赋值给unknown

let value: unknown
value.length

但是不能用属性和方法，如果需要使用属性和方法，则需要给value断言

let value: unknown
(value as string).length

TypeScript的基本使用(上)

前言