TypeScript的基本语法(一)

TypeScript 是JavaScript的一个超集,扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。

npm的用户安装:

npm install -g typescript

使用 TypeScript 编译器,名称叫 tsc,可将ts文件生成 js 文件,编译命令:

tsc test.ts

如果不是全局安装,编译命令可以这样

.\node_modules\.bin\tsc test.ts

环境配置:

//tsconfig.json
{
  "compilerOptions":{//这里是编译参数
      "target":"es6",//编译后的语言es6
      "module":"commonjs",//模块化
      "outDir":"dist",//编译输出文件所在目录
      "noEmitOnError":true,//语法错误,不能编译通过
      "sourceMap":true,
      "declaration":true
  },
  "include":[//这里是需要编译的源文件所在
    "src/**/*"
  ],
  "exclude":[//将不需要编译的文件写在这里
    "node_modules"
  ]
}

类型批注
TypeScript 通过类型批注提供静态类型以在编译时启动类型检查,也可以不使用:

function run(name:string, age:number){
  console.log(name,age);
}
run("ss", 18);
//run(6, 18);//报错 Argument of type '6' is not assignable to parameter of type 'string'.

数据类型
typescript数据类型分为四类:基础类型、数组与元组、枚举、any。

{ 
    //基础类型
    let name:string = "ss";
    let age:number = 15;
    let n:null = null;//也可以是undefined
    let und:undefined = undefined;//也可以是null
    let s2:boolean = false;
    let s1:String = "src";//类类型

    //数组、元组
    let arr1:number[] = [12, null];//只能是数字或是null、undefined
    let arr2:Array<number> = [];
    //元组 下面的原组 前两位必须对应 后面必须是两种类型之一 可以是 null或undefined
    let tuple:[number,string] = [12,"ss"];
    tuple[2] = 18;
    tuple[5]= "ff";
    // tuple[4] = false;//不能是false
    console.log(tuple)//[ 12, 'ss', 18, <2 empty items>, 'ff' ]
}
//枚举
enum T1{
  A,B//默认从0开始,往后默认加1
}
function run(a:T1){
  switch(a){
    case T1.A :
    return "aaaaa";
    case T1.B:
    return "bbbbb";
    default:
    console.log(T1.A);//0
    console.log(T1.B);//1
    return "defalult";
  }
}
console.log(run(undefined));

//再来一个例子
enum T2{
  A,B,C="ss",D=12,E
}
function run2(a:T2){
  switch(a){
    case T2.A :
    return "aaaaa";
    case T2.B:
    return "bbbbb";
    default:
    console.log(T2.B);//没有赋值 第二个默认为1
    console.log(T2.C);//"ss"
    console.log(T2.D);//12
    console.log(T2.E);//没有赋值默认对前面的数字加1 其前面只能是数字类型
    return "ccc";
  }
}
console.log(run2(undefined));
//any
function run3(){//不指定类型就是any
  return 12;
}
console.log(run3());

function run4():void{//void有三种情况 不返回 返回null 返回undefined
  return null;
}
console.log(run4());

function run5():any{//可以返回任何类型 也可以不返回
  // return 15;
}
console.log(run5());//不返回时打印输出undefined


类的基本写法

class User{
  name:string;
  age:number;
  constructor(name:string,age:number){
    this.name = name;
    this.age = age;
  }
}
//也可以export{} 目的是将User封装为一个模块  否则typescript会将其当作全局的进行处理
//User如果是全局的 就必须保证其他文件上声明的类不能再是User
//否则 其他ts文件上可以继续声明类User
export{User};

类的高级写法

class User1 {
  private name: string;//只能在User1类里面访问 其他地方包括类的对象无法访问
  public readonly age: number;//加上readonly就是只读 不能修改
  protected weight: number;//只能在类或其子类里面访问 类的对象无法访问
  group: string;//默认是public
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
    this.weight = 55;
    this.group = "group";
  }
   changename(){
     console.log(this.name);
     this.name = "changename";
     console.log(this.name);
  }
}

class Student extends User1 {
  constructor() {
    super("scy", 18);
    // console.log(this.name);//无法访问
    console.log(this.weight);//可以访问
  }
}
let s = new Student();
console.log(s.age);
// console.log(s.weight);//无法访问
console.log(s.group);//group

var u = new User1("scy", 18);
u.changename();
// u.age = 56;//只读属性 无法赋值
console.log(u.age);
// console.log(u.weight);//无法访问
u.group = "user group";//不会对 对象u产生影响
console.log(u.group);//user group
console.log(s.group);//group

s.group = "s group";//不会对 对象u产生影响
console.log(u.group);//user group
console.log(s.group);//s group

//export{} 目的是将User封装为一个模块  否则typescript会将其当作全局的进行处理
//User如果是全局的 就必须保证其他文件上声明的类不能再是User
//否则 其他ts文件上可以继续声明类User
// export { };

TypeScript的基本语法(二)

猜你喜欢

转载自blog.csdn.net/chaoyangsun/article/details/80295604