安装TypeScript

1、在全局环境里安装TS

$ cnpm install -g typescript
$ tsc -v
# Version 5.0.4

2、用 tsc 命令编译 .ts 文件

src/01app.ts 文件：

// 定义了一个 string类型的 变量

在命令行里输入以下命令都可以将.ts文件编译为.js文件：

# 使用tsc指令将src文件夹下的 01app.ts 文件转换输出到 dist目录下的app.js
$ tsc ./src/01app.ts --outFile ./dist/01app.js
$ tsc ./src/01app.ts --outDir ./dist

5分钟了解TypeScript

构建第一个TypeScript文件

在编辑器，将下面的代码输入到 src/02greeter.ts 文件里。我们注意到 person: string，表示 string 是 person 函数的参数类型注解：

// function greeter (a, b, c) {}
// function greeter (a: string, b: number, c: boolean) {}
// function greeter (a: string, b: number, c: boolean): string {} 函数的返回值为string类型
// function test (): void {} void 代表该函数没有返回值
function greeter (person: string): string {
   
  return 'hello' + person
}

console.log(greeter('成三岁'))

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里，我们希望 greeter函数接收一个字符串参数。 然后尝试把 greeter的调用改成传入一个数组：

// function greeter (a, b, c) {}
// function greeter (a: string, b: number, c: boolean) {}
// function greeter (a: string, b: number, c: boolean): string {} 函数的返回值为string类型
// function test (): void {} void 代表该函数没有返回值
function greeter (person: string): string {
   
  return 'hello' + person
}

console.log(greeter('成三岁'))
// Argument of type 'number' is not assignable to parameter of type 'string'.
// 类型“number”的参数不能赋给类型“string”的参数
// console.log(greeter(100))

重新编译，你会看到产生了一个错误：

Argument of type 'number' is not assignable to parameter of type 'string'.

// function greeter (a, b, c) {}
// function greeter (a: string, b: number, c: boolean) {}
// function greeter (a: string, b: number, c: boolean): string {} 函数的返回值为string类型
// function test (): void {} void 代表该函数没有返回值

// 声明式函数 
// function greeter (person: string): string {
   
//   return 'hello' + person
// }

// 定义了变量 该变量是一个函数
// const greeter: (person: string) => string 定义了一个函数，且该函数有string类型的参数，并且函数的返回值为 string
// 此处的 =>  不是箭头函数 表示ts的函数的返回值类型
// const greeter: (person: string) => string = function (person: string): string {
   
//   return 'hello' + person
// }

// const greeter =  (person) => {
   
//   return 'hello' + person
// }

// 第一个 => 表示函数的返回值为 string
// 第二个 => 表示此处是一个函数
const greeter: (person: string) => string  =  (person: string):string => {
   
  return 'hello' + person
}

console.log(greeter('成三岁'))
// Argument of type 'number' is not assignable to parameter of type 'string'.
// 类型“number”的参数不能赋给类型“string”的参数
// console.log(greeter(100))

类似地，尝试删除greeter调用的所有参数。 TypeScript会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误，greeter.js文件还是被创建了。 就算你的代码里有错误，你仍然可以使用TypeScript。但在这种情况下，TypeScript会警告你代码可能不会按预期执行。

接口

让我们开发这个示例应用。这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

// 如果要给某一个位置添加 对象的类型， 使用接口去解决文通
interface IUser {
    // 实际上就相当于你自己定义了一个数据类型
  firstName: string; // 结尾 可以 什么也不写，也可以写为 ， 还可以写为;
  lastName: string;
}

// // user 是一个对象 需要通过 接口 来定义对象的数据类型
// function greeter1 (user: IUser): string {
   
//   return 'hello' + user.firstName + ' ' + user.lastName
// }


// function greeter1 (user: { firstName: string, lastName: string }): string {
   
//   return 'hello' + user.firstName + ' ' + user.lastName
// }


const greeter1: (user: IUser) => string  = (user: IUser): string => {
   
  return 'hello' + user.firstName + ' ' + user.lastName
}
console.log(greeter1({
    firstName: 'mou', lastName: 'link'}))