一、介绍
1.typescript是由微软开发的一款开源的编程语言
2.ts是js的超级,拓展了js语法,更像java/c#这样面向对象语言,更适合开发大型项目。
3.谷歌也在大力支持ts,谷歌的angular2x+ 就是基于ts语法的。
4.最新的Vue ,React 也可以集成ts。
二、安装和编译
1.安装:npm install -g typescript
2.生成配置文件:tsc --init 创建tsconfig.json 文件(eg:可修改输出地址“outDir”:“./js”,等配置)
3.编译:tsc hello.ts (hello.ts 是自己建的ts名)
4.点击菜单栏 任务-运行任务 点击tsc 监视-tsconfig.json ,然后就可以自动生成代码了。
三、ts的数据类型
1.布尔类型(boolean)
2.数字类型(number)
3.字符串类型(string)
4.数组类型(array)
5.元祖类型(tuple)
6.枚举类型(enum)
7.任意类型(any)
8.null 和 undfined
9.void 类型
10.never类型
四、各类型的用法
1.布尔类型(boolean)
let flag:boolean = true; flag =false;
2.数字类型(number)
let num:number; num =3;3.字符串类型(string)
let str:string = ''; str = 'I am string';
4.数组类型(array)
let arr:string[]=[]; arr = ['1','2','3','4'];
or
let arr:Array<number> =[1,2,3,4];
5.元祖类型(tuple)
//已知数组元素的个数,并且知道每个元素的类型
let tupleArr :[string,number] =['lalala',2];
6.枚举类型(enum)
enum Color{ red = 1, blue, orange = 5, green = 7 } let redNum:Color = Color.red //1 let blueNum:Color = Color.blue //2 let orangeNum:Color = Color.orange //5 let red:string = Color[1] //red let blue:string = Color[2] //blue let orange:string = Color[5] //orange
7.任意类型(any)
let notSure:any = 4; notSure = 'maybe a string instead'; notSure = false; //okay
8.null 和 undfined
//strictNullChecks标记的启用是在tsconfig.json文件里进行配置。 // { // "compilerOptions": { //编译选项,可以被忽略,这时编译器会使用默认值 // "strictNullChecks": false, //在严格的null检查模式下,null和undefined值不包含在任何类型里,只允许赋值给void和本身对应的类型。 // } // } //"strictNullChecks": false, //默认情况下,null 和 undefined 是其它类型的子类型,可以赋值给其它类型,如number类型,此时,赋值后的类型会变成 null 或 undefined。 let hh: number; hh = null; //ok的 hh = undefined; //ok的 //"strictNullChecks": true, let ss: number; ss = null; //提示不可以 ss = undefined; //提示不可以
//定义没有赋值就是undifined;
let aa :string | undifined;
console.log(aa) //undefined
//一个元素可能是number,null,undifined
let num: number | null | undefined
num=123;
9.void 类型
//表示方法没有返回任何类型 function run(): void { console.log(111); } run() //表示传参是number类型,函数返回值也是number类型 function sum(num:number): number { console.log(111); return num + 123 } sum(12);
10.never类型
//never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。
// 即使 any也不可以赋值给never。通常表现为抛出异常或无法执行到终止点(例如无线循环)。比如: let x: never; let y: number; // 运行错误,数字类型不能转为 never 类型 x = 123; // 运行正确,never 类型可以赋值给 never类型 x = (() => { throw new Error('exception') })(); // 运行正确,never 类型可以赋值给 数字类型 y = (() => { throw new Error('exception') })(); // 返回值为 never 的函数可以是抛出异常的情况 function error(message: string): never { throw new Error(message); } // 返回值为 never 的函数可以是无限循环这种无法被执行到的终止点的情况 function loop(): never { while (true) { } }
五、类
1.类的写法
2.类的继承
3.属性修饰符(public、protected、private)
4.必传参数和可选参数
//类里面的修饰符:ts里定义属性的时候提供了三种修饰符: /* public:共有 在类里面、子类、类外面都可以访问 protected:保护类型 在类里面,子类里面可以访问,在类外部没法访问 private:私有 在类里面可以访问 ,类外面和子类都不访问 属性如果不加修饰符,默认是public */ class Person { name: string; //必传,属性修饰符这里没写就默认是public,同public name:string; private sex: string; protected age?: number; //age:可有可没有 //namepro:必传,agepro:可传可不传,可选参数必须配置到 参数的最后面 //‘lisi’是namepro的默认值 constructor(namepro: string = 'lisi', sexpro: string = '男', agepro?: number) { this.name = namepro; this.age = agepro; this.sex = sexpro; } run(): void { console.log(this.name); } } let zhangsan = new Person('zhangsan', '女'); zhangsan.run(); zhangsan.age; //提示出错。age是保护类型 class Web extends Person { constructor(name: string) { super(name) //继承父级的参数需要同过super函数传值 } work() { console.log(this.sex); //sex是父类的私有属性,所以子类是访问不到的,这里会提示错误 } }
5.参数中的三点运算符
//三点运算符,接受新参传过来的值 function sumFn(...result: number[]): number { let sum: number = 0; for (let i = 0; i < result.length; i++) { sum += result[i]; } return sum; } sumFn(1, 2, 3, 4); sumFn(1, 2, 3, 4, 5, 6) //如果有默认的参数,那传参前面就是默认的参数,剩下的就在。。。的result中 function sumFn(a:number,b:number,...result: number[]): number { let sum: number = a+b; for (let i = 0; i < result.length; i++) { sum += result[i]; } return sum; } sumFn(1, 2, 3, 4); sumFn(1, 2, 3, 4, 5, 6)
六、ts函数重载
1.ts中的重载:通过为同一个函数提供多个函数类型定义来试下多种功能的目的
function getInfo(name: string): string; function getInfo(age: number): string; function getInfo(str: any): any { if (typeof str === 'string') { return '我叫' + str; } else { return '我的年龄' + str; } } getInfo('张三') //我叫张三 getInfo(20) //我的年龄20