1.TypeScript介绍

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

2.TypeScript初体验

2.1下包

全局安装:npm i -g typescript。
验证是否安装成功:tsc –v (查看 typescript 的版本)

2.2编译并运行TS代码

步骤
(1) 创建ts文件。例如 hello.ts 文件（注意：**TS 文件的后缀名为 `.ts`**）

(2)编译。将 TS 编译为 JS
在终端中输入命令，`tsc hello.ts`（此时，在同级目录中会出现一个同名的 JS 文件）

(3)执行 JS 代码。
  1.在node中运行。在终端中输入命令，`node hello.js`。
  2.在浏览器中运行。

3.ts-node 简化运行TS的步骤

使用 npm i -g ts-node 命令下包，直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令。(初学阶段可以使用ts-node来运行代码,项目阶段就不会再这样使用了)。

4.运行ts代码报错问题

4.1 console.log报错问题

Cannot find name 'console'. Do you need to change your target library? Try changing thelibcompiler option to include 'dom'.

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

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

4.2 同名的变量冲突问题

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

解决：

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

2.方式2：export {}

5.TS类型注解

5.1格式&示例

格式

let 变量名: 类型 = 初始值

示例

let age: number = 18

5.2 报错

 // 类型注解
    let age: number = 18
    
 // 错误代码：
    let age: number = '19'
 // 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致

6.TS的类型

6.1常用基础类型(分为两类)

JS 已有类型
1.原始类型：number/string/boolean/null/undefined/symbol
2.对象类型：object（包括，数组、对象、函数等对象）

TS 新增类型

1.联合类型

2. 自定义类型(类型别名)

3.接口

4.元组

5.字面量类型

6.枚举

7. void

8. any

9. unkown

7.原始类型

number/string/boolean/null/undefined/symbol

// 数值类型
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()

8.类型推论

在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写

8.1 2种常见场景

声明变量并初始化时
决定函数返回值时

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

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

8.2 VSCode中的编码技巧

如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型
写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯

9.联合类型

9.1 格式

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

9.2 示例

let var1: string | number = 1
var1 = '1'

9.3 应用场景

定时器id

// | 联合类型  变量可以是两种类型之一
let timer:number|null = null
timer=setTimeout(()=>{},1000)

10.类型别名

10.1 格式

type 别名 = 类型

10.2 使用

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

10.3 场景

给复杂类型起别名

 type NewType = string | number

 let a: NewType = 1
 let b: NewType = '1'

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

11. 数组类型

11.1 格式

let 变量: 类型[] = [值1，...]

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

11.2 示例

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

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

11.3 练习-定义一个数组元素可能是字符串类型，也可能是数值类型

{
type ids=string | number

let arr:Array<ids>=[]
let arr1=['a',2]
console.log(arr1);

}

12. 函数定义

12.1 单个定义

12.1.1 格式

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

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

12.1.2 示例

// 声明式
function add(num1: number, num2: number): number {
  return num1 + num2
}

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

add（1,'1') // 报错

12.2 统一定义函数格式

问题: 定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘

const add = (a:number,b:number):number =>{
      return a + b
}

const sub = (a:number,b:number):number =>{
      return a - b
}

分析: 把拥有相同形参和实参的函数当做一个整体，来定义

const add1 : (n1:number,n2:number)=>number  =  (a,b)=>{return a+b }

做法: 提炼自定义类型

type Fn = (n1:number,n2:number) => number 
const add1 : Fn = (a,b)=>{return a+b }

13.函数-返回值类型void

在 TS 中，如果一个函数没有返回值，应该使用 void 类型

function greet(name: string): void {
  console.log('Hello', 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 => {}

13.1 void和undefined的区别

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

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

14. 函数-可选参数

场景:使用函数实现某个功能时，参数可以传也可以不传。
例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)
这种情况下，在给函数参数指定类型时，就用到可选参数了。

14.1 格式

可选参数：在可选参数名的后面添加 ?（问号）

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

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

14.2 可选和默认值的区别

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

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

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

15.对象类型

15.1单独使用

15.1.1 格式

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

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 }

