TS基础入门

TS最近几年越来越火，网上针对ts相关的学习资料也有很多，在此主要针对基本无相关经验并有ts开发需求的同学而定制。通过本文可以快速对TS有个整体的认识和掌握基础的用法。因为是入门指南，不会有较深入的东西，如已经有ts开发经验的同学，可以直接忽略。

先上一个入门参考指南 TypeScript中文网 [http://www.tslang.cn/docs/home.html]

TS是什么

安装教程见前面给的《TypeScript中文网》此处不再赘述

两个关键点

TS在js的基础上，提供了类型系统和对ES6的支持
TS通过编译工具编译成纯JS文件运行在浏览器或者nodejs和其他系统上

为什么用TS

优点

增强代码的可读性、可维护性和安全性
强兼容性
已经与前端主流框架相结合

缺点

有一定的学习成本
短期内会增加开发成本，但长期看会减少维护成本
集成到工程化需要额外的工作

通过优缺点，可以根据日常项目需求考虑是否需要使用ts。比如一个活动页面，完全不需要使用ts，会增加额外的成本。再比如一个付费系统，因为其安全性和长期性，最好只用ts。

基础用法

类型系统

先来一个简单的例子：

function add(x, y) {
    return x + y;
}

转化成TS写法

function add(x: number, y: number): number {
    return x + y;
}

看起来js改造成ts是不是很简单，所有变量都加上一个类型定义就解决了。下面就拆开来介绍一下：

“:” 冒号指定变量的类型，前后有没有空格都可以
```
  let isDone: boolean = false;
```
用:指定变量isDone的类型为布尔型。执行tsc编译后生成js代码
```
  var isDone = false;
```
TS只会进行静态检查，发现错误编译的时候会报错,即使报错了，还是会生成js文件

常用的变量类型

原始数据类型：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol
任意值： any允许赋值为任意类型

对象类型： ts中用接口Interfaces定义对象类型

简单的例子

interfaces Person {
      name: string,
      age: number
  }
  let tony: Person = {
      name: "Tony",
      age: 18
  }

定义的变量属性与接口不同的话会报错

数组类型：

  // 类型+方括号
  let numberArray: number[] = [1, 2, 3];
  // 数组泛型
  let numberArray: Array<number> = [1, 2, 3];
  // 接口表示 【略】不常用
  // 类数组
  function sum () {
      let args: {
          [index: number]: number,
          length: number,
          callee: Function
      }
      // let args: IArguments = arguments; IArguments是内置对象
  }

函数类型

  // 函数声明
  function sum(x: number, y: number): number {
      return x + y;
  }
  // 函数表达式
  let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
      return x + y;
  };
  // 接口定义函数
  interfaces OrderFunc {
      (x: number, y: number): boolean;
  }
  let numberOrderFunc: OrderFunc;
  numberOrder = function (x: number, y: number = 2) {
      return x - y;
  }

ts小白快速入门指南

目录

TS是什么

为什么用TS

优点

缺点

基础用法

类型系统

参考文档

CATALOG

FEATURED TAGS

FRIENDS