网站图片类型,北京免费网站建设,做jsp网站的步骤,网站备案账号是什么情况最近在学 ts 顺便记录一下自己的学习进度#xff0c;以及一些知识点的记录#xff0c;可能不会太详细#xff0c;主要是用来巩固和复习的#xff0c;会持续更新
前言
想法
首先我自己想说一下自己在学ts之前#xff0c;对ts的一个想法和印象#xff0c;在我学习之前以及一些知识点的记录可能不会太详细主要是用来巩固和复习的会持续更新
前言
想法
首先我自己想说一下自己在学ts之前对ts的一个想法和印象在我学习之前包括前期的学习中我还是认为给变量定义类型我真的觉得有点繁琐例如 ts中的元组
let tupleArray: [number, string] [123, hello]将一个数组定义成一个只包含一个数字和一个字符串的数组顺序不能乱个数不能多也不能少而且类型也要一一对应对于习惯js灵活性的我来说有点不能接受甚至是不能理解包括ts中的接口给变量定义了这么多条条框框我觉得缺少灵活性在目前的我看来有点繁琐
这也是我想学下去的原因我不明白为什么网上这么多人拥抱了ts用完都说好大家一致的好评却给我一种人云亦云的感觉所以我决定自己一探究竟我看看是不是真的好
优势
说一下我在了解ts时听说到它的优势目前只是据说在我自己没觉得它是之前我都保持怀疑我会持续验证 在接受一个新项目的时候有些字段和函数看不懂什么意思可能牵扯的很多要搞清来龙去脉要console.log可能还要问之前的人这个字段什么意思这个函数是什么作用要运行起来才能知道现在ts就可以直接解决这个问题
正式开始
1.搭建typescript开发环境
npm install -g typescript nvm install v14.15.1 //使用nvm 下载node 和切换 node版本
切换用use注意node的版本 不然会报错
tsc -v查看ts版本
编译ts文件
Tsc main.ts输入这个命令就会生成一个 main.js 文件 里面就是转译后的 js语言
2.数组和元组
//数组
let arr: number[] [1, 2, 3, ] //数字类型数组//元组
let tupleArray: [number, string] [123, jth]给一个数组定义类型例如number数组那么这个数组里的值就只能是number
元组的官方定义元组类型允许表示一个已知元素数量和类型的数组各元素的类型不必相同。 比如你可以定义一对值分别为string和number类型的元组。
与此同时元组不可以跟类型描述不一致包括个数顺序以及类型
3.函数
let add (x: number, y: number, z?: number): number {if (typeof z number) {return x y z} else {return x y}
}let result add(1, 2)let add2: (x: number, y: number, z?: number) number add
//定义函数的参数数量和类型如果需要可选参数和interface一样
//可选参数后面不能再定义确定参数//如果想将add这个函数赋值给一个变量必须赋值给一个一样的函数类型
// 冒号: 后面都是对此变量类型的定义//例如 add2: (x: number, y: number, z?: number)
//这步结束后对函数的参数做了类型的定义但函数返回值的类型还没定义
//如果需要对函数返回值进行定义 就不可以写成 : 这种形式而是ts中的另一个方法
// 是申明函数类型返回值的方法 不是es6 中的箭头函数//如何用interface 描述函数类型
//上面我们直接写了函数类型 (x: number, y: number, z?: number) number
//interface 描述函数类型和直接写有所区别interface ISum {(x: number, y: number, z?: number): number
}
//interface 描述函数类型时 返回值的类型申明不是用 而是 : let add3: ISum add4.类
//类 公有 私有 受保护
class Test {private age: number 11;name: string;constructor(name) {this.name name}
}
let ads new Test(hello)
// console.log(ads.age) //此时的age 为 private属性 不可在类外访问 如果为 protected也一样不能在类外访问
// console.log(ads)
//ts中默认类的所有属性都是 public公有
class Animal {private name: string;constructor(name) {this.name name}show() {console.log(my name is ${this.name})}
}class Snake extends Animal {dep: stringconstructor(name, dep) {super(name)this.dep dep}show() {// console.log(my name is ${this.name} and work in ${this.dep}) 属性“name”为私有属性只能在类“Animal”中访问super.show()//如果在类型中添加私有private属性则不可以在 类 外使用包括派生类子类//但可以在申明私有属性的类型内访问}
}let snake new Snake(jth, ali)
snake.show()class Animal2 {protected name: string;constructor(name) {this.name name}protected show() {console.log(my name is ${this.name})}
}class Snake2 extends Animal2 {dep: stringconstructor(name, dep) {super(name)this.dep dep}show() {console.log(my name is ${this.name} and work in ${this.dep})super.show()//如果在类型中添加受保护private属性则不可以在类型外使用//但可以在申明私有属性的类型内访问也可以在派生类中访问}
}let snake2 new Snake2(jth, ali)
snake.show()//只读属性
class User {readonly name: string;readonly num: number 8constructor(name) {this.name name}
}let dada new User(cfh)
// dada.name cfh2// 如果属性是readonly只可以在申明时或构造函数中被初始化
//不可以进行二次赋值
console.log(dada)//参数属性 声明并初始化一个成员 constructor(public name: string) {}
//传统写法 constructor(theName) {this.name theName}
class Jth1 {public name: string;constructor(name) {this.name name}show() {console.log(my name is ${this.name})}//在普通的类型中 我们需要申明一个name属性并给name属性赋值
}
let nameClass new Jth1(jjtthh)
nameClass.show()class Jth {constructor(public name: string) { }show() {console.log(my name is ${this.name})}//但参数属性可以帮我们将声明属性和初始化合并到一起//写法 为 public name: string//同样的 private 和 protected 一样
}
let jjj new Jth(cjh)
jjj.show()
5.接口 interface
//接口
interface Person {readonly id: number;name: string;age?: number; // 此时age属性可有可无
}let obj: Person {name: jth,age: 12,id: 1
}//接口用来限制对象的形状接口定义的形状是什么样对象就得什么样
//变量不可以多也不可以少
//如果希望某个变量可有可无可以在接口的属性后面 ?
//如果希望某个属性只可读不能被赋值 可使用readonly
//obj.id 2 这个时候就会报错 id属性只可读//接口也可以描述 类类型
//TypeScript也能够用它来明确的强制一个类去符合某种契约。
//描述的类必须实现和接口中一致的属性或者方法 所以文档中的定义是强制一个类去符合某种契约
//关键字 implementsinterface Radio {switchRadio(trigger: boolean): void;
}interface Battery {checkBatteryStatus(): void;
}//接口的继承
//接口也可以继承 关键字和类继承一样 extends
interface BatteryWithRadio extends Radio {checkBatteryStatus(): void;
}class CellPhone implements Radio, Battery {switchRadio(trigger: boolean) {}checkBatteryStatus() { }
}class CellPhone2 implements BatteryWithRadio {switchRadio(trigger: boolean) {}checkBatteryStatus() { }//implements 之后就可以接继承的 接口
}class Car implements Radio {switchRadio(trigger: boolean) {}
}
