typescript 安装和使用

TypeScript 的命令行工具安装方法如下：

npm install -g typescript # 全局安装typescript
tsc -v # 查看typescript版本

hello world

任何语言都是从hello world开始入门的，没毛病，那么随便找一个编辑器，写一段typescript如下代码，保存为helloworld.ts

helloworld.ts

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));

helloworld.js

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

使用typescript对ts文件进行编译，可以看到同文件夹下编译出一个同名（helloworld.js）文件

编辑器推荐使用VSCODE

typescript 编译设置 VSCODE自动编译

在项目的根目录使用 tsc --init 初始化TypeScript项目并创建一个tsconfig.json文件

并设置监听属性

"compilerOptions": {
  "watch": true
}

设置VSCODE自动编译，在VSCODE中使用快捷键Ctrl/Cmd + Shift + B 打开任务，选择tsc: 监听项目运行，这时候VSCODE就会自动查找项目内的ts文件，并且通过tsconfig.json文件对其进行编译成js

变量声明

typescript是强类型语言，所以在声明变量的时候，必须指定它的类型，比如

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.`
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

alert(colorName);  // 显示'Green'因为上面代码里它的值是2


let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.


// 方法返回值
function warnUser(): void {
    alert("This is my warning message");
}


// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

只读属性

interface Point {
    readonly x: number;
    readonly y: number;
}

TypeScript具有ReadonlyArray类型，它与Array相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

类

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);