小白ts笔记（一）

引言：ts先编译再执行，在编写代码时即可显示错误。而js在运行时才显示错误。ts不能直接执行，需要先编译成js，也就是下面安装里所介绍的~

一、安装及运行

①npm i -g typescript安包,tsc -v查看ts版本

②新建01.ts文件

③在01.ts文件内正常写代码，终端命令tsc 01.ts生成01.js文件（因为浏览器及Node只认识js代码）

④终端命令node 01.js运行代码

简化代码运行--->npm i -g ts-node安包，写完ts代码，终端ts-node 01.ts运行js代码（内部转换直接运行，不会生成01.js文件）

二、基础类型

1.类型注解（给变量添加类型约束，即变量只能赋予当前类型的值，否则报错）

let num:number=10
let str:string="12"
let content:null=null
let sy:symbol=Symbol()
//等等...

2.数组类型

（1）基本语法（2种语法，推荐第一种）

let arr1:(number)[]=[1,2,3]  //arr1为内部值皆为数值型的数组

let arr2:Array<string>=["1","2"]  //arr2为内部值皆为字符串型的数组

（2）联合类型

let arr:(number|string)[]=["1",2]//内部值可为字符串或数值型的数组

区别于：

let arr:number|string[]=["1"] //arr可以是数值型，也可以是内部值为字符串的数组

（3)类型别名（多个变量使用同一联合类型且类型较为复杂时使用）

type arrName=(number|string)[]
let arr1:arrName=[1,"2"]
let arr2:arrName=[1,"2"]

3.函数类型（即约束函数形参及返回值类型）

（1）函数声明

function fn(num1:number,num2:number):number{
    return num1+num2
}
fn(1,2)

（2)函数表达式

//way①
const fn1=(num1:number,num2:number):number=>{
    return num1+num2
}
//way②
const fn2:(num1:number,num2:number)=>number=(num1,num2)=>{//同时指定形参和返回值类型，只适用于函数表达式
    return num1+num2
}

（3）函数没有返回值时，返回值类型void（ts新增）

使用情况：①函数没有return ②函数有return但没有return 内容 ③函数return undefined

function fn3(num1:number):void{
    console.log("11");
}

（4）函数可选参数--'?'

function fn4(num1:number,num2?:number){//num2为可选参数，可传可不传
    console.log(num1);
}
fn4(1)

注：函数可选参数与参数默认值不要一起使用，优先使用默认值

4.对象类型

(1)基本语法

let obj1:{
    name:string
    age:number
    fn:()=>void
    fn2(num1:number):void
}={
    name:"2",
    age:3,
    fn(){},
    fn2(num1){console.log(num1);
    }
}
obj1.fn2(333)

（2)对象的可选属性

let obj1:{
    name:string
    age?:number
    fn:()=>void
    fn2(num1:number):void
}={
    name:"2",
    fn(){},
    fn2(num1){console.log(num1);
    }
}

（3）对象类型的复用（2种方式）

// ①利用interface关键字声明接口
interface objName1{
    name:string,
    fn:()=>void
}
let obj2:objName1={
    name:"2",
    fn(){},
}
let obj3:objName1={
    name:"3",
    fn(){},
}
// ②type类型别名
type objName2={
    age:string,
    fn:()=>void
}
let obj4:objName2={
    age:"2",
    fn(){},
}
let obj5:objName2={
    age:"3",
    fn(){},
}

*interface与type的区别：interface只能给对象指定类型，type可以给【任意类型】指定类型别名

（4）接口继承--抽离公共的属性和方法，实现复用

type objName2 = {
    age: string,
    fn: () => void
}
interface objName3 extends objName2 {
    haha: string
}
let Obj: objName3 = {
    age: "2",
    haha: "2",
    fn() { }
}

5.元组类型--一种特殊类型的数组

约定了元素的个数，同时指定每个索引对应项的数据类型

let Arr:[number,string]=[1,"2"]