TS入门学习

November 04, 2020 3446

TS新特性主要体现在字符串、函数、函数参数、类上，

首先通过官网的一个小例子，安装typescript后可以将ts文件可以编译成js文件。

字符串

  • 多行字符串：使用``包裹跨行的字符串

  • 字符串模板：在多行字符串中通过${xxx}使用来模板

    1
    2
    3
    4
    5
    6
    7
    var name = 'debug'
    function getImg() {
      return '<i></i>'
    }
    var html = `<div>${names}
    <span>${getImg()}</span>
    <div>`

  • 拆分字符串

    1
    2
    3
    4
    5
    6
    7
    8
    function getData(template, name, age) {
        console.log(template);
        console.log(name);
        console.log(age);
    }
    var names = 'zyl';
    var age = 31;
    getData`你好，我的名字是${names}，我今年${age}岁了`

参数

参数类型

Typescript中的参数类型包括：boolean/number/string/array/tuple/enum/any/（null和undefined）/ void /never(10种)。其中元祖（tuple）、枚举、任意值、void类型和never是有别于Javascript的特有类型。

元组（tuple）是指一个已知元素数量和类型的数组。

1
2
3
4
5
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

枚举为一组数值赋予友好的名字

1
2
3
4
5
enum Color {Red, Green=2, Blue}
let c: Color = Color.Red;
let d: Color = Color.Green;
let e: Color = Color.Blue;
console.log('enum',c,d,e) //0,2,3

任意值any，当我们还不能确定变量的类型时就指定为any，让其通过编译阶段的检查。

或者是只知道一部分变量的类型

1
2
let list: any[] = [1, true, "free"];
list[1] = 100;

void表示没有任何类型，在c中没有返回值的函数就是声明为void的。ts中也是，不管声明一个void类型的变量什么用，只能为其赋值为null或undefined。

1
2
3
function warnUser(): void {
    console.log("This is my warning message");
}

never表示永不存在的值，用于总是抛出异常或者不会有返回值的（箭头）函数表达式的返回值类型。变量也可以是never，当被永不为真的条件约束时。

类型声明与默认参数

可以在函数中设置参数的类型和默认

1
2
3
4
5
6
7
function max(x: number, y: number = 4): number {
    return x > y ? x : y;
}
let result1 = max(2); //正常
let result2 = max(2, undefined); //正常
let result3 = max(2, 4, 7); //报错
let result4 = max(2, 7); //正常

可选参数

在js中，函数的参数时可以选的，而在ts中，每个参数是必选的。但在实际开发中需要根据实际需求来确认参数，可以通过？来定义可选参数。

1
2
3
4
5
6
7
8
9
10
11
function max(x: number, y: number) {
    if(y){
        return x > y ? x : y;
    } else {
        return x
    }
}
let result1 = max(2);
let result2 = max(2, 4, 7); //报错
let result3 = max(2, 4);
//注意：可选参数必须放在默认参数后面，y是可选参数

函数

剩余参数

前面介绍的参数只能表示某一个参数，当需要同时操作多个参数，或者并不知道有多少个参数传入时，就需要用到剩余参数。

1
2
3
4
5
6
7
8
9
10
function sum(x: number, ...restOfNumber: number[]){
    let result = x;
    restOfNumber.forEach(value => result += value);
    return result;
}
let result1 = sum(1, 2, 3, 4, 5, 6);
console.log(result1);

let result2 = sum(2);
console.log(result2);

generator函数

控制函数的执行过程，可以手动的干预函数执行。

解构表达式

解构是es6新特性，可以对数组或者是对象一一对应快速赋值，

数组解构

1
2
3
4
let imput = [1, 2];
let [first, second] = input;
console.log(first); //相当于inputp[0]
console.log(second); //相当于input[1]

对象解构

1
2
3
4
5
6
7
8
9
10
11
let test = {
    x: 0,
    width: 15,
    heights: {
        height1: 10,
        height2: 20
    }
};
let { x,  width, heights: {height2} } = test;
console.log(x, width, height2); //输出：0,15,20

箭头函数

ts中同样可以使用箭头函数

循环

ts中涉及三种高级循环方式：forEach()、for in、for of

类

ts中可以支持基于类（class）的面向对象编程

  • 类的声明
1
2
3
4
5
6
7
8
9
10
11
12
class Car {
    engine: string,
    constructor(engine: string) { 
        this.engine = engine;
    }
    drive(distanceInMeters: number = 0) { 
        console.log(`aaa is running` + this.engine)
    }
}

let car = new Car('petrol');
car.drive(100)
  • 类的封装、继承、多态
    封装、继承、多态是面向对象的三大特性。在Typescript中，使用extends关键字可以方便的实现继承。

修饰符

在类中的修饰符可以分为公共（public）、私有（private）、和受保护（protected）三种类型。在Typescript里，每个成员默认为public，可以被自由的访问。

接口

Typescript接口的使用方式类似于Java。
在Typescript中接口有属性类型、函数类型、可索引类型、类类型这几种，我们使用interface关键字定义接口并用implements关键字实现接口。

查看评论