TypeScript

0、ts是啥?

TypeScript 是微软开发的开源编程语言。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript,可以在任何运行 JavaScript 的地方运行

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

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

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

TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。

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

1、初体验

全局安装编译 TS 的工具包    npm i -g typescript 或 yarn global add typescript

tsc –v 查看版本

编译并运行 TS 代码

步骤

1. 创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）

2. 编译。将 TS 编译为 JS

   在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）

3. 执行 JS 代码。

   1. 在node中运行。在终端中输入命令，node hello.js

   2. 在浏览器中运行。

2、ts-node 简化运行 TS 的步骤

下包  npm i -g ts-node

使用方式：ts-node hello.ts

相当于：1、 tsc 命令          2、 node（注意：ts-node 不会生成 js 文件）

解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码

如果ts代码里有 console.log 的话，就会报错

3、console.log报错问题

原因：没有创建ts项目，没有写配置文件

解决：用tsc --init命名，在根目录下生成配置文件 tsconfig.json

同名的变量冲突问题

原因：目前写的代码不是模块化的环境，定义的变量都是全局的。

解决：

1. 方式1：写代码时，用{ }整体给包起来

2. 方式2：export {}

4、TS类型注解

给变量添加类型约束。作用：为变量添加类型约束

// 类型注解
let a: number = 3

说明：代码中的 : number 就是类型注解

5、TS的类型

/** 常用基础类型(两大类)
 * 
 * 1、js本身已有的类型(原始类型) string number boolearn null nudefined symbol
 * 2、新增类型
 *   联合类型
 *   自定义类型
 *   接口
 *   元组
 *   字面量类型
 *   枚举
 *   any
 *   void
 *   unkown
 */

6、类型推论

// 类型推论
let b = 3   // (自动推论 let b: number = 3)

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

// 自动推断为: any
let timer = null
timer = setTimeout(() => {})

// tsc --init 不然报错
console.log(a + b);

7、联合类型

// 联合类型
let t1: null | number = null
t1 = setTimeout(() => {})

8、类型别名

// 类型别名
type s = string
let a1: s = '12'

9、数组类型

// 数组类型
let arr: string[] = ['1']

let arr1: Array<string> = ['1']

let arr2 = []    // any[]
arr2.push(1)
arr2.push('1')

let arr3: (string | number)[] = [1, '2']
type sn = string | number

let arr4: sn[] = [1, '2']
let arr5: Array<sn> = [1, '2']

10、函数类型

// 函数的类型
function abc(a: number = 1 ,b: number = 2): number {
  return a + b
}

// 箭头函数
const abc1 = (a: number = 1, b: number = 2): number => {
  return a + b
}

// 优化函数的类型（统一定义函数格式）
const abc3: (a:number, b:number) => number = (a, b) => {
  return a + b
}

// 再次优化
type fn = (a: number, b: number) => number
const abc2: fn = (a, b) => {
  return a + b
}

可选参数和 void

可选和默认值的区别

     相同点： 调用函数时，可以少传参数

     区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的参数一定有值。

注意：它们不能一起使用。优先使用默认值

// 可选参数  void: 没有任何类型 或者 没有返回值 或者 返回值为 null、undefined

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

const abc4 = (a?: number, b?: number): void => {
  
}

void和undefined的区别

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

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

11、对象类型

// 对象
const obj: {
  name: string,
  age: number,
  set: () => void
} = {
  name: '1',
  age: 12,
  set () {
    console.log(111); 
  }
}


// 简化
type Stu1 = {  // 类型别名
  name?: string,  // 可选参数
  gender?: string,
  results?: number,
  height?: number,
  learning?: () => void,
  game?: () => void
}

const obj1: Stu1 = {  // 使用一
  name: '1',
  gender: '女',
  game () {
    console.log(111);   
  }
}
const obj2: Stu1 = {   // 使用二
  name: '12',
  gender: '男',
  results: 11,
  height: 111,
  learning () {
    console.log(111);  
  },
  game () {
    console.log(2222); 
  }
}

12、接口类型

// 接口  
interface Iobj {
    name: string,
    gender: string,
    game: () => void
}
interface Iobj1 extends Iobj { // 继承
    results: number,
    height: number,
    learning: () => void,
}
const stuObj1: Iobj1 = {
  name: '12',
  gender: '男',
  results: 11,
  height: 111,
  learning () {
    console.log(111);  
  },
  game () {
    console.log(2222); 
  }
}

13、元组类型

简化版 useState

// 元组
const useState = (num: number): [number, (newNum: number) => void] => {
  const fn = (newNum: number) => {
    num = newNum
  }
  return [num, fn]
}

14、字面量类型

// 字面量
type aa = 'aa' | 'bb'
let aa: aa = 'aa'
let bb: aa = 'bb'

简化版 reducer

// reducer
type todo = 'GETLIST' | 'GETTODO'
type actionObj = {
  type: todo,
  payload: string[]
}
function reducer(state: string[] = [], action: actionObj): string[] {
  switch (action.type) {
    case 'GETLIST':
      return action.payload
    case 'GETTODO':
      return action.payload
    default:
      return state
  }
}