TypeScript简介及常用语法

什么是TypeScript

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。
TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。
TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。

TypeScript 主要有 3 大特点：

● 始于JavaScript，归于JavaScript
TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。
● 强大的类型系统
类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。
● 先进的 JavaScript
TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

安装TypeScript： npm install -g typescript

 vscode自动编译
1). 生成配置文件tsconfig.json
  tsc --init
2). 修改tsconfig.json配置
  "outDir": "./js",
  "strict": false, 
3). 启动监视任务:  终端 -> 运行任务 -> 监视tsconfig.json

常用语法：

类型注解 let mag: number = 21; 定义类型

接口 定义方法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))

类 定义类的方法，class 类名 {
属性：属性值 
constructor(构造器){this.属性 = 属性; super(用于继承父的属性，可写参数可不写);}
}
类的继承：class Dog extends Animal {}

TypeScript 常用语法，1. 基础类型 布尔型：let isDone: boolean = false;数字：number(进制0b二进，0o八进，0x十六进)，字符串
undefined 和 null，TypeScript 里，undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null。 它们的本身的类型用处不是很大
let u: undefined = undefined  let n: null = null
数组的两种写法let list1: number[] = [1, 2, 3]，let list2: Array<number> = [1, 2, 3]
元组 Tuple：元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string 和 number 类型的元组。
let t1: [string, number]，t1 = ['hello', 10] // OK，t1 = [10, 'hello'] // Error
枚举：enum 类型是对 JavaScript 标准数据类型的一个补充。 使用枚举类型可以为一组数值赋予友好的名字，enum Color {Red , Green, Blue}，let myColor: Color = Color.Green // 0
默认情况下，从 0 开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 1 开始编号：enum Color {Red = 1, Green, Blue}
any：可以是任何类型，void：不能是任何类型，/* 表示没有任何类型, 一般用来说明函数的返回值不能是undefined和null之外的值 */
声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null：let unusable: void = undefined
object 表示非原始类型，也就是除 number，string，boolean之外的类型：function fn2(obj:object):object 
联合类型： number | string，类型断言：方式一: <类型>值<string>x，方式二: 值 as 类型 tsx中只能用这种方式 x as string
类型推断：/* 定义变量时赋值了, 推断为对应的类型 */let b9 = 123，定义变量时没有赋值, 推断为any类型：let b10 // any类型
接口定义：?可选属性，readonly只读属性（最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用 readonly。）
interface IPerson {
 readonly id: number
  name: string
  age: number
  sex?: string
}                                                                                                                                                   参数类型                            返回值类型
函数的类型：接口可以描述函数类型(参数的类型与返回的类型)定义；interface SearchFunc { (source: string, subString: string): boolean }
使用：const mySearch: SearchFunc = function (source: string, sub: string): boolean {}
类类型，类实现接口
interface Alarm {
  alert(): any;
}

interface Light {
  lightOn(): void;
  lightOff(): void;
}

class Car implements（实现） Alarm { 
  alert() {
      console.log('Car alert');
  }
}
class Car2 implements Alarm, Light {

 alert() {
         console.log('Car alert');
 }

 lightOn() {
         console.log('Car light on');
 }

 lightOff() {
         console.log('Car light off');
 }
}