TypeScript 基础讲解

类型注释

/**
 * 类型注释:变量添加类型约束
 *   let 变量名：类型 = 初始值
 */
let age:number = 18;
age = 123;

TS 类型

/**
 * ts类型：
 *    原始类型：number/string/boolean/null/undefined/symbol
 *    对象类型：object(数组、对象、函数)
 * 新增ts类型：
 *    联合类型
 *    自定义类型
 *    接口
 *    元组
 *    字面量类型
 *    枚举
 *    void
 *    any
 */

let num:number = 18; //数值类型
let myName:string = "张三";//字符串类型
let isLoading:boolean = true;//布尔类型
let un:undefined = undefined;//undefined
let timer:null = null;//null
let sym:symbol = Symbol();

TS类型推论机制

/**
 * TS 的类型推论机制会自动提供类型
 * 如下  a默认为number类型
 *       add 默认为number类型
 */

let a = 1;

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

联合类型

/**
 * 联合类型：当一个值既可以是number类型 也有可能为null时，则需要一个新类型
 *         （变量可以为null或者number类型）
 */
let unite:number|null = null;
    unite = 2;

类型别名

/**
 * 类型别名：当定义的类型名很长的时候，就可以定义别名，方便书写（首字母大写！！--NewType)
 * 作用：
 *   1.给定义起别名
 *   2.定义了新类型
 */
type StringNumber = string | number;
let myColor:StringNumber = "red";
myColor = 124;

数组类型

/**
 * 数组类型
 *   写法1：let num:类型[]= [值1,...]
 *   写法2：let num:Array<类型> = [值1,...];
 * 
 */
//写法1
let numbers:number[] = [1,2,3,4];
//写法2
let strings:Array<string> = ['1','2','3'];

函数

/**
 * 函数
 *   函数类型：函数参数类型、返回值类型
 * 普通函数：function 函数名(形参1：类型 = 默认值，形参2：类型 = 默认值，形参3：类型 = 默认值)：返回值类型{}
 * 箭头函数：function 函数名(形参1：类型 = 默认值，形参2：类型 = 默认值，形参3：类型 = 默认值)：返回值类型=>{}
 * 
 * 统一定义函数格式：当函数的类型一致时，写多个就会显得代码冗余，所以需要统一定义函数的格式
 * 
 * 如果没有返回值类型，应该用void
 *   情况一：函数没写return
 *   情况二：只写了return,没有具体的返回值
 *   情况三：return 返回的是undefined
 * 
 * 函数可选参数:参数可传可不传 ！！必选参数不能跟在可选参数后面
 *      fucntion slice(a?:number,b?number)
 * 
 */
//普通函数
function add1(num1: number, num2: number): number {
    return num1 + num2
  }
//箭头函数
const add2 = (a: number =100, b: number = 100): number =>{
    return a + b
  }
//统一定义一个函数类型
type Fn =  (n1:number,n2:number) => number ;
const add3 : Fn = (a,b)=>{return a+b }

//============================返回值为void============
//返回值为void
function greet(name:string= "1234"):void{
 console.log("hello",name);
}
// 如果什么都不写，此时，add 函数的返回值类型为： void
const add4 = () => {}

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

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

// 必选参数不能跟在可选参数后面 不可这样写！！。
// function mySlice(start?:number,end:number){}

对象类型

/**
 * 对象类型
 *   const 对象名 = {
 *       属性名1：类型1,
 *       属性名2?：类型2，
 *       方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
 *       方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型
*    } = { 属性名1: 值1，属性名2：值2  }
 */
//创建类型别名
type Person = {
    name:string,
    age:number,
    sayHi():void
}
//使用类型别名作为对象的类型
let person:Person={
    name:"xiaohua",
    age:18,
    sayHi(){}
}

接口

/**
 * 接口：当一个对象类型被多次使用时，有如下两种方式来来描述对象的类型，以达到复用的目的：
 *   1.类型别名：type
 *   2.接口：interface
 * 语法：interface 接口名{属性1:类型1，属性2:类型2，属性3:类型3}
 * 
 * 
 * type与interface的区别
 *  - 相同点：都可以给对象指定类型
 *  - 不同点：
 *     - 接口：只能为对象指定类型，【可以继承】
 *     - 类型别名：不仅可以对对象指定类型，还可以对【任意类型】指定别名
 * 先有的interface,后有的type，推荐使用type
 * 
 * 接口继承
 *     如果两个接口之间有相同的属性或方法，可以将【公共的属性或方法抽离出来，通过继承来实现复用】
 * interface 接口2 extends 接口1{
 *   属性1：类型1  //接口2中特有的类型
 *  }
 */
//使用interface声明接口
interface IGoodItem{
    name:string,
    age:number,
    func:()=>string,
    func1():string
}
//使用接口名称作为变量类型
const good1:IGoodItem = {
    name:"小花",
    age:18,
    func:function(){
        return "123"
    },
    func1:()=>{
        return "124"
    }
}

//=============接口继承=============
interface a {
    x:number,
    y:number
}
// 使用 extends(继承)关键字实现了接口
interface b extends a {
    z:number
}
//b继承了a,那就说明b拥有了a的全部属性与方法

元组

/**不懂；
 * 元组：是一种特殊的数组，特殊之处在与以下两点
 *     - 它约定了元素个数
 *     - 它约定了特定索引对应的数据类型
 * 
 */
 function useState(n: number): [number, (number)=>void] {
    const setN = (n1) => {
        n = n1
    }
    return [n, setN]
}

const [num1 ,setNum] = useState(10)

枚举类型

字面量类型

/**
 * 字面量类型
 * 作用：常常用于配合联合类型一起使用的
 * 
 */
//str1,是一个变量，他的值可以是任意字符，所以类型为string
//str2是常量，他的值不能变化，只能是"Hello TS",所以他的类型为"Hello TS"，
// 那此处的"Hello TS"就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型
let str1:string ="hello";
const str2 ="Hello TS";
//配合联合类型
type Gender = 'girl' | 'boy'
// 声明一个类型，他的值 是 'girl' 或者是 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
// let g3: Gender = 'man' // 错误

/**
 * 枚举：类似于【字面量类型+联合类型】，来描述一个值
 *    enum 枚举名{可取值1，可取值2...}
 *   使用方式：枚举名.可取值1
 * 注意：
 *   1.一般枚举名称以大写字母开头
 *   2.枚举中的多个值以逗号，分割
 *   3.定义好枚举后，直接使用枚举名称作为类型注解
 * 
 * 枚举类型分为：数值枚举和字符串枚举
 *            - 数值枚举：默认是从0开始自增的数值，也可以给枚举中的成员初始化值 
 */
enum Eunm1 {up,down,left,right};
Eunm1.up;

// 数值枚举 自定义初始值
enum Direction1 { Up = 10, Down, Left, Right };// Down -> 11、Left -> 12、Right -> 13
enum Direction2 { Up = 2, Down = 3, Left = 8, Right = 16 }

// 字符串枚举（每个成员必须有初始值）
enum Direction {
    Up = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    Right = 'RIGHT'
  }

any

/**
 * any:任意的，取消类型的限制
 * 使用场景:
 *     - 函数
 *     - 来“避免”书写很长、很复杂的类型
 *     - 声明变量不提供类型也不提供默认值
 *     - 定义函数时，参数不给类型
 * 
 */

never