Typesript

Typesript的静态类型

静态类型可以简单的理解为一旦定义了就不能在改变了

定义一个静态类型

const count: number = 1;

这就是最简单的定义一个数字类型的count的变量，这里的: number就是定义了一个静态类型。这样定义后count这个变量在程序中就永远都是数字类型了，不可以改变了

简单的一些数据类型

// 数字型
const num :number = 1
// 字符串型
const str :string = '1'
// 布尔型
const flag:boolean = false

自定义静态类型

用接口的方式可以定义一个静态类型

// 用接口定义xiaojiejie这个类型
interface xiaojiejie {
  uname:string,
  age:number
}
// 定义的对象
let xiaohong :xiaojiejie ={
  uname:'xiaohong',
  age:15
}

注意：

当xiaohong这个变量使用xiaojiejie这个静态类型时候必须拥有uname和age这两属性
这时候你如果声明变量，跟自定义不一样，VSCode直接就会报错。

当你声明的变量比自定义的少得时候也会报错

对象静态类型

最简单的对象类型

const girl: {
  uname: string,
  age: number
} = {
  uname: 'xx',
  age: 22
}

上面这是一个最简单的对象类型，下面讲一下数组怎么定义静态类型.

数组类型

// 数组里元素只能是number类型
let arr1:number[] = [1,2,3] 
// 数组元素可以是number或string
let arr2:(number|string)[] = ['aa',11,22] 
// 数组中元素只能有两个，第一个必须是number类型，第二个必须是string类型
let arr3:[number,string] = [1,'xx'] 
// 可以为任意类型
let arr4:any[]=[1,{a:1},true,null]

数组中对象的定义

let arr:{name:string,age:number}[] = [{name:'zxx',age:22},{name:'xx',age:22}]

这种形式看起来比较麻烦，而且如果有同样类型的数组，写代码也比较麻烦，TypeScript 为我们准备了一个概念，叫做类型别名(type alias)。

type Lady = { name: string, age: Number };

const xiaoJieJies: Lady[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

当然了使用接口(interface)的方式也可以

interface Lady {
  name:string,
  age:number
}
const xiaoJieJies: Lady[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
]

使用类定义也可以

class Madam {
  name: string;
  age: number;
}

const xiaoJieJies: Madam[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

函数类型（定义函数参数和返回值的类型）

函数有返回值时候

// 定义了接受的参数和返回值的数据类型
function fn(a:number,b:number):number{
  return a+b
}
console.log(fn(5,2));

函数没有返回值时候

// 可以给他一个类型注解void，代表没有任何返回值。
function say():void{
  console.log(666);  
}

函数永远也执行不完的时候

如果一个函数永远也执行不完就可以定义返回值为never

// 比如抛出了一个异常，后面的打印永远也执行不到
function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}
// 还有一种就是死循环
function forNever(): never {
  while (true) {}
  console.log("Hello JSPang");
}

函数中有可选参数的时候

// 注意可选参数必须放在最后面，可以有多个
function fn1(a:number,b?:number):void{
  console.log(6666); 
}

函数中接收剩余参数的时候

// 剩余参数可看做数组，使用数组定义静态类型的方式
function fn2(a:number,b:number,...args:number[]):void{
  console.log(args); 
}
fn2(1,2,3,4,5,6) // [3,4,5,6]

函数中参数是对象时候

function fn3({a,b}:{a:number,b:number}):void{
  console.log(a,b);
}
fn3({a:1,b:2})

元组类型

元组可以理解为一个长度，每一项元素类型都确定的数组

const peopleArr: [string, string, number] = ['Dylan', 'male', 23];

接口

定义一个接口可以对对象的值和结构进行检查

interface Config {
  type: string
  url: string
  data?: any // 带有？的为可选的可以为空,any为任意类型
  dataType?: string
}

接口和类型别名的区别:

类型别名可以直接给类型，比如string，而接口必须代表对象

type Girl1 = stirng;

但是接口就不能这样写，它必须代表的是一个对象，也就是说，你初始化girl的时候，必须写出下面的形式.

interface Config {
  type: string
  url: string
  data?: string // 带有？的为可选的可以为空
  dataType?: string
}

接口和类的约束

interface Girl {
  name: string;
  age: number;
  bust: number;
  waistline?: number;
  [propname: string]: any;
  say(): string;
}
class XiaoJieJie implements Girl {
  name = "刘英";
  age = 18;
  bust = 90;
  say() {
    return "欢迎光临 ，红浪漫洗浴！！";
  }
}

接口之间的继承

interface Teacher extends Girl {
  teach(): string;
}

Typesript笔记（一）