带你回顾typeScript基础知识(1)

一、概述

        typeScript是具有类型语法的javaScript，是一门强类型的编程语言

        静态类型检查，提前发现代码错误

 二、搭建编译环境：

        1、手动搭建编译环境：

                全局安装 typescript 包（编译引擎）-> 注册 tsc

                命令：npm install -g typescript

        2、自动搭建编译环境

                基于工程化的TS开发模式（webpack / vite），TS的编译环境已经内置了，无需手动安装配置，通过以下命令即可创建一个最基础的自动化的TS编译环境

                命令：npm create vite@latest ts-pro -- --template vanilla-ts

  三、类型注解：

        概念：类型注解指的是给变量添加类型约束，让变量只能被赋值为约定好的类型，在编写代码的过程中如果有错误会实时提示错误信息

let age: number = 18

         1、TS支持的常用类型注解：

• 原始类型，简单类型（number/string/boolean/null/undefined）
• 复杂数据类型（数组，对象，函数等）

   TS新增类型：

• 联合类型
• 自定义类型
• 接口
• 元组
• 字面量类型
• 枚举
• void

        2、简单类型如何进行类型注解：

let age:number = 18
let name:string = 'yzw'
let isDialog:boolean = true

         类型注解的作用：限制变量赋值的数据类型如何有错误会立即提示

        3、类型推论：

                什么是类型推论：ts会自动去判断变量的类型，这样我们就可以减少一些类型注解了，由于类型推论的存在，有些场合下的类型注解可以省略不写，类型推论的两种场景（初始化变量、函数返回值）

         能省略类型注解的地方就省略!   能省略类型注解的地方就省略!

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

       4、数组类型注解：

        语法1：

let arr:number[] = [1,2,3]

        语法2：

let arr:Array<number> = [1,2,3]

        好处：

                1、可以限制变量类型为数组而且可以限制数组成员的类型

                2、编码时不仅可以提示数组的属性和方法而且可以提示成员的属性和方法

        5、联合类型：

let arr:(string | number)[] = ['q','w']
arr.push(1)

        概念：将多个类型合并为一个类型对变量进行注解

        解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

        6、类型别名 - type：

        定义： type 别名 = 类型  别名可用是任意合法的字符串，一般首字母大写

        作用：给类型起别名 ---> 定义了新类型，使其可用复用

        例子：

type ArrType = (number | string) [] 
const arr1:ArrType = [1, '1'] 
const arr2:ArrType = ['a', 'b'] 

        7、函数类型：

               1、函数使用

                概念：函数类型是指给函数添加类型注解，本质上就是给函数的参数和返回值添加类型约束

function add(a:number,b:number) {
    return a + b
}
add(1,2)

 函数参数注解类型之后不但限制了参数的类型还限制了参数为必填

函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求

                2、函数表达式

                函数表达式的类型注解有两种方式：

                       1、 参数和返回值分开注解

const add = (a:number,b:number) :number => {
    return a + b
}
add(1,2) // ok
add('1',2) //报错

                        2、函数整体注解

type Fn = (a:number, b:number) => number  // Fn可用复用
const add: Fn = (a，b) => {
    return a + b
}
const sub: Fn = (a,b) => {
    return a - b
}
add(1,2) // ok
add('1',2) //报错

         8、函数注解-可选参数：

概念：可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确

可选参数就是在参数后面加上一个？号

const add = (a:number,b?:number) :number => {
    return a + b
}
add(1,2) // ok
add(1) // ok

            9、函数无返回值 - void

   在js中，如果没有明确的return，函数的返回值是unmbefined

   在TS中 void和undefined不是一回事：

        undefined在TS中是一种明确的简单类型，如果指定返回值为undefined，那返回值必须是undefined类型

        void：表示没有返回值

function eachArr(arr: number[]): void {
    arr.forEach((item) => {
        console.log(item)
    })
}

         10、interface-接口-基本使用

作用: 用interface来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）

使用格式：interface 接口名 {属性名：类型}

interface Person {
    name:string
    age:number
}

const str: Person = {
    name: 'yzw',
    age: 18
}

一旦注解接口类型之后对象的属性和方法类型都需要满足要求，属性不能多也不能少

场景：在常规业务开发中比较典型的就是前后端数据通信的场景

         11、interface接口的可选设置和继承：

  接口的很多属性是可以进行类型复用的，使用 extends 实现接口继承,实现类型复用

// 正常的商品
interface goodItem {
    id: number;
    name: string;
    price: number;
    imgUrl?: string;
} 

// 打折的商品：正常商品 + newPrice + effectDate
interface  goodItemDiscount {
    id: number;
    name: string;
    price: number;
    imgUrl?: string;
    newPrice: number;
    effectDate: Date 
} 

继承之后：

interface  goodItemDiscount extends goodItem {
    newPrice: number;
    effectDate: Date
} 

// goodItemDiscount （子） goodItem（父）

const a: goodItemDiscount = {
    id:1,
    name:'b',
    price:100,
    newPrice: 88;
    effectDate: new Date()
}