15.1.2 示例

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

15.2 类型别名

15.2.1 示例

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

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

function f1 (p: Persion) :void {
  
}

15.2.2 练习-定义一个对象类型

{
type Stu={
    name:string,
    gender:string,
    grade:number,
    height:string,
    study():void,
    play:()=>{}
}

 const stu1:Stu={
   name:'小明',
   gender:'男',
   grade:79,
   height:'170cm',
   study(){
       console.log('小明喜欢学习英语'); 
   },
   play:()=>{
       console.log('小明喜欢玩电脑游戏');
       return {}
   }
 }

console.log(stu1);
}

16.接口

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

类型别名，type
接口，interface

16.1 格式

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

16.2 示例

{
    interface IStu {
         name:string,
         gender:string,
         grade:number,
         height:string,
         study():string,
         play:()=>void
    }

    
 const stu1:IStu={
   name:'小明',
   gender:'男',
   grade:79,
   height:'170cm',
   study(){
       console.log('小明喜欢学习英语');
       return '小明喜欢学习英语'
   },
   play:()=>{
       console.log('小明喜欢玩电脑游戏');
    //    return {}
   }
 }
console.log(stu1);

}

解释：

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

16.3 接口和类型的区别

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

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

// 接口的写法
interface IPerson {
	name: string,
	age: number
}

const user1：IPerson = {
	name: 'a',
	age: 20
}

// type的写法
type Person  = {
	name: string,
	age: number
}
const user2：Person = {
	name: 'b',
	age: 20
}

16.4 接口继承

16.4.1 背景

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

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

16.4.2 分析

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

16.4.3 继承-格式

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

16.4.4 继承-示例

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

解释：

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

17.元组Tuple

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

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

17.1 示例

let position: [number, number] = [39.5427, 116.2317]

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

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

{
function useState (a:number):[number,(newA:number)=>void]{
    const fn=(newA:number)=>{
        a=newA
    }
    return [a,fn]
}

const [age,setAge]=useState(100)
setAge(300)
console.log(useState(300));
}

18. 字面量类型

任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用，此时，就称为是字面量类型

18.1 字面量的作用

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

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

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

18.2 示例

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

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

2.游戏中，游戏的方向键值只能是上、下、左、右中的任意一个

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，写上''，就会有类型提示：
changeDirection('up')

优势：相比于 string 类型，使用字面量类型更加精确、严谨

19.枚举enum

定义: 枚举（enum）的功能类似于字面量类型+联合类型组合的功能，来描述一个值，该值只能是一组命名常量中的一个。

19.1 基本使用

19.1.1 格式

 enum 枚举名 { 可取值1, 可取值2,.. }

说明：

使用 enum 关键字定义枚举
一般约定首字符大写

19.1.2 示例

  // 定义枚举类型
enum Direction { Up, Down, Left, Right }

// 使用枚举类型
function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

19.2 枚举的值

19.2.1 枚举的值

 // type定义的类型是没有值的 - 不能console.log
type NewType = number | string
console.log(NewType)  // 输出类型是没有意义的

// 创建枚举
enum Direction { Up, Down, Left, Right }

// 枚举是有值的 - 可以console.log
console.log(Direction.Up)

19.2.2 数字枚举

// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

enum Direction { Up = 2, Down = 3, Left = 8, Right = 16 }

19.2.3 字符串枚举

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值

19.3 应用场景

例如：后端用 0, 1来标识性别，但是0，1在代码中不好读，此时可以用枚举来约定

enum Gender {
      girl,
      boy
}
type User = {
     name: string,
     gender: Gender
}

const u1: User = {
     name: '小花',
     gender: Gender.girl // 写代码的时候，可以利用代码提示
}

console.log(u1)

原文链接：https://blog.csdn.net/m0_66083041/article/details/123860090