TS学习第一阶段

一.环境配置+类型

1.TS是什么？和JS有什么区别？优势是什么？

2.TS需要先编译成JS再运行

(1)安装node.js -->npm安装工具

https://blog.csdn.net/qq_42006801/article/details/124830995?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172036121316800180625084%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=172036121316800180625084&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~top_positive~default-1-124830995-null-null.nonecase&utm_term=node.js安装步骤&spm=1018.2226.3001.4450

(2)安装编译TS的工具包

（3）编译并运行TS代码

1）创建ts文件–>编译ts为js–>执行js

2) 使用ts-node包，直接在Node.js中执行TS代码

实操

console.log('Hello ts')


//类型注解
let age:number=18  //number就是类型注解：为变量添加类型约束

//类型推论
//声明变量并立即初始化值，此时，可以省略类型注解
let age1 = 18
age1=5
//如果声明变量但没有立即初始化值，此时，必须手动添加类型注解
let a:number
a=19



//********************************************************** */

//数组类型
let numbers:number[] =[1,3,5]
    //let numbers1:Array<number> = [1,3,5]

let b:boolean[]=[true,false]

//********************************************************** */

//联合类型：
//添加小括号，表示数组中既有number类型，又有string类型
let arr:(number|string)[]=[1,3,5,'a','b']

//不添加小括号，表示既可以是number类型，又可以是string类型
let arr1: number | string[] = 123
let arr2: number | string[] = ['a','b','c']

//********************************************************** */

//类型别名 type  同一复杂类型被多次使用
type CustomArray =(number|string)[]
let arr3: CustomArray=[1,3,5,'a','b']

//********************************************************** */

//函数类型：参数和返回值的类型
//1.单独指定参数、返回值的类型
function add(num1:number,num2:number):number{
    return num1+num2
}
console.log(add(1,3))
//省略函数返回值的类型，但参数类型不可省
function add5(num1: number, num2: number){
    return num1 + num2
}


const add1 =(num1:number,num2:number):number=>{
    return num1+num2
}
console.log(add1(1, 4))
//2.同时指定参数、返回值的类型
const add2:(num1:number,num2:number)=>number =(num1,num2)=>{
    return num1+num2
}

//void类型：没有返回值
function greet(name:string):void{
    console.log('hello',name)
}

greet('jack')

//可选参数
function mySlice(start?:number,end?:number):void{
    console.log('起始索引：',start,'结束索引：',end)
}
//可选参数只能出现在参数列表的最后
// function mySlice1(start?: number, end: number): void {
//     console.log('起始索引：', start, '结束索引：', end)
// }
function mySlice2(start: number, end?: number): void {
    console.log('起始索引：', start, '结束索引：', end)
}


mySlice()
mySlice(undefined,undefined)

mySlice(1)
mySlice(1,undefined)

mySlice(undefined,3)

mySlice(1,3)


//********************************************************** */

//对象类型
let person:{name:string;age:number;sayHi():void;greet(name:string):void}={
    name:'刘老师',
    age:18,
    sayHi() {},
    greet(name) {}

}

//分号由换行替代
let person1: { 
    name: string
    age: number
    //sayHi(): void
    sayHi:()=>void //箭头函数
    greet(name: string): void 
} = {
    name: '刘老师',
    age: 18,
    sayHi() { },
    greet(name) { }

}

//对象可选属性:对象的属性或方法，也是可以可选的
function myAxios(config:{url:string;method?:string}){}
myAxios({url:"111"})

二、接口+接口继承

1.接口

####### 实操

let person: { name: string; age: number; sayHi(): void} = {
    name: '刘老师',
    age: 18,
    sayHi() { }
}
//重复的结构又写一次
let person1: { name: string; age: number; sayHi(): void } = {
    name: '刘老师',
    age: 18,
    sayHi() { }
}

2.接口与类型别名的对比

//使用接口:只能为对象指定类型
interface IPerson{
    name: string
    age: number
    sayHi(): void
}

let person3: IPerson = {
    name: '刘老师',
    age: 18,
    sayHi() { }
}
let person4: IPerson = {
    name: 'llaa',
    age: 22,
    sayHi() { }
}

//使用类型别名：相当于在声明变量--不仅可以为对象指定类型，实际上可以为任意类型指定别名
type IPerson1= {
    name: string
    age: number
    sayHi(): void
}

let person5: IPerson = {
    name: '刘老师',
    age: 18,
    sayHi() { }
}

type NumStr = number|string

3.接口继承

//接口继承：两个接口之间有相同的属性或方法，将公共的属性或方法抽离出来,通过继承来实现复用
interface Point2D{x:number;y:number}
//interface Point3D { x: number; y: number;z:number}

interface Point3D extends Point2D{
    z:number
}

let p3:Point3D={
    x:1,
    y:0,
    z:0
}

三、元组

//数组：可以出现任意多个数字
let position:number[]=[39,114,1,3,4]

//元组:确切地知道包含多少个元素，以及特定索引对应的类型
let position1:[number,number]=[25,36]

四、字面量类型+枚举类型

1.字面量类型

//字面量类型配合联合类型一起使用：...。。适合：有一组明确的可选值
//某个特定的字符串也可以作为类型
//贪吃蛇：只能是上下左右中任意一个
function changeDirection(direction:'up'|'down'|'left'|'right'){
    console.log(direction)
}

changeDirection('down')

2.枚举

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

function changeDirection1(direction:Direction){
    console.log(direction)
}
changeDirection1(Direction.Up)

//枚举成员的值：默认增长
enum Direction1 {
    Up=1,    //数字枚举：默认：0123   
    Down,  //up=10，则10 11 12 13
    Left,
    Right
}

//字符串枚举
enum Direction2 {
    Up1 = '1',   //必须有初始值
    Down1='2',
    Left11='3',
    Right1='4'
}

//枚举类型：不仅被用作类型，还提供值
console.log(Direction1)
console.log(Direction2)

如果想在ts中表示一组可选值，可以选以上两种方法：推荐第一种