TS学习--环境配置+类型

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

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

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

Node.js安装与配置（详细步骤）_nodejs安装及环境配置-CSDN博客

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

（3）编译并运行TS代码

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

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

3.学习内容：类型

        实操代码

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"})