typescript学习之基础知识篇
1.用ts的好处:编写阶段就可以报出一些低级错误
2.变量声明:
// var 不建议使用,因为变量提升 let变量 const常量
let fo:string = 'bar';
fo = 'ba';
const count=0;
// count=10;常量不允许重新赋值
3.基本数据类型:
//布尔值
let isDone:boolean=true;
//数字
let num:number=10;
//字符串 也支持模板字符串 支持换行 支持内嵌表达式
let fu:string='jack';
let users:{
name:string,
age:number
}={
name:"jack",
age:12
}
let a:string=`大家好,我叫:$(users.name),我今年$(users.age)岁了`
//数组有两种书写方式:
// 第一种:Array<类型名>
let arr:Array<number>=[1,2,3];
arr.push(4);
console.log(arr);
// 第二种:类型名[]
let arr1:number[]=[1,2,3];
let arr2:string[]=['a','b'];
// 元组允许表示一个已知元素数量和类型的数组,各元素的类型不必相同,可认为混合;左边写了什么样右边要严格一致,(顺序+数量)
let arr3:[string,number]=["hello",1]
// object 允许赋任意值,但是不能调用任意方法,即使她真的有.少用,没有提示
let b:object={
name:"rose",
age:12
}
// 写对象的时候可以这样写
// 使用一次对象这样写
let c:{
name:string,
age:number
}={
name:"ja",
age:34
}
// 多次使用就可以这样
interface Person{
name:string,
age:number,
// fs:string[]使用的时候:顺序可以不同,但是里面的属性必须严格一致(不能多不能少)
}
let zys:Person={
age:45,
name:'le'
}
// any 任何类型 用在改类型的情况 不确定的情况下可以是使用,尽量少用
let num1:any=10;
num1="jd";
// let re :string=(num1 as string).+字符串的方法,只写等号右边的是得不到你想要的字符串方法的
let re :string=(num1 as string).substr(1);
// 类型除了可以用于变量声明后,还可以用在函数的形参 花括号前的number是返回值的类型
function add(x:number,y:number):number{
return x+y;
}
var ret:number=add(10,20);
//Void 表示没有任何类型。通常用在没有返回值的函数中,也没啥用,因为你只能给它赋值为undefined null
function fn():void{
console.log("111")
}
//null undefined 和void相似,用处不大;默认他们是所有类型的子类型,也就是说可以把null undefined赋值给number类型的变量
let u:undefined=undefined;
let n:null=null;
4.解构赋值:
//数组解构 按照顺序解构
let arr4:number[]=[0,1]
let [num0,num2]=arr4;
//对象解构 按照属性名解构
let us={
name:"jack",
age:45
}
//在浏览器环境中,window对象本身就有一个成员name
// let {name,age}=us
//属性解构赋值
let {name:nickname,age}=us;
//参数的解构赋值
function add1([x,y]){
return x+y
}
add1([10,2])
5.剩余参数:
// 剩余参数 args随意起名字 剩余参数解构到args数组中,
function sub(...args:number[]):number{
let res=0;
args.forEach(function(item){
res+=item
})
return res;
}
sub(1,2,3)
// 数组展开操作符
let arr01=[1,2,3]
let arr02=[4,5,6,...arr01]// 等同于[4,5,6].concat(arr01)
let arr03=[...arr01,...arr02]
// 对象展开操作符
let obj01={
fos:'bf'
}
let obj02={
...obj01,//一般用于对象拷贝,混入
name:"ff"
}
6.类:
// 类就是构造函数的另一种书写方式
function Person(name:string,age:number){
this.name=name;
this.age=age
}
Person.prototype.sayHello=function():void{
console.log(this.name,this.age)
}
let p1=new Person('jack',12)
p1.sayHello()
class Person1{
//定义且确定类型
name:string;
age:number;
constructor(name:string,age:number){
//constructor就是类的构造函数,当你new Person的时候,就会自动调用constructor
// 我们这里实际上是在动态的为实例添加成员,ts要求类的成员应该先定义且确定类型
this.name=name;
this.age=age
}
//实例方法
sayHello():void{
console.log(this.age,this.name)
}
}
let p2=new Person1('jack',12)
p2.sayHello()
// 类的继承
class Person2{
name:string;
age:number;
constructor(name:string,age:number){
this.name=name;
this.age=age
}
eat(){
console.log('eat')
}
}
class Student extends Person2{
constructor(name:string,age:number){
super(name,age);//父类的
}
}
new Student('rose',34).eat()
// 实例成员访问修饰符 public private protected
// 类成员默认对外是公开的public
// Private 用来声明私有成员 私有成员无法被继承 我们可以把不希望被外部修改的成员定义为私有的
// readonly只读的,作用和const定义的常量类似 写在其他修饰符后面
class Person3{
name:string;
age:number;
private readonly type:string='人类';//声明类成员的同时为其赋值 私有
protected fot:string='ddd';//和private类似,但是可以被继承,只能在子类内部被访问
changeType(){
// this.type='hh'
}
getType(){
// 在类的内部访问私有成员 但是在外部无法直接访问,可以通过访问函数的形式来访问私有成员
return this.type;
}
}
new Person3().getType()
class Student3 extends Person3{
getFot(){
console.log(this.fot)
}
}
//类的私有成员无法被继承
new Student3().getFot()
// 简写
class Person4{
// public age:number;
// public name:string;
// constructor(name:string,age:number){
// this.name=name;
// this.age=age;
// }
constructor(public age:number,public name:string){
}
}
new Person4(23,'jack')
7.属性存取器:
//属性的存(get)取(set)器:对属性做校验
class Person5{
private _age:number;
get age(){
return this._age
}
set age(val){
if(val<10){
throw new Error('xxx')
}
this._age=val;
}
constructor(){
}
}
// new Person5().age=-10;
let p0=new Person5();
p0.age=-10;//编写期间不会报错,但是运行的时候会
8.静态成员:
//静态成员(另一种叫实例成员,只能通过new出来的实例访问)
// 1. 不需要实例化访问的成员就是静态成员,就是只能被类访问的成员
// 2. static 关键字
class Person6{
static type:string='人类';
name:string='jack';
age:number=12;
//默认是实例成员,加上static就是静态成员
static say(){
console.log('ddd')
}
}
// Person6.age
// 类就是构造函数,构造函数本身就有一个name属性,所以可以点出Name
// Person6.name;
new Person6().name
Person6.say()
9.函数:
//函数参数
// 参数可以指定类型,可选参数就是在在参数后加?
function ass(x:number,y?:number):number{
return x+10
}
// 默认参数,如果你不传y,他就是10,如果你传了就是传的数
function as(x:number,y:number=10):number{
return x+y
}
// 剩余参数
function sub(...arg:number[]):number{
let re:number=0;
arg.forEach((item:number):void=>{
re+=item
})
return re;
}
sub(1,2,3)
// 箭头函数
let ad=(x:number,y:number):number=>x+y
// for-of循环
// for in 会把数组当作对象来遍历
// for of 支持break 类似于for in遍历对象的形式
let arr0:number[]=[1,2,3]
for(let val of arr0){
if(val==2){
break;
}
console.log(val)
}