ts学习笔记-基础

1.ts包含es6以及js。

1.1安装ts

npm install -g typescript

安装完成后 在控制台运行如下命令。检测是否成功

tsc -V 

1.2

在html文件中。直接引入ts的代码是会报错的。除非ts文件里只包含单纯的js的代码。也可以在vscode的控制台。用命令编译一下ts文件。例如。就可以转换成一个同名字的js文件了。就可以引入到html中使用了。

tsc helloworld.ts

1.3 ts文件文件中函数的形参，如果使用了某个类型进行修饰，那么最终在编译的js文件中是没有这个类型的。 例如下面的例子中string在编辑的js文件中是不显示的。

function sayHi(str:String){

return '你好'+str

}

1.4 ts文件中的变量是用let来进行修饰的。那么编译后的js文件会变成var。

以上是ts的手动编译

1.5 ts的自动编译

在控制台输入以下代码。生成配置文件tsconfig.json

tsc --init

修改tsconfig.json配置
    "outDir": "./js",/* 把ts文件最终编译后放在js的目录中 */
    "strict": false,/* 不使用严格模式 */

修改完配置之后。在vscode中选择终端菜单->运行任务-> 显示所有任务->监视tsconfig.json。然后就可以index.ts文件了。在ts文件编写代码的时候。会自动的生产js文件夹。里面生成index.js文件。然后在html中引入js文件夹下的index.js文件就可以了。

1.6 ts的类型注解 

接下来让我们看看 TypeScript 工具带来的高级功能。 给 person 函数的参数添加 : string 类型注解，如下：

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

let user = 'Yee'

console.log(greeter(user))

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

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

let user = [0, 1, 2]

console.log(greeter(user))

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

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

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

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

1.7 接口

接口是一种能力，一种约束而已。示例如下

interface Person {
  firstName: string
  lastName: string
}

function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = {
  firstName: 'Yee',
  lastName: 'Huang'
}

console.log(greeter(user))

 

最后，让我们使用类来改写这个例子。 TypeScript 支持 JavaScript 的新特性，比如支持基于类的面向对象编程。

让我们创建一个 User 类，它带有一个构造函数和一些公共字段。因为类的字段包含了接口所需要的字段，所以他们能很好的兼容。

还要注意的是，我在类的声明上会注明所有的成员变量，这样比较一目了然。

class User {
  fullName: string
  firstName: string
  lastName: string

  constructor (firstName: string, lastName: string) {
    this.firstName = firstName
    this.lastName = lastName
    this.fullName = firstName + ' ' + lastName
  }
}

interface Person {
  firstName: string
  lastName: string
}

function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = new User('Yee', 'Huang')

console.log(greeter(user))

重新运行 tsc greeter.ts，你会看到 TypeScript 里的类只是一个语法糖，本质上还是 JavaScript 函数的实现。