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 { };