TypeScript基础指南-基本类型声明（1）

2024年1月13日 189次阅读 来源: Kisnnnn

什么是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
    原文作者：Kisnnnn
    原文地址: https://segmentfault.com/a/1190000019590453
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