安装与调试

• 安装

npm install typescript@2.9.2 -g
npm install ts-node@7.0.0 -g

注意记下 ts-node 安装后的可执行文件路径，后面要用的。

• 调试

1. 下载 vscode

   1. 按 ctrl+K ctrl+S
   2. 将格式化文件的快捷键绑定到自己喜欢的按键（我用的是 ctrl+L）

2. 创建文件夹 tsdemo

3. 用 vscode 打开 tsdemo 目录

4. 创建 tsdemo/1.ts 作为我们的第一个 TS 文件

5. 在文件里写一句 console.log(1) 保存

6. Windows 用户注意了，这里需要单独运行一些命令（Linux 用户和 macOS 用户不用执行）

    npm init -y
    npm i -D ts-node typescript
   
   

7. 创建 tsdemo/.vscode/launch.json 文件，内容如下

    {
        "configurations": [
            {
            "name": "ts-node",
            "type": "node",
            "request": "launch",
            "program": "注意看这里，要写成ts-node对应的可执行文件，Windows 用户注意了，你应该写成 ${workspaceRoot}/node_modules/ts-node/dist/bin.js",
            "args": ["${relativeFile}"],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
            }
        ]
    }
   
   

8. 打开 tsdemo/1.js，找到调试选项，选择 ts-node，然后点击调试

   

9. 然后你就可以看到 console.log(1) 的输入结果了（请确保你选中的是 tsdemo/1.ts）

   

以官网的一个案例为例：

• greeter.ts

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

let user = "Jane User";

document.body.textContent = greeter(user);

运行

tsc greeter.ts

补充：tsc是将ts编译成js的编译器，因为js可以在浏览器中运行，而ts不能再浏览器中运行
运行完这个命令后我们的项目里会多一个greeter.js文件

继续改造我们的ts代码

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

let user = "Jane User";

document.body.textContent = greeter(user);

这时候我们如果把user改成一个数组，而不是字符串

let user = [1,2,3]

再次进行编译就会报错

因为我们的参数需要的是一个string类型可我们声明的是数组

也就是当我们运行tsc的时候实际上它会首先进行类型检查
用js和ts做类型检查的区别

//js
function greeter(person) {
    if(typeof person !== 'string') {
        throw new Error('person 必须是一个字符串')
    }
    return "Hello, " + person;
}

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

用js检查：是执行到那一行的时候才会报错，也就是上面我们调用greeter这个方法的时候，而且是在浏览器中运行的时候（也就是代码上传到服务器后）的错误
用ts检查：在代码编译时就会报错，也就是在代码上传到服务器之前，在没给用户用之前就能知道我们的代码错了

class Student {
    fullName: string;
    firstName: string;
    middleInitial: string;
    lastName: string;
    constructor(firstName, middleInitial, lastName) {
        this.firstName = firstName
        this.middleInitial = middleInitial
        this.lastName = lastName
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
// 等价于
// class Student {
//     fullName: string;
//     constructor(public firstName: string, public middleInitial: string, public lastName: string) {
//         this.fullName = firstName + " " + middleInitial + " " + lastName;
//     }
// }

如果constructor里面的参数和外面的公有名字是一样的可以直接简写成public

指定类型
指定函数的返回值类型
1.基本用法

function min(a, b): number {
  return 2
}

上面代码指定函数返回值类型是number
2.函数参数支持多类型（重载）

function add(a: string, b: string): string;
function add(a: number, b: number): number;
function add(a: any, b: any): any {
    return a + b
}
console.log(add('王','立发'))

这里要注意支持多类型最后必须要单独再写一个各个参数都是any的，意思就是上面的任何类型都支持，否则会报错

元祖：示一个已知元素数量和类型的数组，各元素的类型不必相同

interface Person {
    gender: string
}
function merry(a: Person, b: Person): [Person, Person] {
    if (a.gender !== b.gender) {
        return [a,b]
    } else {
        throw new Error('不能结婚')
    }
}
let a = { gender: '男' }
let b = {gender: '女'}
console.log(merry(a,b))

上面的代码如果是不同的性别就会打印出一个数组，如果相同就会抛出错误
问题：如果我们写的不是男和女，也会打印出来，我们只想让他写对应的两种，这个时候我们就可以用枚举

enum Gender {
    男,
    女
}
interface Person {
    gender: Gender
}
function merry(a: Person, b: Person): [Person, Person] {
    if (a.gender !== b.gender) {
        return [a,b]
    } else {
        throw new Error('不能结婚')
    }
}
let a = { gender: Gender.男 }
let b = {gender: Gender.女}