ts编译选项

tsc  app.ts -w  

参数-w，就是对app.ts进行监视，每次该文件改变时就会自动编译

**:任意目录

*：任意文件

接口

接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当做类型声明去使用。

interface MyInterface{
name:string
age:number
}
使用此接口：const obj:MyInterface={
name:'mez',
age:11}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

注意：接口是可以重复声明的。

interface MyInterface{
gender：string
}
  • 1.
  • 2.
  • 3.

这样两个同名接口存在的话等价于：

interface MyInterface{
gender：string
name:string
age:number
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

接口可以再定义类的时候去限制类的结构,接口中的所有属性都不能有实际的值，所以说，接口只考虑对象的接口，而不考虑其值，在接口中所有的方法都是抽象方法。

interface myTest{
name:string;
sayHello():void;
}
  • 1.
  • 2.
  • 3.
  • 4.

定义类时，可以使类去实现一个接口

class MyClass implements myTest{
name:string;
constructor(name:string){
this.name=name;
}
sayHello(){
console.log('大家好~~')
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

interface和abstract是TS中独有的，在编译后就看不到了。

属性的封装

(function(){
//定义一个表示人的类
class Person{
//可以用下划线的方式
//TS可以再属性钱添加属性的修饰符
//public:public修改的属性是可以任意修改的
//private：私有属性，只能再类内部进行修改
//通过再类中添加方法使得私有属性可以被外部访问
//protected：受保护的属性，只能在当前类和当前类中的子类中进行访问
private _gender:string;
name:string;
age:number;
constructor(name:string,age:number){
this.name=name
this.age=age
}
//getter方法用来读取属性
//setter方法用来修改属性
//定义方法，用来获取gender属性
getGender(){
return this._gender
}
//定义方法，用来设置gender属性
setGender(value:string){
//判断gender是否合法
if(value=='男' || value=='女'){
    this._gender=value
}

}
}
const per =new Person(name:'孙悟空',age:18)

//现在属性是再对象中设置的，可以任意的被修改
//比如
person.name='mez';

//但是会存在一个问题，name和age都可以修改，但是当存在不可控的数据时，是非常危险的

//TS中设置getter方法的方式
get gender(){
return this._gender
}
//这样的话就可以直接使用.gender即可

set gender(value:string){
this._gender=value
}
//可以直接执行
per.gender='男'

//可以直接将属性定义在构造函数中
class C{
constructor(public name:string){}
}
//等价于
class C{
constructor(name:string){
this.name=name
}
}
})()
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.

泛型

//在不知道参数的类型时，就可以使用泛型

function fn(a:  ??): ?? {
return a

}

//定义函数或类时，遇到不明确的就可以使用泛型
function fn<T>(a:T):T{
 return a;
}

//只有在函数执行的时候才能确定T的类型

//可以直接调用具有泛型的函数
fn(a:10)  //此时number赋值给了T   //类型推断为number

fn<string>(a:'hello')  //手动指定类型，防止在不能自动推断出类型的情况

function fn2<T,K>(a:T,b:K):T{
console.log(b);
return a}

fn2<number,string>(a:123,b:'hello')

interface Inter{
length:number;
}
//T extends Inter  表示泛型T必须是Inter实现类
function fn3<T extends Inter>(a:T):number{
    return a.length;
}
fn3('123')//不正确
fn3(123)//正确

class Myclass<T>{
name:T;
constructor(name:T){
this.name=name
}}
const mc=new Myclass<string>(name:'aaa')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.