typeScript初探

TypeScript

TypeScript中文网

是什么？

TypeScript是微软公司开发的一款开源的JavaScript超集语言！

JavaScript超集： 当前任何JavaScript都是合法的TypeScript代码！

TypeScript主要为JavaScript提供了类型系统和ES6语法的支持！

Flow是一个类型检查工具，TypeScript是一种开发语言！

TypeScript有自己的编译工具，我们写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行！

如何使用

安装

TypeScript命令行工具的安装（TS编译器）

npm i typescript -g

安装好了之后，全局会提供一个tsc命令给我们使用！

编写TypeScript代码

let num: number = 100
// num = 'abc'
num = 1000
function test(a: number, b: number):number {
   return a + b
 }
 let result: number =test(1,2)
//  let result:string = test(1,2)

通过tsc进行编译，最终运行

ts配置文件的说明

1. 创建配置文件

tsc --init

2. 设置配置项

   • target: 指的就是将ts代码要转换成哪个版本的js代码 es5 es3
   • module: 指的就是将ts代码转换成js代码之后，使用的模块化的标准是什么
   • outDir: 指的就是将ts代码转换成js代码之后，js代码存放的文件夹路径
   • rootDir: 指的就是要将哪个目录中的ts代码进型转换，ts代码的存放路径
   • strict: 是否要将ts代码转换为严格模式的js代码！

3. 使用配置文件

tsc -p ./tsconfig.json

ts中的数据类型：

// number
let a: number = 10;
let b: number = NaN;
let c: number = Infinity;
let d: number = 0xA12; //16进制
let e: number = 0b1010101; //2进制
let f: number = 0o75; // 8进制

// string
let str: string = "这是一个字符串"
let str1: string = '这是一个字符串'
let str2: string = `hello 这是一个模板字符串${a}`

// boolean
let flag: boolean = true;
let flag1: boolean = false;

// 数组
// Array<数据类型>
let arr: Array<number> = [1, 2, 3, 4];

// 数据类型[]
let arr1: number[] = [1, 2, 3, 4];


// 元组（Tuple）
let arr2: [number, string] = [1, 'a'];

// arr2[0] = 'a';
// arr2[0] = 1000;

// 越界也是不可以赋值的，ts会报错 
// Type '"a"' is not assignable to type 'undefined'.
arr2[2] = 'a';
arr2[2] = 1;
// arr2[2] = [];

// void 空值
let res: void = undefined;

// undefined
// null
let res1: undefined = undefined;
let res2: null = null;

// any 表示任意类型
let somevar: any = 10;
somevar = "abc";
somevar = [];

// never类型
// never类型一般用在不可能返回内容的函数的返回值类型设置

function test(): never{
    while (true) {
        
    }
}
// object类型

// let o: object = {};
// let o1: object = [];

// 对象类型

let o: { name: string, age: number } = { name: "张学友", age: 18 };


// enum: 枚举类型

// gender: 0  1  -1

enum Gender{
    male = 1,
    female = 0,
    unknow = -1
}

let gender: Gender = Gender.male;

let obj = {
    gender: Gender.male
}

// 类型断言
let stri: any = "abc";
let len: number = (<string>stri).length;

ts中的类

class Person{
    // 和ES6不同的是，TS中属性必须声明，需要指定类型
    name: string
    // 声明好属性之后，属性必须赋值一个默认值或者在构造函数中进行初始化
    age: number
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello(msg: string): void {
        console.log(msg);
    }
}

ts中的访问修饰符

访问修饰符：

1. 指的就是可以在类的成员前通过添加关键字来设置当前成员的访问权限
2. public: 公开的，默认 所有人都可以进行访问
3. private： 私有的， 只能在当前类中进行访问
4. protected： 受保护的，这能在当前类或者子类中进行访问

class Car{
    // 如果不加访问修饰符 则当前成员默认是公开的 所有人都可以访问的
    public color: Color
    constructor() {
        this.color = Color.red;
        // this.run();
        // this.loadPeople();
    }

    // 加了private之后，当前成员就只能在当前类中使用了！
    private run() {
        
    }

    // 加了protected之后，当前成员就只能在当前类或者子类中使用了！
    protected loadPeople() {
        
    }
}

ts的只读属性和参数属性的说明

class Cat{
    // 如果给属性添加了readonly修饰 则这个属性无法被赋值
    // 而且属性必须在声明的时候或者在构造函数中被赋值！
    readonly name: string
    // type: string
    // 构造函数中给参数前面加上修饰符，就相当于声明了一个属性！ 
    constructor(public type: string) {
        this.name = "加菲"
        // this.type = type
    }
}

var cat = new Cat("橘猫");
// cat.name = "123"
// cat.type;

ts中的接口

// 接口
// 接口可以理解为一个约定 一个规范


// // 接口使用interface进行生命
// interface AjaxOptions{
//     url: string,
//     // 给属性加上？之后，这个属性就是可选的！
//     type?: string,
//     data?: object,
//     success(data: object): void
// }


// // option参数中 需要包含 url type data success
// function ajax(options: AjaxOptions) {
    
// }

// ajax({
//     url: "http://www.baidu.com",
//     type: "get",
//     data: {},
//     success(data) {
        
//     }
// })

interface Point{
    readonly x: number,
    y: number,
    [propName: string]: any // 接口里面可能存在其他属性，要忽略掉。（额外属性检查）
}

let poi: Point = {
    x: 10,
    y: 10
}

// poi.x = 100;


let poi1: Point = {
    x: 10,
    y: 10,
    z: 100
}

函数类型接口：

interface SumInterFace{
  (a: number,b: number): number
}
let sum: SumInterFace= function (a: number, b: number){
  return a + b
}

接口的继承

// 接口继承接口
interface TwoDpoint{
  x: number,
  y: number
}
interface ThereDpoint extends TwoDpoint{
  z: number
}
let poil: ThereDpoint = {
  z: 100,
  x: 100,
  y: 100
}
interface FourDPoint extends ThereDpoint, TwoDpoint {
  time: Date
}
let poi2: FourDPoint = {
  z: 100,
  x: 100,
  y: 100,
  time: new Date()
}