你所知道的typescript

typescript是什么

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

1 TypeScript 与 JavaScript 的区别

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用
支持模块、泛型和接口	不支持模块，泛型或接口
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持

2 获取typescript

安装 npm install -g typescript

验证 tsc -v

编译 tsc helloworld.ts

基础类型

布尔值

let isDone: boolean = false

数字

let decLiteral: number = 6

字符串

let name: string = "bob"

数组

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

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

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为string和number类型的元组。

let x: [string, number];
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
复制代码

枚举 Enum

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

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
复制代码

默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName);  // 显示'Green'因为Green在上面代码的编号为2
复制代码

any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用any类型来标记这些变量：

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

void

void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是void：

function warnUser(): void {
    alert("This is my warning message");
}
复制代码

Null 和 Undefined 及其区别

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。

let u: undefined = undefined;

let n: null = null;

老实说，几乎没区别。

JavaScript的最初版本是这样区分的：null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。

Number(undefined)
// NaN

5 + undefined
// NaN
复制代码

但是上面这样的区分，在实践中很快就被证明不可行。目前，null和undefined基本是同义的，只有一些细微的差别。

null表示”没有对象”，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype)
// null
复制代码

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined
复制代码

never

never 类型表示的是那些永不存在的值的类型。 例如，never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

never 类型是 TypeScript 中的底层类型。它自然被分配的一些例子：

• 一个从来不会有返回值的函数（如：如果函数内含有 while(true) {}）；

• 一个总是会抛出错误的函数（如：function foo() {throw new Error('Not Implemented')}，foo 的返回类型是 never）；

• 你也可以将它用做类型注解：let foo: never; // ok

• 但是，never 类型仅能被赋值给另外一个 never：

let foo: never = 123; // Error: number 类型不能赋值给 never 类型
// ok, 作为函数返回类型的 never
let bar: never = (() => {
  throw new Error('Throw my hands in the air like I just dont care');
})();
复制代码

与 void 的差异

当一个函数返回空值时，它的返回值为 void 类型，但是，当一个函数永不返回时（或者总是抛出错误），它的返回值为 never 类型。

TypeScript 断言

有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。

类型断言有两种形式：

1.“尖括号” 语法

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
复制代码

2.as 语法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
复制代码

解构

解构数组

最简单的解构莫过于数组的解构赋值了：

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2
复制代码

这创建了2个命名变量 first 和 second。 相当于使用了索引，但更为方便：

first = input[0];
second = input[1];
复制代码

解构作用于已声明的变量会更好：

[first, second] = [second, first];
复制代码

作用于函数参数：

function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f(input);
复制代码

你可以在数组里使用…对象展开运算符创建剩余变量：

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]
复制代码

对象结构

let person = {
  name: "Semlinker",
  gender: "Male",
  address: "Xiamen",
};
 // 组装对象
 let personWithAge{ ...person , age: 33 }
 // 获取除了某些项外的其他项
 let { name, ...rest } = person
复制代码

就像数组解构，你可以用没有声明的赋值：

({ a, b } = { a: "baz", b: 101 });

默认值

默认值可以让你在属性为 undefined 时使用缺省值：

function keepWholeObject(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
}
复制代码

现在，即使 b 为 undefined ， keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。

函数声明

解构也能用于函数声明。 看以下简单的情况：

type C = { a: string, b?: number }
function f({ a, b }: C): void {
    // ...
}
复制代码

但是，通常情况下更多的是指定默认值，解构默认值有些棘手。 首先，你需要在默认值之前设置其格式。

function f({ a, b } = { a: "", b: 0 }): void {
    // ...
}
f(); // ok, default to { a: "", b: 0 }
复制代码

…未待完续