随着前端的发展,js越来越火,但是js有许多不合理或者说不完美的地方
尽管从es5,es6,es7等版本升级能为js完善了不少地方,但是js始终是一个弱类型语言,稍微不注意会出现很多奇怪的bug,于是ts变得越来越重要,越来越受重视了.
ts中的基础类型
//数字number类型
const num: number = 123;
//字符串string类型
const str: string = 'abc';
//数组array类型,2种方式
const arr1: number[] = [1, 2, 3]; //里面的元素只能是数字类型
const arr2: Array<number> = [1, 2, 3]; //和上面一样
//元祖类型tuple 属于数组的一种,可以指定里面的元素为不同类型
const arrT: [number, string] = [123, 'abc'];
//枚举enum
enum Flag {error, success} //error就是0,success就是1
// enum Flag {error = 1, success = 0}//也可以自行指定
let state: Flag = Flag.success; //1
//any类型,其实等于没指定..
let anyType:any = 123; //先是声明为数字
anyType = 'abc'; //然后再声明为abc也不会报错,因为是any
// null和undefined
let numUn:number|null|undefined ;
let a:null = null;//null类型就只能为null
let b:undefined = undefined; //undefined类型就只能为undefined
// void 一般用于定义函数没有返回值
function test():void{ //表示函数没有返回任何类型
return 2 //会报错
}
//never类型,从来不会出现的类型,多数用于总是会抛出异常,或根本不会有返回值的类型
function error(message: string): never {
throw new Error(message);
}
ts中函数的定义
//声明返回值
function test(name: string, age: number): string {
//入参必填name类型为string,必填age类型为number,返回值为string
return `name:${name},age:${age}`
}
//没有返回值
function test2(name: string, age: number): void {
//void代表没有返回值
console.log(name);
console.log(age);
}
//可选参数
function test3(name: string, age?: number): void {
//加个?可以设置为选填,但是如果要填一定要复合声明的类型
//注意点:可选参数不能设置在必填参数前面
console.log(name);
console.log(age);
}
//函数重载,在js中,两个相同名称的函数会被覆盖,ts中可以触发重载
function plus(num: number):number; //输入number,输出number
function plus(num: string):number; //输入string,输入number
function plus(num: any):any{
//上面两个算重载,这个不算,这个是写具体的操作,这个函数只能穿number和string其他会报错
switch (typeof num){
case 'number':
return num+10;
case 'string':
return parseInt(num) + 10;
default:
return NaN;
}
}
console.log(plus(10)); //20
console.log(plus('10')); //20
console.log(plus(true)); //ts会报错
ts中的类
//ts中的类
class Person{
name:string;
constructor(name:string){
this.name = name;
// console.log(this.sayName());
}
sayName():string{
return this.name
}
}
const p = new Person('joy');
p.sayName();
//ts中的类继承
class Child extends Person{
age:number;
constructor(age:number,name:string){
super(name);
this.age = age;
}
sayAge():number{
return this.age
}
}
const c = new Child(12,'ball');
c.sayAge();
c.sayName();
// public :公有都能访问
// protected :保护只能在自身类里面,子类里面可以通过this访问,类外面包括实例都不能访问
// private :只能在类里面访问
// 不加默认为public
ts中的静态方法
//静态方法
class People{
name:string;
constructor(name:string){
// this.name = name;
// console.log(this.sayName());
}
static sayName():string{
//静态方法,实例不能调用,只能通过构造函数调用People.sayName
return this.sex
}
static sex = 'male'; //同样静态属性也一样,只能通过构造函数或静态方法里面获取
}
抽象类
// 抽象类(抽象方法只能出现在抽象类)
// 抽象类感觉就是定个规矩,你继承的子类要遵循这个规矩
abstract class Animal{
//不能实例化 可以用于继承,要求继承的子类必须拥有抽象方法
abstract eat():any; //抽象方法且不能实现,子类继承必须拥有
}
class cat extends Animal{
eat(){
}
}
interface 接口
// interface 接口
// 定义了一个个对象只能有key为name,value为string类型和key为age,value为number类型属性
interface People{
name:string;
age:number
}
//用于对象规定了对象的参数
const p1:People = {
name:'sdsd',
age:23
};
//用于函数规定了入参的类型
function person(people:People){
//定义了接口只能根据People也就是key为name,value为string类型和key为age,value为number
console.log(people.name);
console.log(people.age);
}
//可选属性
interface People2{
//name可以要也可以不要,但是如果传就一定是string
name?:string;
age:number
}
//可以不传
const p2:People2 = {
age:23
};
//用于函数也一样,那么可传可不传
//用于函数规定了入参的类型
function person2(people:People2){
//定义了接口只能根据People也就是key为name,value为string类型和key为age,value为number
console.log(people.name);
console.log(people.age);
}
//另外一种规定函数参数方式
interface Params{
(username:string,password:string,age:number):boolean; //括号里面是入参,后面是返回值
}
interface Params2{
(username:string,password:string,age:number):{username:string,age:number}; //括号里面是入参,后面是返回值
}
const login:Params = (username,password,age) => {
console.log(username);
console.log(password);
console.log(age);
return true
};
const login2:Params2 = (username,password,age) => {
console.log(username);
console.log(password);
console.log(age);
return {username,age}
};
login('ss','sdd',2);
login2('ss','sdd',2);
//也可以定义数组的接口
interface Arr{
[index:number]:number //索引为数字,元素都是数字类型
}
const arr:Arr = [123123,123123,213];
//同数组类似也可用于对象上
interface Obj{
[index:string]:number|string //索引为字符串也就是key,value可以为数字或者字符串
}
const obj:Obj = {
name:'sb',
age:22
};
//对类类型进行约束
interface God{
name:string;
play(name:string):string;
}
class MyGod implements God{
name:'sddd';
constructor(name){
this.name = name;
}
play(name){
return this.name
}
}
interface接口继承
//interface接口继承
interface Animal {
eat(): void
}
interface Person extends Animal {
//接口Person 继承了 Animal
work(): void
}
class People implements Person {
work() {
//根据interface约束了一定要有work
console.log('work');
}
eat() {
//Person 又继承了 Animal所以一定要eat
}
play() {
}
}
class Boy extends People implements Person {
//继承结合接口的约束,因为People引进又了work和eat,所以Boy里面没有也不会报错
}
泛型
//泛型,有时候我们并不知道传入的是什么,但是我们又希望传入传出一致
function getData<T>(value:T):T{
//入参类型是T,出参也是T,
//假如入参是string类型,那么T就是string,出参也是string
return value
}
getData<string>('sdsd'); //T是string类型,出入参都是string
//类的泛型
class MinNum<T>{
list:T[] = [];
add(num:T){
this.list.push(num)
}
min():T{
let minNum:T = this.list[0];
this.list.forEach((item)=>{
if(item<minNum){
minNum = item
}
});
return minNum
}
}
const arr = new MinNum<string>(); //这里可以指定也可以不指定
arr.add('a');
arr.add('b');
arr.add('c');
arr.add('d');
arr.add('e');
console.log(arr.min()); //a
const arr1 = new MinNum<number>(); //这里可以指定也可以不指定
arr1.add(1);
arr1.add(2);
arr1.add(3);
arr1.add(4);
arr1.add(5);
console.log(arr1.min()); //a
//泛型接口
interface config{
<T>(value:T):T //泛型
}
const getData2:config = function (value) {
return value
};
getData2<string>('sdd'); //这里指定了string,入参和出参都只能是string
interface config2<T>{ //也可以放在上面
(value:T):T //泛型
}
const getData3:config2<string> = function (value) { //声明函数的时候声明类型
return value
};
getData3('sdd'); //这里指定了string,入参和出参都只能是string
