typescript

一、介绍

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   //1let blueNum:Color = Color.blue    //2let orangeNum:Color = Color.orange    //5let red:string = Color[1]   //redlet blue:string = Color[2]    //bluelet 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

来源：https://www.icode9.com/content-4-600951.html