又到了一年一度的金三银四，程序员发功的季节，我也在准备四月底的面试，毕竟日常工作开发，用上的就那么点东西，很多基础的知识点理论都忘记的七七八八，所以最近要准备面试，这些重要的知识要捡起来，顺便发在掘金上，以后看也方便！
TypeScript是什么？
1、TypeScript 是微软开发的开源编程语言。2012年10月，微软发布了首个公开版
2、TypeScript2013年6月19日，在经历了一个预览版之后微软正式发布了正式版
3、TypeScript,可以在任何运行JavaScript 的地方运行
TypeScript 简称：TS，是 JavaScript 的超集
简单来说：
1、JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。
2、在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript
TypeScript和JS的对比
1、js：边解释边执行，错误只能在运行阶段才能发现
2、ts: 它要先编译，再执行(不能直接执行，需要编译成js才能执行)
3、js属于动态类型的编程语语言，错误只能在运行阶段才能发现
4、TS属于静态类型的编程语言，它要先编译，再执行(不能直接执行，需要编译成js才能执行)
ts完全兼容javascript，它可以编译成javascript
TypeScript准备阶段
1、全局安装编译 TS 的工具包
npm i -g typescript
2、编译并运行 TS 代码
1、创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
2、在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
3、在node中运行。在终端中输入命令，node hello.js
在线运行地址www.typescriptlang.org/play
ts-node 简化运行 TS 的步骤
使用 ts-node 包，直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令。
1、安装ts-node 包
npm i -g ts-node
2、使用方式
ts-node hello.ts---(ts-node 不会生成 js 文件,ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码)
TS的类型
常用基础类型
1、JS 已有类型
1、原始类型：`number/string/boolean/null/undefined/symbol`
2、对象类型：`object`（包括，数组、对象、函数等对象）
2、TS 新增类型
联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、unkown...
原始类型
let age: number = 18// 数值类型
let myName: string = '小花' // 字符串类型
let isLoading: boolean = false // 布尔类型
let un: undefined = undefined // undefined
let timer: null = null // null
let uniKey: symbol = Symbol() // symbol
类型推论
在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写
let a = 18 //a会被默认推断number类型
function add(a: number, b: number) {
return a + b //返回值会被默认推断为number类型
}
联合类型(重点)
|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
格式:let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
let arr:(string|number)[]=[1,'1',0,'小王'] //数组里面的元素可以是字符串类型也可以是number类型
应用场景
// | 联合类型 变量可以是两种类型之一
let timer:number|null = null
timer = setTimeout()
类型别名
掌握类型别名的用法，能给类型起别名。别名可以是任意的合法字符串，一般首字母大写
type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'
应用场景
type NewType = string | number
let a: NewType = 1
let b: NewType = '1'
数组类型
let arr1:number[]=[1,2,3,4,5,6]//写法一
let arr2:Array<string>=['1','2','3','4','5','6']//写法二
应用场景定义一个数组，它的元素可能是字符串类型，也可能是数值类型
type Arr = (number | string)[]//写法一
type Arr = Array<number | string> //写法二
let arr3: Arr = ['1', 1, '2', 2]
函数的类型(重点)
函数涉及的类型实际上指的是：函数参数和返回值的类型
声明式函数
function fn(a: number, b: number): number {
return a + b
}//函数的两个形参都为number类型，返回值也是number类型
箭头函数
const fn1 = (a: string, b: number): number | string => {
return a + b}
函数-统一定义函数格式
定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘
// 把拥有相同形参和实参的函数当做一个整体，来定义
type Fn = (a: number, b: number) => number
const fn2: Fn = (a, b) => {
return a + b
}
函数-返回值类型void
在 TS 中，如果一个函数没有返回值，应该使用 void 类型
function greet(name: string): void {
console.log('Hello', name)
//
}
具体来说：有如下三种情况
1、不写return 2、写return ，但是后面不接内容 3、写return返回undefined的
// 如果什么都不写，此时，add 函数的返回值类型为： void
const add1 = () => {}
// 如果return之后什么都不写，此时，add 函数的返回值类型为： void
const add2 = () => {
return
}
const add3 = (): void => {
// 此处，返回的 undefined 是 JS 中的一个值
return undefined
}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add4 = (): void => {}
函数-可选参数
格式：可选参数：在可选参数名的后面添加 ?（问号）
//可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
const fn3 = (a: number, b?: string): void => {
console.log(a)
}
fn3(1)//此时实参对应的就是a
//设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的参数一定有值。
const fn4 = (a: number = 10, b?: string) => {}
fn4()//此时就可以不传参数
对象类型-单独使用(重点)
格式
const 对象名: {
属性名1：类型1，
属性名2：类型2，
方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型
} = { 属性名1: 值1，属性名2：值2 }
说明:
1、使用 {} 来描述对象结构
2、属性采用属性名: 类型的形式，如果是多行，可以省略
3、方法采用方法名(): 返回值类型的形式
4、可选使用 ?
示例
type Obj = {
name: string
age: number
genter: string
hobby: Array<string>
fn5(a: number, b: number): number //普通函数fn5(){}
fn6: (a: number, b: number) => number //箭头函数fn6:()=>{}
}
// 使用类型别名作为对象的类型：
const student: Obj = {
name: '小王',
age: 23,
genter: '男',
hobby: ['敲代码'],
fn5(a, b) {
return a + b
},
fn6: (a, b) => a + b,
}
场景
创建两个对象：
学生对象
指定对象的类型
- 姓名
- 性别
- 成绩
- 身高
- 学习（）
- 打游戏（）
type Student = {
name: string
genter: string
performance?: number //可选
height: string | number
study: () => void
play(): void
}
const xiaoWang: Student = {
name: '小王',
genter: '男',
height: 180 + 'cm',
study: () => console.log('喜欢学习'),
play() {
console.log('爱打游戏')
},
}
接口
当一个对象类型被多次使用时，有如下两种方式来来描述对象的类型，以达到复用的目的：
1、类型别名，type
2、接口，interface
格式 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
interface 接口名 {
属性1: 类型1, 属性2: 类型2,
}
示例
//创建接口
interface Item {
name: string
price: number
func: () => void
func1(): string
}
const goods: Item = {
name: '裤子',
price: 500,
func: () => console.log('立即下单'),
func1() {
return '记得二分'
},
}
能使用 type 就用 type，接口的主要用法式接口继承
接口继承
示例
// 比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface IPoint2D {
x: number
y: number
}
interface IPoint3D {
x: number
y: number
}
接口继承的示例
interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
z: number
}
const obj3: IPoint3D = {
x: 1,
y: 2,
z: '小王',
}
元组(重点)
元组是一种特殊的数组。有两点特殊之处
1、它约定了的元素个数
2、它约定了特定索引对应的数据类型
问题 如何定义数据类型来记录 经纬度(记录鼠标的位置)坐标 信息？
type Position1 = { x: number; y: number } //使用对象
//type Position2 = Array<number>}
type Position2 = number[]
let p1: Position1 = { x: 116.2317, y: 39.5427 }
let p2: Position2 = [116.2317, 39.5427]
使用 number[ ] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字，而类似于经纬度只能有两个数字。
元组实例
let position1: [number, string] = [1, '1'] //规定元组只有两个元素，第一个元素必须 为number类型，第二个元素必须为string类型
元组的实际应用-约定useState的返回值类型
useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数。
// 模拟定义useState。
// : [number, (b:number) => void]函数的返回值是元组
function useState(n: number): [number, (b: number) => void] {
// 上面定义返回值元组的第二个元素是参数为number类型的函数
// 这里就要按照类型定义函数
const setN = (b: number) => {
n = b
}
// 返回元组
return [n, setN]
}
// useState(n: number)定义的参数为number类型
const [num, setNum] = useState(100)
// (b: number) => void 元组的第二个元素是参数为number类型的函数
setNum(99)
字面量类型
任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用，此时，就称为是字面量类型
示例
let w: 'Abc' = 'Abc'//这里把w的类型定义成字面量'Abc'，w的值只能为'Abc'
w = 'Abc'
场景1
type Genter = '男' | '女'
let w1: Genter = '男' //此时定义了Genter类型的变量的值只能是Genter的字面量类型其中一个
let w2: Genter = '女'
场景2
type TypeAction = 'ADD' | 'DEL' | 'UPDATE'
function user(state = {}, action: TypeAction) {
switch (action) {
case 'ADD':
return state
case 'DEL':
return state
default:
return state
}
}
！！！谢谢大家的观看，我后续会接着更新，后面面试遇到的问题也会更新出来
