让你一天学会TpyeScript ！！TypeScript TypeScript 简称：TS，是 JavaScript

TypeScript

TypeScript 简称：TS，是 JavaScript 的超集。

简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。

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

// TypeScript  代码有明确的数据类型
let age1: number = 18
// JavaScript  代码没有明确的类型
let age2 = 18

ts他是微软公司开发的开源编程语言

1. 动态跟静态的区别

js : 边解释边执行, 错误只能在执行阶段才能发现
ts : 他要先编译,在执行
js是动态语言(边解析-->边执行),ts是静态语言(先编译-->执行)

2. ts完全兼容js, 可以编译成js

3. ts有类型支持,有强大的 `代码类型提示`

在写代码的过程中就可以发现问题

4. 安装ts环境

安装包 : npm i -g typescript npm i -g ts-node
检查安装成功 tsc -V（此时，在同级目录中会出现一个同名的 JS 文件）

5. 创建你的第一个ts文件

创建后缀为.ts的文件
直接在集成终端用ts-node ./你的文件 可以按一下 tab键文件名会直接上去
但是此时会有小伙伴会报一个错 console.log(),解决方案其中一种我给大家放在下面了
```
//写代码的时候用{}包起来
{
    var a = 'niu'
    console.log('a')
}
```

ts的类型注释

格式

let 变量名:类型 = 初始值

示例

let a:number = 1  //这边注意一下所有的类型都是小写的

ts的数据类型

js原有的数据类型

// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '小花'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

// symbol
let uniKey:symbol = Symbol()

TS 新增类型

联合类型
自定义类型(类型别名)
接口
元组
字面量类型
枚举
void
any
unkown
等

类型推论

// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

当我们不知道数据类型的时候,鼠标放上面的时候我们就可以直接看到数据类型

联合类型

示例:

//这个数组里面的可以放两种数据类型
let arr :(number|string)[]=[1,2,3,'a','b']

格式 : `|`（竖线）在 TS 中叫做联合类型

let 变量 : 类型1|类型2|.... = 初始值

类型别名

格式

type 别名 = 类型

示例 : 别名可以是任意的合法字符串，一般首字母大写

type NewType  = string |number|null //定义
let a:NewType = 1
let b:NewType = '1'

数组类型

格式 :

let 变量 : 类型[] = [值1 , ......]
let 变量 : Array<类型化> = [值1, ....]

示例:

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字

// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组，每个元素都必须是字符串


// 联合类型  这里可以数组里面又写数字又写字符串
// 这里有个有优先级的问题，用（）包一下
let arr: (number | string) [] = []
let arr: Array<number | string> = []

// 类型推论
let arr = [1, '1']

函数类型

格式 :

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值,...): 返回值类型 { }

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值, ...):返回值类型 => { }

示例

// 声明式  返回值的类型注解写在( )的后边
function sub(num:number,num2:number):number {
    return num+num2
}

// 箭头函数
const sub =(num:number , num2:number):number=>{
    return num+num2
}

sub(1,1)  
sub(1,"1")   // 报错

由此可见 , 定义一个多个人相同参数和返回值类型的函数时,代码比较冗余

我们可以提炼出来

type Fn = (n1:number,n2:number)=>number
// 下面我们可以直接使用
const sub1 : Fn = (a,b)=>{return a+b}

函数-返回值类型void

在Ts中, 如果一个函数没有返回值,应该只用void类型

function niu(name:string):void{
    console.log(name)
}

具体来说：有如下三种情况

不写return
写return ，但是后面不接内容
写return undefined

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}

// 如果return之后什么都不写，此时，add 函数的返回值类型为： void
const add = () => { return }

const add = (): void => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}

void和undefined的区别

如果函数没有指定返回值，调用结束之后，值是undefined的，但是不能直接声明返回值是undefined

function add(a:number, b:number): undefined { // 这里会报错
  console.log(a,b)
}

函数-可选参数

格式

function niu(start?:number,end?:number):void{
    console.log(start+end)  // 这边写了之后调用函数就可以只写一个值
}

以上就是没有写可选参数报的错

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

对象类型-单独使用

格式

方法有两种写法：普通函数和箭头函数。

const 对象名: {
  属性名1：类型1，
  属性名2：类型2，
  方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
  方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型
} = { 属性名1: 值1，属性名2：值2  }

可选属性用 ?

const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }

示例:

const goods : {
    name:string,
    price:number|string,
    func:()=>{}
}={
    name: '手机', 
    price: 2000, 
    func:function(){ return '打电话' }
}

使用 {} 来描述对象结构
属性采用属性名: 类型的形式，如果是多行，可以省略,
方法采用方法名(): 返回值类型的形式
可选使用 ?

对象类型-类型别名

示例 :

// 创建类型别名
type Person = {
  name: string，
  age: number
  sayHi(): void
}

// 使用类型别名作为对象的类型：
let person: Person = {
  name: '小花',
  age: 18
  sayHi() {}
}

function f1 (p: Persion) :void {
  
}

接口

场景

当一个对象类型被多次使用时，有如下两种方式来来描述对象的类型，以达到复用的目的：

类型别名，type
接口，interface

格式

interface 接口名  {
    属性1: 类型1, 属性2: 类型2,
}

示例

interface IGoodItem  {
   name: string, price: number, func: ()=>string
}

const good1: IGoodItem = {
   name: '手表',
   price: 200,
   func: function() {
       return '看时间'
   }
}
const good2: IGoodItem = {
    name: '手机',
    price: 2000,
    func: function() {
        return '打电话'
    }
}

使用 interface 关键字来声明接口
接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
声明接口后，直接使用接口名称作为变量的类型

接口和类型的区别

interface（接口）和 type（类型别名）的对比：

相同点：都可以给对象指定类型
不同点:
- 接口，只能为对象指定类型。它可以继承。
- 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

接口继承

背景

比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐

interface IPoint2D { x: number; y: number }
interface IPoint3D { x: number; y: number; z: number }

继承格式

interface 接口2 extends 接口1 {
    属性1： 类型1， // 接口2中特有的类型
    ... 
}

接口继承的示例

interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
  z: number
}

使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D
继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)

元组

元组是一种特殊的数组。有两点特殊之处

它约定了的元素个数
它约定了特定索引对应的数据类型

元组的实际应用-约定useState的返回值类型

模拟定义useState。

useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数。

function useState(n: number): [number, (number)=>void] {
        const setN = (n1) => {
            n = n1
        }
        return [n, setN]
    }

const [num ,setNum] = useState(10)

字面量

字面量的作用

单个字面量没有什么用处，它一般和联合类型 一起使用，用来表示一组明确的可选值列表。

例如：约定 Gender类型只能取girl和boy这两个字符串其中之一。

type Gender = 'girl' | 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
let g3: Gender = 'man' // 错误

示例：

redux 中的actionType。它只能取固定值

type ActionType = 'ADD_TODO' | 'DEL_TODO'
function reducer(type:ActionType) {
  if(type === 'ADD_TODO')
}

让你一天学会TpyeScript ！！