typescript

Posted 2021-03-21 zhengyulu

一、介绍

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