TypeScript基础指南-基本类型声明(1)

栏目: JavaScript · 发布时间: 5年前

内容简介:TypeScript并不是一个完全新的语言,它是JavaScript的超集,为JavaScript的生态增加了类型机制,并将最终代码编译成纯粹的JavaScript代码。首先JavaScript代码是一门弱类型语言,没有很大的约束力,只有执行的时候才能确定变量的类型,这中开发方式,很容易在后期编译过程中出现不可预知的某些问题,降低开发效率。所以TypeScrpit的类型机制可以有效杜绝由变量类型引起的误用问题,而且开发中可以积极的控制对于类型的监控,严格限制变量还是宽松变量。字符串类型:string

什么是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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深度学习框架PyTorch:入门与实践

深度学习框架PyTorch:入门与实践

陈云 / 电子工业出版社 / 2018-1 / 65

《深度学习框架PyTorch:入门与实践》从多维数组Tensor开始,循序渐进地带领读者了解PyTorch各方面的基础知识。结合基础知识和前沿研究,带领读者从零开始完成几个经典有趣的深度学习小项目,包括GAN生成动漫头像、AI滤镜、AI写诗等。《深度学习框架PyTorch:入门与实践》没有简单机械地介绍各个函数接口的使用,而是尝试分门别类、循序渐进地向读者介绍PyTorch的知识,希望读者对PyT......一起来看看 《深度学习框架PyTorch:入门与实践》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具