TypeScript 入门款笔记。

一、TypeScript定义

1.1 TypeScript是什么

TypeScript = Type + JavaScript ,在JS基础之上，为JS添加了类型支持。

TypeScript 是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行。

2.2 TypeScript 为什么要为 JS 添加类型支持？（重构项目更简单）

背景：JS的类型系统存在“先天缺陷”，JS代码中绝大部分错误都是类型错误（uncaught TypeError）。

问题：增加了找Bug、改Bug的时间，严重影响开发效率。

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

静态类型：编译期做类型检查；动态类型：执行期做类型检查。 代码编译和代码执行的顺序：1、编译 2、执行。

对于JS来说：需要等到代码真正去执行的时候才能发现错误（晚）。

对于TS来说：在代码编译的时候（代码执行前）就可以发现错误（早）。

2.3 小项目是不是没必要使用TS

考虑成本，考虑团队人员对TS对TS的掌握程度；再就是考虑 TS是否适合项目，比如说，活动页短期效果，不需要后期维护，没必要使用TS。

二、TypeScript怎么用

2.1 安装编译TS的工具包

浏览器和NodeJS，只认识JS不认识TS。需要将TS转化为JS，才能运行。

安装命令：npm i -g typescript

typescript包：用来编译TS的包，提供了tsc命令，实现TS -->JS的转化。

验证是否安装成功：tsc -v

注意：文件里面有同名变量，TS会报错。如下图：（关闭JS文件夹报错信息就会消失，vs code的提示）

2.2 简化运行TS的步骤

问题描述：每次修改代码后，都要重复执行两个命令，才能运行TS代码，太繁琐。

解决办法：使用ts-node包，直接在NodeJS中执行TS代码。

安装命令：npm i -g ts-node

使用方法：ts-node hello.ts

ts-node 命令在内部将TS -->JS（编译）,在运行JS代码。

三、TypeScript常用类型

3.1 类型注解

示例代码：

// 代码中的number 就是类型注解
let age:number = 18

类型注解为变量添加类型约束，约定age的类型为number。（约定了什么类型，就只能给变量赋值该类型的值）

3.2 常用基础类型

JS已有类型 和 TS新增类型

1、JS已有类型

基本类型：number / string / boolean / null / undfiened / symbol / bigint

引用类型：object（包括 数组，对象，函数等）

2、TS新增类型

联合类型，自定义类型（类型别名），接口，元组，字面量类型，枚举，void，any等。

3.3 原始类型

1、原始类型：number/string/boolean/null/undefined/symbol/bigint。

这些类型按照JS中类型的名称书写。

let age:number = 18
let useName:string = '小熊'
let isLoading:boolean = false
// 人为赋值null表示为空，比如清除定时器和对象释放内存，
// undefined一般表示未被定义的变量，比如var a,打印显示为undefined
let u:null = null
let u2:undefined = undefined
// symbol 使用
let s:symbol = Symbol()

3.4 数组类型

2、对象类型：object(包括数组，对象、函数等)

引用类型在TS中更加细化，每个具体的对象都有自己的类型语法。

数组类型的两种写法：

// number 类型的数组 字面量写法 推荐使用
let nums: number[] = [1,2,3]
// 字符串 数组 react 不能使用这种写法
let strs: Array<string> = ['1','2','3']

// 数组即有number，又有string
let arr: (number | string)[] = ['a',1,'b',2]

|竖线在TS中叫做联合类型（由两个或多个类型组成）

vue项目跳转当前页面，id找不到，使用watch监听路由。

3.5 类型别名

当一个类型被多次使用，可以通过类型别名，简化该类型的使用。

type CustomArray = (number | string)[]
let arr1: CustomArray = [1,2,3,'a']
let arr2: CustomArray = ['s',1]

使用type关键字创建类型别名，创建类型别名后，直接使用该类型别名作为变量的类型注解。

3.6 函数类型

函数的类型实际上指的是：函数参数和返回值的类型。

为函数指定类型的两种方式：1、单独指定参数、返回值的类型 2、同时指定参数和返回值

// 函数声明
function add(num1: number,num2: number): number{
    return num1 + num2
}
// 函数表达式
const add = (num1: number,num2: number): number =>{
    return num1 + num2
}

如果函数没有返回值，那么，函数返回值类型为：void

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

greet('huamei')

可选参数：？，可选参数后面不可以出现必选参数

function mySlice(start?: number,end?: number):void{
    console.log('起始索引：'，start，'结束索引：',end）
}

未完待续。。。。