ts 基础

TypeScript

介绍

1. TypeScript是什么？
   ts是js的超集，typeScript=type+script(为js添加了类型)

2. 为什么要有TypeScript？
   1> 在编译期间就可以发现错误
   2>提高开发体验，有代码提示
   3>强大类型系统，提高代码可维护性
   4>支持最新的ES特性
   5>面向对象
   6>各大框架的加持

3. TypeScript可以在浏览器直接运行吗？
   1> 安装:npm i -g typescript
   2>通过:tsc xxx.ts 编译为js文件运行

常用类型
1>类型注解
语法：变量:type(类型)

let age:number=18

作用：为变量添加类型约束
2>原始类型
1.Js已有类型
1.原始类型: number/string/boolean/null/undefined/symbol
2.对象类型:object(包括:数组，对象，函数等对象)
2.ts新增类型
联合类型，自定义类型(类型别名)，接口，元组，字面量类型，枚举，void，any等

let age:number=18
let myName:string='lei'
let isLoading:boolean=false
let nullValue:null=null
let undefinedValue:undefined=undefind
let fn:object=()=>

//特点：symbol()创建的值是唯一的
//作用：可以作为对象属性的键，防止与对象中其他键冲突
let uniqKey:symbol=Symbol()

let obj={
a:'123',
[uniqKey]:100,
}

//取值
console.log(obj[uniqKey])

3>数组类型
type[] 说明：type指数组中每项的类型
Array

//写法一：推荐
let numbers:number[]=[1,3,8]
//写法二
let strings:Array<string>=['a','b','c']

4>联合类型
type1 | type2 |…
说明：竖线分割多个类型

//此处（）的目的是为了将提升优先级，表示：number类型的数组或string 类型的数组
let arr:(number| string)[]=[1,'a',3,'b']

5>类型别名(自定义类型)
场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

type peng=number | string
let my:peng='1'

6>函数类型
1.函数的类型实际上指的是：函数参数和返回值的类型
2.可选参数 参数?:type 说明:参数可以传也可以不传

//函数声明
function add(num1:number,num2:number):number{
return num1+num2
}
//箭头函数
const add=(num1:number,num2:number):number=>{
return num1+num2
}

7>对象类型
1.描述对象的结构

//空对象
let person:{}={}

//有属性的对象
let person:{name:string}={
name:'lei'
}

//既有属性又有方法的对象
//在一行代码中指定对象的多个属性类型时，使用`;`(分号)来分隔
let person:{name:string;sayHi(name:string):void}=>{
name:'jack',
sayHi(name){}
}

//对象中如果有多个类型，可以换行写：
//通过换行来分割多个属性类型，可以去掉`;`
let person:{
name:string
sayHi():void
}={
name:'jack',
sayHi(){}
}

2.使用类型别名

//创建类型别名
type Person={
name:string
sayHi():void
}
//使用类型别名作为对象的类型
let person:Person={
name:'jack',
sayHi(){}
}

3.对象类型属性可选

type Config={
url:string
method?:string
}
function myAxios(config:Config){
console.log(config)
}

8>对象类型-接口
1.使用interface 关键字来声明接口

interface Iperson{
name:string
age:19,
sayHi(){}
}

2.接口继承

interface Point2D { x:number;y:number}
//继承 Point2D 
interface Point3D extends Point2D{
Z:number
}
//继承后Point3D 的结构 {x:number;y:number；Z:number}

9>元组类型(元组类型可以确切地标记出有多少个元素，以及每个元素的类型)

//该示例中，元素中有两个元素，每个元素的类型是 number
let position:[number,number]=[1116,39]