TypeScript入门学习

举报
zekelove 发表于 2021/12/28 21:36:41 2021/12/28
【摘要】 TypeScript在前端开发中也越来越流行了,它更加符合面向对象的方式开发,可以在React,Vue,Angular三大框架中使用,还可以在nodejs,asp.net core等语言中使用。它具有类型系统,且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。

TypeScript在前端开发中也越来越流行了,它更加符合面向对象的方式开发,可以在React,Vue,Angular三大框架中使用,还可以在nodejs,asp.net core等语言中使用。它具有类型系统,且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。

安装TypeScript

1.通过 npm 安装。

npm install -g typescript

2.安装Visual Studio的TypeScript插件。(使用VS2015 或 vs2017 开发者)

基础类型

TypeScript支持与JavaScript几乎相同的数据类型,并且它提供了实用的枚举类型。

1.数字

它所有数字都是浮点数,类型就是 number,除了支持十进制和十六进制字面量,还支持二进制和八进制字面量。

let num: number = 6;
let hexNum: number = 0xf00c;  // 十六进制

2.字符串

表示文本数据类型,类型就是 string,可以使用双引号(")或单引号(')表示字符串。

let name: string = "test";
name = "go";

表示模板字符串,可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围(`),并且以${ expr }这种形式嵌入表达式。

let name: string = `Tom`;
let welcome: string = `Hello, welcome ${ name }`;

3.布尔值

表示简单的 true/false 值,类型就是 boolean。

let isGo: boolean = false;

4.数组

它可以操作数组元素,有两种方式定义数组。一种是可以在元素类型后面接上[],表示由此类型元素组成的一个数组。

let arr: number[] = [1, 2, 3];

另外一种是使用数组泛型,Array<元素类型>

let list: Array<number> = [1, 2, 3];

5.元祖 Tuple

它允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。如:可以定义一对值分别为stringnumber类型的元组。

let x: [string, number];
x = ['test', 5]; 

6.枚举

它是标准数据类型的一个补充,类型 enum,使用枚举类型可以为一组数值赋予友好的名字。

enum Animal {cat, dog, tigger}
let x: Animal = Animal.cat;

默认情况下,从0开始为元素编号,你也可以手动指定成员的值。

enum Animal {cat = 1, dog = 2, tigger}
let x: Animal = Animal.cat;
let animalName: string = Animal[2];  

7.任意值

有时候想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。这时候就可以使用any类型来标记这些变量。

let notType: any = 2;
notType= "maybe a string";
notType= false; 

8.空值

它表示没有任何类型。 当一个函数没有返回值时,你会见到它的返回值类型是void

function run(): void {
    alert("He is running");
}

声明一个void类型的变量没有大的作用,因为你只能为它赋予undefinednull

let none: void = undefined;

9.Never

表示那些永不存在的值的类型,类型 never。never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;变量也可能是never类型,当它们被永不为真的类型保护所约束时。

function error(message: string): never {
    throw new Error(message);
}

温馨提示

文章内容如果写的存在问题欢迎留言指出,让我们共同交流,共同探讨,共同进步~~~

文章如果对你有帮助,动动你的小手点个赞,鼓励一下,给我前行的动力。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。