码迷,mamicode.com
首页 > 其他好文 > 详细

typescript

时间:2019-12-21 20:37:18      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:options   布尔   type   数字类型   ora   外部   extends   接受   message   

一、介绍

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

typescript

标签:options   布尔   type   数字类型   ora   外部   extends   接受   message   

原文地址:https://www.cnblogs.com/zhengyulu/p/12077981.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!