TypeScript

首先来了解一下TypeScript

TypeScript是JavaScript的，带有类型的超集，它可以编译成纯JavaScript。

TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

• 超集：支持所有的js，并在此基础上添加了额外的功能
• 有类型的：js类型是动态的，只有在运行时可知是什么类型，并且类型是变化的；TS要求是有类型的，即使没有，给与初始值的时候类型也会确定，类型与值不一致时会报错。TS是静态类型的编程语言，JS是动态类型的编程语言。静态类型编译期做类型检查；动态类型执行期做类型检查。
• 编译：说明TS本身不能在浏览器或者node环境中运行，需要编译器编译为js代码才可以运行

所以举个恰当的例子，就好比JavaScript和Jquery的关系，TypeScript做的也是让JavaScript这门语言越来越规范，越来越好用的作用。在平常的开发中完全可以用TypeScript来代替JavaScript.

文档

安装TypeScript

0. npm安装

> npm install -g typescript
1

2. VScode

在插件商店下载即可。

编译

在编译时，发现错误，抛出错误。

tsc .\index.ts
1

使用tsc 对文件进行编译（默认生成ES3版本的js文件）

监听编译

tsc .\index.ts  -w
1

生成tsconfig.json

tsc --init
1

常用配置

示例：

tsconfig.json示例文件:

• 使用"files"属性

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts",
        "scanner.ts",
        "parser.ts",
        "utilities.ts",
        "binder.ts",
        "checker.ts",
        "emitter.ts",
        "program.ts",
        "commandLineParser.ts",
        "tsc.ts",
        "diagnosticInformationMap.generated.ts"
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 使用"include"和"exclude"属性

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意

• * 匹配0或多个字符（不包括目录分隔符）
• ? 匹配一个任意字符（不包括目录分隔符）
• **/ 递归匹配任意子目录

使用"include"引入的文件可以使用"exclude"属性过滤。

常用编译选项：

• tsc index.js -w 自动监视当前ts文件，并进行编译

• tsc -w 自动编译所有的文件，前提是有配置文件tsconfig.json

• tsconfig.json ：ts编译器的配置文件，ts编译器可以根据它的信息对代码进行编译。 tsc --init

• include:"src/**/*" 用来指定哪些ts文件被编译

• exclude 用来指定被排除的文件

• compilerOptions ：编译器选项

  • target 用来指定ts被编译为的js的版本
  • module 用来指定使用模块化的规范
  • outDir用来指定编译后文件所在的目录
  • removeComments是否移除注释

基础数据类型

boolean,string,number,[]

• 隐式类型：ts根据变量的值来推断类型，代码的写法类似于js，但不能用其他类型的值赋值
• 显示类型：用: 类型来显示规定变量的类型

1. 布尔值

let isDone: boolean = false
1

2. 数字

和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
1
2
3
4

3. 字符串

JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用 string表示文本数据类型。 和JavaScript一样，可以使用双引号（ "）或单引号（'）表示字符串。

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

你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围，并且以${ 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.`;
1
2
3
4
5

4. 数组

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

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

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

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

特殊数据类型

undefined,null,Object,any,void

1. Any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量：

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

在对现有代码进行改写的时候，any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。 你可能认为 Object有相似的作用，就像它在其它语言中那样。 但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法：

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'.
1
2
3
4
5
6

2. Void

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

function warnUser(): void {
    console.log("这是我的警告信息");
}
1
2
3

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

let unusable: void = undefined;
1

3. Null和Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大：

// 我们只能给他们各自赋值undefined和null
let u: undefined = undefined;
let n: null = null;
1
2
3

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

4. Object

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

使用object类型，就可以更好的表示像Object.create这样的API。例如：

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
1
2
3
4
5
6
7
8
9

元组Tuple

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

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

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

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

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

x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
​
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
​
x[6] = true; // Error, 布尔不是(string | number)类型
1
2
3
4
5

联合类型

每个变量可以有多个类型，但是不想使用any破坏类型检查，就可以使用联合类型

Type1|Type2|Type3
var val:string:number
val = 12
val = "hi"
1
2
3
4

将联合类型作为函数参数使用。

function fn(name:string|string[]){
    if(typeof name == "string") { 
        console.log(name) 
    } else { 
            for(var i = 0;i

type NumStr = number | string;
var a:NumStr="hello";
​
var c:"on"|"off"="on"
1
2
3
4

var sites = {
    site1:"hello",
    site2:"Google"
}
1
2
3
4

var sites = {
    site1:"runboob",
    site2:"google",
    sayHello:funcation(){}  //类型模板
}
​
sites.sayHello = funcation(){return "hello"}  //直接写报错
1
2
3
4
5
6
7

funcation fn(obj:{site1:string ,site2:string}){
    console.log(obj.site1)
}
​
var sites={
    site1:"Runoob",
    site2:"Google",
}
​
fn(sites)
1
2
3
4
5
6
7
8
9
10

// 有名字的函数
function add(x, y) {
    return x + y;
}
​
// 匿名函数
let myAdd = function(x, y) { return x + y; };
1
2
3
4
5
6
7

function add(x: number, y: number): number {
    return x + y;
}
​
let myAdd = function(x: number, y: number): number { return x + y; };
1
2
3
4
5

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };
1
2

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
​
let result1 = buildName("Bob");                  // error, 少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // error, 多参数
let result3 = buildName("Bob", "Adams");         // 正确
1
2
3
4
5
6
7

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
​
let result1 = buildName("Bob");  // ？起作用了，所以没有报错
let result2 = buildName("Bob", "Adams", "Sr.");  // error, 实参多于形参
let result3 = buildName("Bob", "Adams");  // ？起作用，正确
1
2
3
4
5
6
7
8
9
10

function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}
​
let result1 = buildName("Bob");                  // 提供一个实参, 返回 "Bob Smith"
let result2 = buildName("Bob", undefined);       // 仍然正确, 也返回"Bob Smith"
let result3 = buildName("Bob", "Adams", "Sr.");  // error, 实参大于形参
let result4 = buildName("Bob", "Adams");         // 正确，返回"Bob Adams"
1
2
3
4
5
6
7
8

function buildName(firstName: string, lastName?: string) {
    // ...
}
1
2
3

function buildName(firstName: string, lastName = "Smith") {
    // ...
}
1
2
3