[JavaScript知识库]TypeScript快速入门

1.什么是TypeScript?

就是js的超集,完全包含js,? js有的它都有,并且额外的增加了：类型系统

2.为什么添加类型系统?

(1)JavaScript 属于动态类型的编程语言

边解释边执行，错误只能在运行阶段才能发现

比如下面这种代码:

let ar = 11  // 这里是数值
ar = []  // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误

无疑增加了找 Bug、改 Bug 的时间，严重影响开发效率

(2)TS属于静态类型的编程语言

它要先编译，再执行。不能直接执行，需要编译成js才能执行

它会在编译期间做类型检查，从而提前发现错误

那就来体验一下

---------------------------------------

1.TypeScript安装

npm i -g typescript

内部提供了 tsc 命令? 来转换成js文件, 如下

tsc 文件名.ts

这样每次运行前要先转换一下,麻烦, 介绍一个工具: ts-node?

(1) ts-node安装

npm i -g ts-node

(2) 使用

ts-node 文件名.ts

解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码, 但不会生成js文件, 方便我们学习, 是否安装随意

如有报错:?

1. tsc --init 生成配置文件 tsconfig.json

2. 写代码时，用{}包起来

----------------------------------------------------------------

了解TS新增类型

1. JS 已有类型

   1. 原始类型：number/string/boolean/null/undefined/symbol

   2. 对象类型：object（包括，数组、对象、函数等对象）

2. TS 新增类型

   1. 联合类型

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

   3. 接口

   4. 元组

   5. 字面量类型

   6. 枚举

   7. void

   8. any 等

• 注意：

  1. 原始类型在 TS 和 JS 中写法一致

  2. 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法

好了,正式开始吧.

-----------------------------------------------------------

1.类型注解

let 变量名: 类型 = 初始值

let age: number = 18


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

一句话呗, 给变量指定类型

2.联合类型

就是定义多个类型, 用管道符隔开?

// |`（竖线）在 TS 中叫做**联合类型**，
    // 即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
    let str:string | number = 1
    console.log(str)

格式:

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

3.数组类型

有两种写法

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

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

示例:

 // 写法1:
  let numbers: number[] = [1, 2, 3] // 数组只能放数字类型
  
  // 写法2:
  let strings: Array<string> = ['1','2','3'] // 当然只能放字符串类型

  // 放多个类型呢?
  let arr: (string | number | boolean)[] = []
  arr.push(1)
  arr.push("abc")
  arr.push(true)
  console.log(arr);
  

4.函数类型

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

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

示例:

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

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

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

上面类型定义都一样, 那可不可以拿出来呢?

当然可以, 那就要说到类型别名了

5.类型别名

就是通过type关键字来实现

type 别名 = 类型

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

6.void类型

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

三种情况满足:

• 不写return

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

• 写return undefined

void和undefined的区别

1. 如果函数没有指定返回值，调用结束之后，值是undefined的

2. 当不能直接声明返回值是undefined

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



// 错误代码

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

可选参数:? 就是在参数后面加问号, 避免和默认值一起用

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

7.对象类型

给每一个属性定个类型,

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

示例:

let obj: {
        name: string,
        age: number,
        gender: string,
         
        // 定义方法的两种格式
        game: () => {},
        play(): string,
        say(): void
    } = {
        name: 'c',
        age: 1,
        gender: 'n',
        game() {
            return 1
        },
        play() {
            return '2'
        },
        say() {
            console.log('yes');
            
        }

?都可以用type提炼一下,就不演示了

接口:

只能用于对象,接口名一般约定用大写 i?开头

跟type相似, 一般还是用type

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

示例:

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


const good1: IGoodItem = {
    name: '手表',
    price: 200,
    func: function() {
        return '看时间'
    }
}

接口的继承:

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

interface Point2D { x: number; y: number }

// 3D 有了三个属性
interface Point3D extends Point2D {
    z:number
}

8.元组

看不懂别慌,叫的好听而已

元组是另一种特殊的数组：

• 它确切地包含多少个元素

• 特定索引对应的类型

示例:

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

来模拟一下React中的hook:? useState

function useState(n: number): [number, (number)=>void] {
        const setN = (n1) => {
            console.log('Ez')
        }
        return [n, setN]
    }

const [num ,setNum] = useState(10)

9.字面量类型

let str1 = 'hello'   // string
const str2 = 'hello' // hello

?hello类型是什么鬼?

1. str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string

2. str2 是一个常量(const)，它的值不能变化只能是 'hello '，所以，它的类型为:'hello '

• 注意：此处的 'Hello '，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型

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

示例:

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

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

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

---------------------------------------------

目前就写这么多,漏的以后再加?,东西多,但是不难