乐趣区

TypeScript基础指南基本类型声明1

jiezi

什么是 TypeScript

TypeScript 并不是一个完全新的语言，它是 JavaScript 的超集，为 JavaScript 的生态增加了类型机制，并将最终代码编译成纯粹的 JavaScript 代码。

为什么要用 ts?

首先 JavaScript 代码是一门弱类型语言，没有很大的约束力，只有执行的时候才能确定变量的类型，这中开发方式，很容易在后期编译过程中出现不可预知的某些问题，降低开发效率。所以 TypeScrpit 的类型机制可以有效杜绝由变量类型引起的误用问题，而且开发中可以积极的控制对于类型的监控，严格限制变量还是宽松变量。

数据类型

String 类型

字符串类型：string

let username: string = "Kisn"

Boolean 类型

布尔型：true/false

let isBool : boolean = flase;

Number 类型

数字类型：二进制、十进制、八进制、十六进制

let decLiteral: number = 6;
let hexLiteral: number = 0xff0d;
let binaryLiteral: number= 0b1010;
let octalLiteral: number = 0o744;

举例

编译前 TypeScript

guide0626.ts

let username: string = 'Kisn',
  age: Number = 24,
  isMan: boolean = true,
  descripts: String = ` 我的名字是 ${username}，年龄 ${age}, 性别为 ${getSex(isMan)}`

function getSex(i: boolean) {
  let sexStr = '女'
  if (i) {sexStr = '男'}

  return sexStr
}

console.log(descripts)

进行编译

tsc guide0626.ts

编译后 JavaScript

guide0626.js

var username = 'Kisn', age = 24, isMan = true, descripts = "\u6211\u7684\u540D\u5B57\u662F" + username + "\uFF0C\u5E74\u9F84" + age + ",\u6027\u522B\u4E3A" + getSex(isMan);
function getSex(i) {
    var sexStr = '女';
    if (i) {sexStr = '男';}
    return sexStr;
}
console.log(descripts);

数组

ts 像 js 一样可以操作数组元素。有两种方式可以使定义数组。功存在 2 中类型定义方法；

// 定义数组类型[]
let list: number[] = [1,2,3]

// 使用数组泛型，Array< 元素类型 >
let lsit:Array<number> = [1,2,3]

元组 Tuple

元组类型允许标示一个已知元素数量和类型的数组，各元素的类型不必相同。

// 声明一个元组
let x: [string, number] 
// 实例化 
x = ['Kisn', 10] // OK
x = [10, 'Kisn'] // Error

当访问一个已知索引的元素，会得到正确的类型：

console.log(x[0].substr(1)) // 正确
console.log(x[1].subsrt(1)) // 错误，因为 x[1]声明的是 number 类型

当访问一个越界的元素，会使用联合类型替代：

x[3] = 'world' // 正确，字符串可以赋值给(string | number) 类型

console.log(x[5].toString()) // 正确，string 和 number 都可有 toString 的方法

x[6] = true // 错误，布尔不是（string | number）类型

枚举 enum

enum类型是对 JavaScript 标准数据类型的一个补充。像 C# 等其他语言一样，使用枚举类型可以作为一个数值赋予友好的名字。

enum Color {Red , Green , Blue}

let c: Color = Color.Green;

编译后的 JavaScript

var Color;

(function(Color) {Color[(Color['Red'] = 0)] = 'Red'
  Color[(Color['Green'] = 1)] = 'Green'
  Color[(Color['Blue'] = 2)] = 'Blue'
})(Color || (Color = {}))

var c = Color.Green

默认情况下，enum 的原元素编号从 0 开始，你可以手动指定成员的数值。

// Red 的 index 为 2, 后面以次为 3，4
enum Color {Red = 2, Green, Blue} 
let c: Color = Color.Green;

编译后的 JavaScript

var Color;

(function(Color) {Color[(Color['Red'] = 2)] = 'Red'
  Color[(Color['Green'] = 3)] = 'Green'
  Color[(Color['Blue'] = 4)] = 'Blue'
})(Color || (Color = {}))

var c = Color.Green

或者我们可以手动赋值

// Red 的 index 为 2, 后面以次为 5，9
enum Color {Red = 2, Green = 5, Blue = 9} 
let c: Color = Color.Green;

最后，枚举类型提供的一个便利是你可以由枚举的值得到它的名字。假如，我们已知数值为 2，但是不能它映射到 Colro 里的哪个名字，我们可以通过以下代码查找相依的名字：

enum Color {Red = 1, Green, Blue = 4}

let ColorName: string = Color[2];

console.log(colorName); // 显示 'Green' 因为上面代码它的值是 2
退出移动版