「这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战」。
今天初步学习了解了下TS的语法
1.静态类型 也可以通过 interface 的方式自定义一个类型
let one: String = '1';
interface type1 {
name:String,
age:number,
arr?:a[],
}
type a ={
name:string,
age:number
}
let two: type1 = {
name:'haahh',
age:1,
};
2.基础静态类型 和 对象 数组 静态类型 函数类型
let jingtai: number = 1;
let duixiang :{name :string} = {name:'1'};
let shuzu : string [] = ['1','2'];
// 表示 数组中的每一项必须是一个string类型
let hanshu :()=>string = ()=>{return '1'};
// 表示 需要一个方法 方法中必须return出一个string类型
3.类型注解 类型判断
any表示任何类型
function getTotal (one, two ){ return one + two; }
4.函数参数 和 返回类型的注解
function getTotal1 (one:number, two:number ):Number{
return one + two;
//表示函数的返回类型是 number
}
const total = getTotal(1,2);
// void表示 没有返回值
// never 死循环 执行不完的返回值
function number1 ({one}:{one:number}){
return one
}
const number2 = number1({one:1})
// 方法中的对象定义类型 {one}:{one:number};
5.数组类型的注解
let numberArr:number[] = [1,2,3];
let strNumArr:(number | string)[] = [1,'2'];
// type name 类型别名 可以用type来定义一个类型
type Lady = {name:string , age:number};
let objArr:Lady[] = [{name:'小龙',age:20}];
6.元组的使用(不常用)
let yuanzu:[number,string,number] = [1,'2',3] ;
7.接口 interface 的使用
interface leixing {
name:string,
age:number,
sex?:string, //加个问号表示 sex这个key可有可无
[propname:string]:any, //表示我可以添加任意一项 key是string类型 value是任何类型的
}
let leixin1:leixing = {
name:'小龙',
age:18,
};
function leixin2(leixin1){
console.log(`${leixin1.name}今年${leixin1.age}岁了`);
}
// implements属性 用于限制类的类型
class ren implements leixing {
name = '小龙';
age = 18;
}
// extends 用于继承某一个类型
interface teacher extends leixing{
zhiye:string
}
8.类的概念和使用
class nanren {
name = 'xiaolong';
say(){
return `我叫${this.name}`
}
}
// 类的继承
class nuren extends nanren{
sex='女'
};
// 类的重写 super关键字
class nuren1 extends nanren{
name = super.name + '啊'
};
let nanren1 = new nanren();
console.log(nanren1.say())
// 类的访问类型
class Pessom {
public name:string; //内外都可以使用
private age = 18; //表示私有类只可以在类的里边使用 也不允许继承里边使用的
protected sex(){ //不可以在类的外部使用 可以在继承的类里边调用
return 'nan';
}
}
let Pessom1 = new Pessom();
Pessom1.name = 'xiaolong' //表示类的外边使用
// 类的构造函数
class ren2{
// name:string;
// constructor(name:string){ //constructor表示构造函数 需要在new的时候传个参数
// this.name = name;
// }
constructor(public name:string){}; //等同于上侧代码
}
let ren2class = new ren2("xiaolong")
// 子类继承父类里边的构造函数
class teacher1 extends ren2{
constructor(public age:number){
super('xiaolong') //子类继承父类的构造函数需要用 super('name')
}
}
// 类的Get Set 类里边定义的私有key可以在外边访问
class renmen{
constructor(private _age:number){}
get age(){
return this._age //可以在里边进行操作
}
set age (age:number){
this._age = age //可以在里边进行操作不用return
}
}
// 类的静态类 static 可以不用new直接在外边输出
class renmen1 {
static name1:string = 'xiaolong'
}
console.log(renmen1.name1);
//类的只读属性 readonly 表示类里边的属性只可以赋值一次
class renmen2 {
readonly name:string;
constructor(name:string){
this.name = name;
}
}
let ren5 = new renmen2('小龙');
// ren5.name = 'hahah' 再赋值的时候就会报错
// 抽象类 abstract
abstract class chouxian{
abstract ren();
//因为是抽象类所以里边不用写任何方法,但是在子类继承的时候 需要写ren这个方法
}
class zichouxian extends chouxian{
ren(){
console.log('你是个人')
}
}
9.联合类型和类型保护
interface lianhe1{
sex:string
}
interface lianhe2{
age:number
}
function lianhe(data:lianhe1 | lianhe2){ //这个便是联合类型
// 类型保护便是里边的判断方法
}
10.Enum枚举类型 数据中的下标是从0开始的
enum data{
diyibu, //如果想要改变里边的默认下标需要 dayibu = 1,之后的下标依次类推
dierbu,
disanbu
}
console.log(data.diyibu) //0
11.泛型 一般用T来表示
function fangfa<fanxing>(one:fanxing , two:fanxing){
return `${one}${two}`
}
fangfa<number>(1,2);
// 调用的时候 number === fanxiang
function fanxingArr<T>(params:T[]){
console.log(params)
};
fanxingArr<string>(['1']); //调用的时候传string就是数组中的每一项必须是string类型的
// 类中使用泛型 泛型也可以继承
interface one1{
name:string
}
class leifanxing<T extends one1> { //泛型T继承于one1所以给girls传值的时候只能传one1类型的参数
constructor (private girls:T[]){};
getGirls(index:number):string{
return this.girls[index].name
}
}
const girlsArr = new leifanxing([{name:'xiaolong'},{name:'xiaohong'}]);
girlsArr.getGirls(1);
12.ts的命名空间 模块化
namespace home{
class one{
}
class two{
}
class three{
}
export class big{
constructor(){
new one();
new two();
new three()
}
}
}
// 变成home中私有的类 不会全局污染