TypeScript基础知识点

TypeScript基础知识点

学习链接，胜洪宇老师的ts教程

TypeScript静态类型

定义：静态类型一旦定义即不可改变，如我们的const，且继承了类型的api

let count : number = 1
//count为数字类型，不能为其他类型，同时count有了number的api，如toFiexd等等

基础静态类型和对象静态类型

基础静态类型 ：加上数据类型

const count : number = 918
const myName : string = 'zhiwei'
//还有 null undefinde boolean void symbol 等等

对象静态类型
对象类型

const pelpeo :{
	name:string,
	age:number
} = {
	name:'zhiwei',
	age:18
}

数组类型

const xiaojiejie: string [] = [‘小姐姐1’, '小姐姐2', '小姐姐3'] 
//代表是数组里面的数据为字符串

class类型

class person{

}
const xxx : person = new person()

函数类型

const xx : () => string = ()=>{ return '字符串'}  
函数返回一个字符串的值

类型注解和类型推断

当我们的ts能够分析我们的类型的时候，我们就不用写类型注解，当不能够分析的时候，就需要写类型注解了
类型注解：
:number 这就是一个注解 冒号加上一个类型就是注解

let count : number
count = 123

类型推断
通过值相加就可以推个总值的类型

这里total不需要给类型注解，因为通过one和two就可以推断出total的类型了
对象中属性的类型

const XiaoJieJie = {
  name: "刘英",
  age: 18,
};

工作使用问题（潜规则）
如果 TS 能够自动分析变量类型， 我们就什么也不需要做了
如果 TS 无法分析变量类型的话， 我们就需要使用类型注解

函数参数和返回类型的注解

函数返回类型的注解

//返回值为number
function getTotal(one: number, two: number): number {
  return one + two;
}

const total = getTotal(1, 2);

//没有返回值 void
function a () : void {
 xxx
}
等等

函数参数注解

//如果传入的为一个对象，刚学的同学可能会这样写
function getPeople({name:string, age:number}){
	xxx
}
这是错误的
正确的写法
function getPeople({name,age} : {name:string, age: number}){
	xxx
}
这里的意思就是一个参数需要一个注解，前面为参数，后面为注解

数组类型的注解

//写法
const numberArr : number[] = [1,2,3]
表示数组里面的每个数据都为number类型的
const stringArr: string[] = ['1','2']
表示数组里面的每个数据都为string类型的
还有undefined的，等等

混合类型
cosnt arr : (number | string)[] = [1,'1']

数组里面有对象的
cosnt person : {name:string, age: number}[] = [
	{
	name:'zhiwei',
	age:18
	}
]

也可以用接口之类的谢在一个地方
interface person {
name : string;
age:number;
}
cosnt person : person[] = [
	{
	name:'zhiwei',
	age:18
	}
]

interface接口

interface Girl {
  name: string;
  age: number;
  bust: number;
}
const girl = {
  name: "大脚",
  age: 18,
  bust: 94,
};
const screenResume = (girl: Girl) => {
  girl.age < 24 && girl.bust >= 90 && console.log(girl.name + "进入面试");
  girl.age > 24 || (girl.bust < 90 && console.log(girl.name + "你被淘汰"));
};
screenResume(girl);

interface和type的区别

interface写成类型对象的 形式
interface a {
	name:string 
}
type可以直接等
type name = string

?的使用

//判断一个类型是否拥有
name? : string  代表name如果有就为string，没有就不用管

允许加入任意值

interface a {
	name:string;
	[propname: string]: any;  //这里表示属性名为string, 属性值为any
	get():string //这里表示get方法，需要返回一个string的数据类型
}

接口的继承

interface a {
	name:string;
	[propname: string]: any;  //这里表示属性名为string, 属性值为any
	get():string //这里表示get方法，需要返回一个string的数据类型
}
interface b extends a {
	age:number   
}
这里b有所有a的类型定义和类型判断，还有自己的age的类型判断

枚举类型

参考"一营长张大喵"博客
enum
创建枚举

enum 枚举名称 {成员1,成员2,...}

创建枚举通过enum关键字创建，关键字后面加上枚举名称，在后面加上花括号，花括号里面放入枚举的成员，枚举成员可以有多个。
枚举名称、成员名称首个字母大写，多个成员之间用逗号隔离。

//家庭枚举：妈妈，爸爸和我
enum Family {Mom,Father，Me}

使用枚举
枚举是一种类型，可以作为变量的类型注解

enum Gender {Female,Male}
let userGender:Gender

访问枚举中的成员，作为变量的值

userGender = Gender.Female
userGender = Gender.Male

注意：枚举中的成员只能访问，不能赋值

Gender.Female = '男'        //错误

枚举的成员是有值的，默认从0开始自增。
我们把枚举成员为数字类型的成为数字枚举。
我们也可以给枚举成员初始化值：

enum Gender {Female = 1,Male}
//这样Female的值就为1,而且Male的值也会随之变化为2

enum Gender {Female = 1,Male = 100}
//Female的值为1
//Male的值为100

枚举成员为字符串的称为字符串枚举
字符串枚举没有自增长的值，所以字符串枚举必须有初始值

enum Gender {Female = '男',Male = '女'}
//Female的值就为男
//Male的值为女