TS学习(尚硅谷总结)

1.TS的类型声明

//声明一个变量a,同时指定它的类型number
let a: number;
//a的类型设置为number,再以后的使用过程中a的值只能是数字、
a = 18;
a = 33;
a = 'hello';//代码报错,a的类型是number,不能赋值字符串

//声明变量直接进行赋值
let c:boolean = false;
//如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测
let c = false;

//JS中的函数是不考虑参数的类型和个数的
function sum(a,b){
return a + b;
}

//TS可以在参数后面添加类型,也可以在函数后面加类型来设定返回值的类型
function sum(a: number,b: number): number{
return a + b;
}

sum(123,456);
//也可以直接使用字面量进行类型声明
let a:10;
a = 10;
//可以使用 | 来连接多个类型(联合类型) 
let b: boolean | string;
c = true;

//any 表示的是任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测(尽量别用 用unknown)
let d: any;
d = 10;
d = false;
//声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any

//unknown 表示未知类型的值
let e: unknown;
e = 10;
e = "hello";

let s:string;

//d的类型是any,它可以赋值给任意变量
s = d;

e = 'hhh';
//unknown 实际上就是一个类型安全的any
//unknown类型的变量,不能直接赋值给其他变量


//类型断言,可以用来告诉解析器变量得实际类型
/*
语法:
    变量 as 类型
    <类型>变量
*/
s = e as string;
s = e;

//指定返回值类型
function fn(): boolean{
    return true;
}
function fn(): boolean | string{
    return true;
}
//void用来表示空,以函数为例,就表示没有返回值得函数
function fn(): void{
   }
//never 表示永远不会返回结果
function fn(): never{
    throw new Error('报错了!');
}
//object表示一个js对象
let a: object;
a = {};

//{}用来指定对象中可以包含哪些属性
//语法:{属性名:属性值,属性名:属性值}
//在属性名后边加上一个?表示属性是可选的,有没有都可以
let b: {name:string,age?:number};
b = {name:'111',age:10};

//[propName:string]: any 表示任意类型的属性
let c:{name:string,[propName:string]:any};
c = {name:'111',a:1,b:2};

/*
设置函数结构的类型声明
    语法:(形参:类型,形参:类型...)=>返回值

*/
let d:(a:number,b:number)=>number;

/*
数组的类型声明
    类型[]
    Array<类型>
*/
//string[]表示字符串数组
let e: string[];
e=['a','b'];
//number[]表示数值数组
let f: number[];
let g:Array;
g[1,2,3];

/*
元组,元组就是固定长度的数组
*/
let h:[string,string];

/*
enum 枚举
*/
enum Gender{
    Male,
    Female
}
let i:{name:string,gender:Gender};
i = {
    name:'孙悟空',
    gender:Gender.Male//'male'
}

//&表示同时
let j: {name:string}&{age:number};
j={name:'111',age:10};

//类型的别名 myType就相当于后面那一长串,可以直接赋值使用
type myType = 1|2|3|4|5;
let k:1|2|3|4|5;
let l:myType;

2.面向对象


简言之:就是程序之中所有的操作都是通过对象来完成的。
举例:
        操作浏览器要使用window对象
        操作网页要使用document对象
        操作控制台要使用console对象
在程序中所有的对象被分成了两个部分:数据和功能
数据在对象之中被称为属性
功能在对象之中被称为方法
所以在程序中,一切皆是对象
(对比人的例子: 姓名,年龄等信息就属于数据;吃饭,睡觉等动作就属于功能)
1.类(class)
类就像是对象的模型,程序中根据类创建指定类型的对象。
定义类:
    class 类名{
        属性名:类型;
        constructor(参数:类型){
                                  
        }
    }

使用class关键字来定义一个类,
对象中包含了两个部分:  属性   方法
/*
class Person{
//定义属性
name:string = '金闪闪';
//在属性前使用static关键字可以定义类属性(静态属性)
static age:number = 15
//定义方法
//如果方法以static开头则方法就是类方法,可以直接通过类去调用
sayHello(){
    console.log("hello")
}
}


const per = new Person();
console.log(per.sayHello);
console.log(per); //Person{name:"金闪闪",age:"15"}
//静态属性只能通过类去展示
console.log(Person.age)


*/

直接定义的属性是实例属性,需要通过对象的实例去访问:const per = new Person()   per.name 
使用static开头的属性是静态属性(类属性),可以直接通过类去访问: Person.age
使用readonly表示一个只读的属性,不可更改
可以一起使用   static  readonly age: number = 15

3.继承简介

Dog extends Animal
--此时,Animal被称为父类,Dog被称为子类
--使用继承后,子类将会拥有父类所有的方法和属性
--通过继承可以将多个类中共有的代码写在一个父类中,
    这样只需要写一次即可让所有子类都同时拥有父类中的属性和方法
    如果希望在子类中添加一些父类中没有的属性或者方法,可以直接在子类添加
    如果在子类中添加了和父类相同的方法,子类方法会覆盖掉继承过来的父类的方法



/*
class Animal{
name:string;
age:number;
constructor(name:string,age:number){
    this.name = name;
    this.age = age;
}
sayHello(){
    console.log("hello")
}
}



class Dog extends Animal{
run(){
console.log('$(this.name)在跑')
}
sayHello(){
    console.log("11111")
}
}
*/

你可能感兴趣的:(typescript,javascript,前端)