TypeScript基本用法和语法

一.TypeScript的简介 

1.什么是TypeScript?

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上TypeScript扩展了JavaScript的语法解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。

TypeScript是JavaScript的超集，他可以编译成纯JavaScript。

TypeScript可以在任何浏览器运行、任何计算机和任何操作系统上运行，并且是开源的

2.为什么要用TypeScript

开源

简单

TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。

兼容性好

TScript 是 JS的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JS，所以== TypeScript并不依赖于浏览器的支持，也并不会带来兼容性问题==。任何现有的JS程序可以不加改变的在TScript下工作。

3.TypeScript与js相比的优势

TypeScript工具使重构更变的容易、快捷。

TypeScript 引入了 JavaScript 中没有的“类”概念。

TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中

类型安全功能能在编码期间检测错误，这为开发人员创建了一个更高效的编码和调试过程。

二、TypeScript基础

1.定义变量

在TypeScript中定义变量需要指定 标识符 的类型。完整的声明格式如下：

声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解：var/let/const 标识符: 数据类型 = 赋值;

在TypeScript定义变量（标识符）和ES6之后一致，可以使用var、let、const来定义。

在tslint中并不推荐使用var来声明变量；

类型推导：TypeScript本身的 特性帮助我们推断出对应的变量类型：

var name: string = 'tjx'
let age: number = 18
const height: number = 1.88

// string 和 String 是有区别的：
// string: 表示typescript中的字符串类型
// String: 表示JavaScript的字符串包装类的类型
const message: string = "所以应该使用string"

// 类型推导/推断：默认情况下进行赋值时：会将赋值的值的类型，作为当前标识符的类型
let foo = "foo"
// foo = 123  不能将类型“number”分配给类型“string”。

2.JavaScript数据类型

typescript数据类型 包含JavaScript数据类型；

• number类型：TypeScript和JavaScript一样，不区分整数类型（int）和浮点型 （double），统一为number类型。而TypeScript也是支持二进制、八进制、十 六进制的表示；

// ts 不区分整型浮点型
let num: number = 123
num =222
// num = "dfjs" // 报错
// 十进制
let num1: number = 100
// 二进制
let num2: number = 0b111
// 八进制
let num3: number = 0o456
// 十六进制
let num4: number = 0xabc
console.log(num, num2, num3, num4);

• boolean类型：true和false

let flag: boolean = true
flag = 20 > 30

• string类型：string类型是字符串类型，可以使用单引号或者双引号表示；同时也支持ES6的模板字符串来拼接变量和字符串；

let message1 = 'hello world'
let message2 = 'hello world'
const name = 'tjx'
const age = 19
let message3 = `name:${name} age:${age}`
console.log(message3);

• array类型

// 可以确定是一个数组，但是不能确定数组中存放什么数据类型：一个数组中在typescript开发中，最好存放的数据类型是固定的
// const names = [] 
// 不好的习惯
// names.push('abc')
// names.push(123)
const names: Array<string> = [] // 不推荐（会在react的jsx中有冲突）
// names.push(123) 报错
const names2: string[] = [] // 推荐

• object类型

// const info: object = { // 不推荐这么写，如果这么写，info.name将不能取到值
const info = {
  name: 'tjx',
  age: 19
}

• Sysmbol类型

const title1 = Symbol("title")
const title2 = Symbol("title")
const info = {
  [title1]: '程序员',
  [title2]: '老师'
}

• null和undefined类型

// null 类型只有 null这一个值，并且最好指定一下，不要使用自推断
const n1: null = null
// undefined也只有一个值
const n2: undefined = undefined

3.Typescript数据类型

(1)any类型

在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型（类似 于Dart语言中的dynamic类型）。

可以对any类型的变量进行任何的操作，包括获取不存在的属性、方法；

可以给一个any类型的变量赋值任何的值，比如数字、字符串的值；

如果对于某些情况的处理过于繁琐不希望添加规定的类型注解，或者在引入一些第三方库时，缺失了类型注解，这个时候 我们可以使用any： 包括在Vue源码中，也会使用到any来进行某些类型的适配；

let message: any = "asf"
message = 123
message = true
message = {
}
console.log(message);