TypeScript基础学习

什么是typescript

  TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。

安装

  在终端中输入命令：

npm install -g typescript

  通过tsc -v可以查看安装的ts的版本。

编译

  新建ts文件，输入ts代码：let str: string = '你猜我猜不猜'，在cmd命令中，定位到目录，输入tsc 文件名，会在目录中生成一个同名的js文件，代码如下：var string = '你猜我猜不猜'。

编译选项

  1.outDir：自定义输出的JS文件的目录

tsc --outDir 文件目录 编译文件

  2.target：编译的js的版本，默认是es3

tsc --outDir 文件目录 --target es6 编译文件

  3.watch：监听，只要文件修改就进行编译

tsc --outDir 文件目录 --target es6 --watch 编译文件

简单编译

  为了避免编译的时候一直输命令，我们可以在项目的根目录下建立`tsconfig.json`文件，文件中输入：

{
    "compilerOptions": {
        "target": "ES5",
        "watch": true,
        "outDir": "./dist"
    },
    // 要编译文件的目录 **是子目录 *是文件 即src下的所有文件
    "include": ["./src/**/*"]         
}

  这样，直接在终端中输入tsc即可。

类型系统

  类型系统中包括类型标注和类型检测。类型标注是为了类型检测，添加类型检测是为了让数据使用安全，同时在使用IDE的过程中，还可以有智能提示。

标注类型

（1）基础类型

  1.string
  2.number
  3.boolean
  4.null
  5.undefined

  null和undefined类型不可以进行修改，但是可以把这两个类型赋给其他类型，在tsconfig.json文件中可以使用"strictNullChecks": true来有效的检测null值数据。

（2）非基础类型

  1.对象类型：Object

let obj: { x: number; y: number } = {
  x: 1,
  y: 2
};

  内置对象类型：

let d1: Date = new Date();

  2.数组类型：ts中的数组与js中的数组不同，ts中的数组要求数组存储类型必须一致，同事需标注数组中要存储的类型

let arr: string[] = [];

let arr1: Array<number> = [];

（3）其他类型

  1.元组类型：类似于数组，但是存储类型不必相同。初始化数据的个数以及对应位置标注类型必须一致，越界数据必须是元组标注类型之一

let data: [string, number] = ["好了吧", 100];
data.push(100); // 正确
data.push("100"); // 正确
// data.push(true)     // 错误

  2.枚举类型

enum 枚举名称 { key1 = value, key2 = value }

enum code {
  ok = 200, // 不赋值默认为0
  notFound = 404 // 不赋值默认为前一个的值+1
}

  key不能是数字，value可以是数字（数字类型枚举）或者字符串（字符串类型枚举）。

  3.无值类型：void

function fn(): void {}

  4.never类型：never类型是其他类型的子类，永远不可能执行return时，返回的就是never，比如抛出错误。

  5.任意类型：any

let a: any;

  any类型没有智能提示和类型检测，但是"noImplicitAny": true，有隐式any类型时会提示。

  6.未知类型unknow：仅能赋值给unknow或any，是一种安全的any类型

  7.函数类型

function add(x: number, y: number): number {         // add 函数名称    number 参数类型和返回值类型
  return x + y;
}

（4）包装对象String：string是String的子类

接口

interface interf {
  x: number;
  y: number;
}

let p1: interf = {
  x: 1,
  y: 1
};

  具有可选属性？，只读属性readonly，任意属性。

总结

  TypeScript作为一种给JavaScript添加特性的语言扩展，需要我们不断的去学习它。