TS 入门（一）

什么是TypeScript

https://www.tslang.cn/

TypeScript是Microsoft公司注册商标。

TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。

安装TypeScript

1、在全局环境里安装TS

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

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

src/01app.ts 文件：

// src/01app.ts
let title: string = '家里蹲'
           

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

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

5分钟了解TypeScript

构建第一个TypeScript文件

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

// src/02gretter.ts
// 请问该函数有返回值吗？是什么数据类型
// 请问该函数有没有参数，参数是什么数据类型
// 参数为string类型，函数的返回值为string类型
function greeter (person: string): string {
  return 'hello' + person
}

const person = 'zxp'

greeter(person)

           

类型注解

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

// src/02gretter.ts
// 请问该函数有返回值吗？是什么数据类型
// 请问该函数有没有参数，参数是什么数据类型
// 参数为string类型，函数的返回值为string类型
function greeter (person: string): string {
  return 'hello' + person
}

// const person = 'zxp'
// greeter(person)

const user = [0, 1, 2]
greeter(user)

           

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

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

// src/02gretter.ts
// 请问该函数有返回值吗？是什么数据类型
// 请问该函数有没有参数，参数是什么数据类型
// 参数为string类型，函数的返回值为string类型
// function greeter (person: string): string {
//   return 'hello' + person
// }

// const person = 'zxp'
// greeter(person)

// const user = [0, 1, 2]
// greeter(user)

// person: (person: string) => string  ===> 说明函数的返回值为sting类型
// function (person: string): string ===》  说明函数的返回值为sting类型
// const greeter: (person: string) => string = function (person: string): string {
//   return 'hello' + person
// }

// (person: string) => string   => 说明的是函数的返回值类型
// 后面的 => 代表的函数的箭头函数
// const greeter = () => {}
const greeter: (person: string) => string = (person: string): string => {
  return 'hello' + person
}
           

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

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

接口

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

// src/03index.ts

// 接口的首字母大写
// 一般以I开头
// 接口不是js的对象，元素之间需要使用; 或则 ，隔开或者是可以不用写
interface IPerson { // 接口
  firstName: string
  lastName: string
}

const greeter1 = (person: IPerson): string => {
  return 'hello' + person.firstName + person.lastName
}

const person1 = { firstName: 'z', lastName: 'xp' }

greeter1(person1)
           

类

最后，让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。让我们创建一个Student类，它带有一个构造函数和一些公共字段。 注意类和接口可以一起工作。

还要注意的是，在构造函数的参数上使用public等同于创建了同名的成员变量。

***注：***public修饰符会引发

Parameter 'firstName' implicitly has an 'any' type.

，解决方法是在

tsconfig.json

文件中，添加

"noImplicitAny": false

，或者将

"strict": true

，改为

"strict": false

// src/04student.ts
// constructor 如果有 public 字样，表示自动给代码添加了 相应的成员变量
class Student {
  fullName: string;
  // fistName: string;
  // lastName: string;
  constructor (public firstName: string, public lastName: string) {
    this.fullName = this.firstName + this.lastName
  }
}

interface IPerson {
  firstName: string;
  lastName: string;
}

function greeter2 (person: IPerson) {
  return 'hello' + person.firstName + person.lastName
}

let user = new Student('z', 'xp')

greeter2(user)