JS-Typescript

环境

1. npm方式安装
npm install -g typescript

2. 将".ts"文件编译为".js"文件
tsc xxx.ts

上面的步骤可以实现手动编译，也可以采用自动编译：

1. 创建tsconfig.json配置文件
tsc --init

2. vsCode下 ctrl+shift+b
运行 watch(监视) ，文件改变时自动编译

类型注解

函数

function test(name: string) {
    return name;
}

变量

var name: string = "tom"

接口

工作原理

function test (person: {name: string}) { }

let p1 = {age: 20, name: "tom"};

test(p1);

用interface ↓ ，编译后也会变成上面 ↑ 的形式

interface Person {
    name: string
}

function test (person: Person) { }

// 即使参数位置或个数不对称，只要需要的参数存在就合法
let p1 = {age: 20, name: "tom"};

test(p1);

可选属性

标记?的属性表示可选

interface Person {
    name: string;
    age?: number;
}

function test (person: Person) {
    if(person.age){ /* ... */ }
}

let p1 = {name: "tom"};

test(p1);

只读属性

interface Person {
    readonly name: string;
    age: number;
}

let p1: Person = {name: "tom", age: 20};

p1.name = "sam";    // error

类

class Person {
    fullName: string;
    // public 参数表示等同于创建了同名的成员变量
    constructor(public firstName, public lastName) {	// 构造器函数
        this.fullName = firstName + " " + lastName;
    }
}

var person1 = new Person("li", "si");	// 使用时必须对应构造器参数

编译之后 ↓

var Person = /** @class */ (function () {
    function Person(firstName, lastName) {
        this.firstName = firstName;	// 假如不加 public 此处就不会暴露出这个变量
        this.lastName = lastName;
        this.fullName = firstName + " " + lastName;
    }
    return Person;
}());
var person1 = new Person("li", "si");

数据类型

基础数据类型

boolean

和js一样，值：true/false

number

let decLiteral: number = 6;	// 10进制
let hexLiteral: number = 0xf00d;	// 16进制
let binaryLiteral: number = 0b1010;	// 2进制
let octalLiteral: number = 0o744;	// 8进制

编译后↓

var decLiteral = 6;
var hexLiteral = 0xf00d;
var binaryLiteral = 10;
var octalLiteral = 484;

较新版本js虽支持某些进制格式，但ts仍会转换部分进制为10进制以兼容低版本js

string

let text: string = "hello";
let i: number = 1;
let template: string = `text is ${ text }，i + 1 = ${ i + 1 }`;   // 模板字符串

编译后↓

var text = "hello";
var i = 1;
var template = "text is " + text + "\uFF0Ci + 1 = " + (i + 1); // 模板字符串

较新版本js虽支持${}写法，但ts仍会转换为普通格式以兼容低版本js

Array

格式1：类型 + []

let stringList: string[] = ["a", "b", "c"];
let numberList: number[] = [1, 2, 3];

格式2：数组泛型

let stringList2: Array<string> = ["a", "b", "c"];
let numberList2: Array<number> = [1, 2, 3];

Tuple

元组（数据库中的一行记录称为元组）

let x: [number, string, boolean, number] = [0, "tom", true, 20];

enum

枚举类型

enum Color {Red, Green = 5, Blue}		// 注意没有;
let c1: Color = Color.Red;	// "Red"
let c2: string = Color[6];	// "Blue"

元素默认开始下标为0，可以用例如 Green = 5来更改元素的下标
编译后↓

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 5] = "Green";
    Color[Color["Blue"] = 6] = "Blue";
})(Color || (Color = {}));
var c1 = Color.Red;
var c2 = Color[6];

any

对于不知道的类型可以用any；
虽然大多数可以用Object代替，但例如toFiexed(四舍五入)这类函数不允许对Object类型使用

let notSure1: any = 10;
console.log(notSure1.toFixed());

let notSure2: Object = 10;
console.log(notSure2.toFixed());	// error

let notSure3 = 10;	//ok,但不规范

void

函数返回类型

function say(message: string): void {
    console.log(message);
}

变量类型，只能等于undefined 和 null，用处不大

let u: void = undefined;
let n: void = null;

null，undefined

用处不大

let u: undefined = undefined;
let n: null = null;

默认null和undefined是所有类型的子类型，所以可以赋给任何类型

let u: number = undefined;

never

表示永远不会运行到终点
死循环

function alwaySay(): never {
    while (true) {
        console.log("hello");
    }
}

异常

function error(message: string): never {
    throw new Error(message);
}

function fail() {
    return error("Something failed");
}

object ，Object

object表示非基本类型，即除number，string，boolean，symbol，null或undefined之外的类型；
Object除null，undefined外都可接受。

function ObjectTest(o: Object) { }
ObjectTest("string");   // ok
ObjectTest(null);   // error

function objectTest(o: object) { }
objectTest([1, 2, 3]);	// ok
objectTest({name: "tom", age: 50});	// ok
objectTest("string");   // error
objectTest(null);   // error

类型断言

类似强制类型转换，假如自己十分清除变量的类型或作用，可以告诉系统自己的写法没错

// 十分清楚 message 是一个字符串
let message: any = "hello world";

// 尖括号写法
let messageLength: number = (<string>message).length;

// as 写法
let messageLength: number = (message as string).length;

ReadonlyArray

只读数组

let ra: ReadonlyArray<number> = [1, 2, 3];

ra[0] = 4;	// error
ra.push(4);	// error
ra.length = 10;	// error

let a: Array<number> = [1, 2, 3];	// error
a = ra;	// error
a = ra as Array<number>;	// 可以强转一下 ok
ra = a;	// ok

变量声明

let

es6的新特性，TS实现了它并可编译为兼容低版本js的语法

for(let i = 0; i < 10; i++){
    setTimeout(() => {
        i;
    },0);
}

编译为 ↓

var _loop_1 = function (i) {
    setTimeout(function () {
        i;
    }, 0);
};
for (var i = 0; i < 10; i++) {
    _loop_1(i);
}

所以尽可能使用let代替var吧