美文网首页我爱编程
TypeScript 基本数据类型+基本数据结构

TypeScript 基本数据类型+基本数据结构

作者: 神秘者007 | 来源:发表于2018-03-19 19:35 被阅读453次

概要

image.png

参考网址:https://www.tslang.cn/docs/handbook/basic-types.html

需要注意的是:

  • 下面的源码都是以 .ts 结尾的 typescript 文件,需要执行的话需要进行编译
  • 这里我使用的是 npm 安装的 typescript 然后进行编译的
//安装
npm install -g typescript
//编译命令示例  之后会自动的在同级目录下生成 BooleanDemo.js 文件
tsc BooleanDemo.ts

基本数据类型

Boolean

// let isDone:boolean = false;//false
// let isDone:boolean = true;//true
let isDone:boolean;//undefined  所以在初始化的时候一定要给一个初始化的值 true || false
function tell() {
    alert(isDone);
}
tell();

Number

let num:number = 5;//5

function tell() {
    num++;//6
    alert(num);
}
tell();

String

let str:string = 'xiaochuan';//xiaochuan

function tell() {
    str+='sun';//xiaochuansun
    alert(str);
}
tell();

Any

// 有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量:
let notSure:any = 10;
notSure = "hello";
notSure = false;

//再定义一个数组
let list:any[] = [1,'xiao',false];

function tell() {
    // alert(notSure);//最后输出的是 false
    alert(list[1]);//xiao
}
tell();

Viod

// 某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void

//当函数需要返回一个 string 类型的值时需要写 string
function tell():string {
    return 'xiaochuan';
}
//当函数需要返回一个 number 类型的值时需要写 number
function say():number{
    return 10;
}
//当函数不需要返回任何一个值时需要写 void 
function tell1():void{
    alert();
}

  • 上面相应测试所用的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TypeScript基础数据类型 Boolean Number String Any</title>
    <!-- <script type="text/javascript" src="BooleanDemo.js"></script> -->
    <!-- <script type="text/javascript" src="NumberDemo.js"></script> -->
    <!-- <script type="text/javascript" src="StringDemo.js"></script> -->
    <script type="text/javascript" src="AnyDemo.js"></script>
</head>
<body>

</body>
</html>

基本数据结构

Array

//第一种声明方法
let list1:number[] = [1,2,3];
//第二种声明方法
let list2:Array<string> = ['sun','xiao','chuan'];

function tell() {
    alert(list1[0]);//1
    alert(list1[1]);//2
    alert(list1[2]);//3
}
// tell();

function say(){
    alert(list2[0]);//sun
    alert(list2[1]);//xiao
    alert(list2[2]);//chuan
}
say();

Enum

//枚举
//第一种未设置下标默认从 0 开始
// enum Color{Red,Green,Blue};
// let colorName:string = Color[1];//Green

//第二种 设置第一个元素的下标为 1 则从 1 开始
// enum Color{Red = 1,Green,Blue};
// let colorName:string = Color[1];//Red

//第三种 设置多个元素的下标进行获取
// enum Color{Red = 5,Green = 10,Blue = 15};
// let colorName:string = Color[10];//Green

//如何获取元素的下标
enum Color{Red,Green,Blue};
let c:Color = Color.Green;//1

function tell() {
    //获取元素的名称
    // alert(colorName);
    //获取下标
    alert(c);
}
tell();

  • 上面相应测试所用的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TypeScript基础数据结构 Array Enum(枚举)</title>
    <!-- <script type="text/javascript" src="ArrayDemo.js"></script> -->
    <script type="text/javascript" src="EnumDemo.js"></script>
</head>
<body>

</body>
</html>

总结

  • Boolean 布尔类型
  • Number 数字类型
  • String 字符串类型
  • Array 数组
  • Enum 枚举
  • Any 任意类型
  • Viod 函数不需要返回值时使用

相关文章

  • typescript基本特性了解

    本文主要给大家介绍typescript的基本特性。 1、typeScript中的数据类型 typescript中为...

  • Typescript 学习笔记

    TypeScript 学习笔记 一、基本数据类型 基本数据类型与 JavaScript 一致,包含了 number...

  • TypeScript 基本数据类型+基本数据结构

    概要 参考网址:https://www.tslang.cn/docs/handbook/basic-types.h...

  • 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...

  • 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...

  • 前端面试题

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...

  • Java复习提纲

    基本数据类型了解掌握java基本数据结构int,float,double,long,long long,char。...

  • 1st Day 数据类型

    *** typeScript基本数据类型 ***undefined和null 是所有类型的子类型 可以任意赋值

  • 初识typescript

    基本数据类型 TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们...

  • TypeScript基本数据类型

    基本类型 Typescript中基本类型有: 布尔类型 Boolean 数字类型 Number 字符串类型 Str...

网友评论

    本文标题:TypeScript 基本数据类型+基本数据结构

    本文链接:https://www.haomeiwen.com/subject/doapqftx.html