TypeScript学习分享

TypeScript 并不是一门新的编程语言，它是一个js的类型检查工具，只是基于 js，额外提供了一层类型系统 。

优点：提供可选的强静态类型、更早发现 BUG

缺点：需要写更多的代码、需要编译

参考资料：TS官方文档：https://www.tslang.cn/docs/handbook/basic-types.html

一、安装TypeScript

有两种主要的方式来获取TypeScript工具：

• 通过npm（Node.js包管理器）
• 安装Visual Studio的TypeScript插件 

npm install -g typescript

二、构建TypeScript文件

在编辑器，新建扩展名为 .ts 的文件，如 demo.ts，输入如下代码：

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

三、编译代码

在命令行上，运行TypeScript编译器

tsc demo.ts

输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码

TypeScript写法--类型注解

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

我们希望 greeter函数接收一个字符串参数，如果传入的参数类型不符合，则会编译错误，但不影响生成 js 文件

四、了解基础类型

基础类型: 布尔值boolean、数字number、字符串string、数组Array、Void、Any、元组Tuple、枚举enum、undefined、null、Object

布尔值（true/false值）：

let isDone: boolean = false;

number（ts除了支持十进制和十六进制字面量，还支持二进制和八进制字面量）：

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

string：

let name: string = "bob";
name = "smith";

// 模版字符串 它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ `），并且以${ expr }这种形式嵌入表达式

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

Array:  

//  第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

let list: number[] = [1, 2, 3];

//  第二种方式是使用数组泛型，Array<元素类型>：

let list: Array<number> = [1, 2, 3];

元祖 Tuple (允许表示一个已知元素数量和类型的数组，各元素的类型不必相同):

// 比如，你可以定义一对值分别为 string和number类型的元组:

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

  当访问一个已知索引的元素，会得到正确的类型：

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

  当访问一个越界的元素，会使用联合类型替代，联合类型是高级类型：

x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型

console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString

x[6] = true; // Error, 布尔不是(string | number)类型

enum (enum类型是对JavaScript标准数据类型的一个补充):

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 1开始编号：
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

// 或者，全部都采用手动赋值：
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

// 枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

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

Any(给在编程程阶段还不清楚类型的变量指定):

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

  当你只知道一部分数据的类型时，any类型也是有用的。 比如，你有一个数组，它包含了不同的    类型的数据：

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

list[1] = 100;

Void(它表示没有任何类型，当一个函数没有返回值时，其返回值类型为void)：

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

Null和Undefined(与 void 的区别是，默认情况下undefined 和 null 是所有类型的子类型，可赋值给number类型的变量)：

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

never（表示的是那些永不存在的值的类型，可以赋值给任何类型）：

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

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

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

object（表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型）：

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

类型断言 （ 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构）：

// 类型断言有两种形式。 

// 其一是“尖括号”语法：
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;


// 另一个为as语法：
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;