TypeScript教程(二)基础语法与基础类型

这篇具有很好参考价值的文章主要介绍了TypeScript教程(二)基础语法与基础类型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、基础语法

TypeScript由以下几个部分组成

1.模块

2.函数

3.变量

4.语句和表达式

5.注释

示例:

Runoob.ts 文件代码:

const hello : string = "Hello World!"
console.log(hello)

以上代码首先通过 tsc 命令编译:

tsc Runoob.ts

Runoob.js 文件代码: 

var hello = "Hello World!";
console.log(hello);

最后我们使用 node 命令来执行该 js 代码。

$ node Runoob.js
Hello World

tsc 常用编译参数如下表所示:

序号 编译参数说明
1.

--help

显示帮助信息

2.

--module

载入扩展模块

3.

--target

设置 ECMA 版本

4.

--declaration

额外生成一个 .d.ts 扩展名的文件。

tsc ts-hw.ts --declaration

以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。

5.

--removeComments

删除文件的注释

6.

--out

编译多个文件并合并到一个输出的文件

7.

--sourcemap

生成一个 sourcemap (.map) 文件。

sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。

8.

--module noImplicitAny

在表达式和声明上有隐含的 any 类型时报错

9.

--watch

在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。

TypeScript 保留关键字:

break as catch switch
case if throw else
var number string get
module type instanceof typeof
public private enum export
finally for while void
null super this new
in return true false
any extends static let
package implements interface function
do try yield const
continue

空白和换行:

TypeScript会忽略程序中出现的空格,制表符和换行符

空格,制表符通常用来缩进代码,使代码易于阅读和理解

TypeScript区分大小写字符

分号是可选的

单行指令都是一段语句,可以使用分号或不使用,建议使用

TypeScript与面向对象

面向对象是一种对现实世界理解和抽象的方法

TypeScript是一种面向对象的编程语言

面向对象主要有两个概念:对象和块

        对象:对象是类的一个实例,有状态和行为

        类:类是一个模板,描述的是一类对象的行为和状态

        方法:方法是类的操作的实现步骤

示例:

TypeScript面向对象编程

class Site { 
   name():void { 
      console.log("Runoob") 
   } 
} 
var obj = new Site(); 
obj.name();

以上示例定义了一个类Site,该类有一个方法name(),该方法在终端上输出字符串Runoob

new关键字创建类的对象,该对象调用方法name(),

编译后生成的JavaScript

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("Runoob");
    };
    return Site;
}());
var obj = new Site();
obj.name();

二、基础类型

数据类型 关键字 描述
任意类型 any 声明为 any 的变量可以赋予任意类型的值。
数字类型 number

双精度 64 位浮点值。它可以用来表示整数和分数。

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制
字符串类型 string

一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
布尔类型 boolean

表示逻辑值:true 和 false。

let flag: boolean = true;
数组类型

声明变量为数组。

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];
元组

元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob
枚举 enum

枚举类型用于定义数值集合。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
void void

用于标识方法返回值的类型,表示该方法没有返回值。

function hello(): void {
    alert("Hello Runoob");
}
null null

表示对象值缺失。

undefined undefined

用于初始化变量为一个未定义的值

never never

never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

注:TypeScript和JavaScript没有整数类型

1.Any类型

任意值是TypeScript针对编程时类型不明确的变量使用的一种数据类型

1.变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译器阶段的类型检查

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

2.改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

2.Null和Undefined

null

在JavaScript中null表示"什么都没有",是一个只有一个值的特殊类型,表示一个空对象的引用

用TypeScript检测null返回是object

undefined

在JavaScript中,underfined是一个没有设置值的变量

typeof一个没有值的变量会返回undefined

null和undefined是其他任何类型(包括void)的子类型,可以赋值给其他类型,

而在JavaScript中,启用严格的空校验(--strictNullChecks)特性,就可以使得null和underfined只能被赋值给void或本身对应的类型:

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误

上面例子的变量x只能是number类型,如果一个类型可能出现null或undefined,可以用 | 来支持多种类型

// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined;    // 编译正确
x = null;    // 编译正确

3.never类型

never是其他类型(包括null和undefined)的子类型,代表从不会出现的值,这意味着never只能被never类型所赋值,在函数中通常表现为抛出异常或无法执行到终点(例如无限循环)文章来源地址https://www.toymoban.com/news/detail-650467.html

let x: never;
let y: number;

// 编译错误,数字类型不能转为 never 类型
x = 123;

// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

到了这里,关于TypeScript教程(二)基础语法与基础类型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • TypeScript 基础语法

    1、基元类型 类型 例子 描述 number 1, -33, 2.5 任意数字 string ‘hi’, “hi”, `hi` 任意字符串 boolean true、false 布尔值true或false null 值只能为null undefined 值只能为undefined 字面量 其本身(详见 面向对象 15泛型) 限制变量的值就是该字面量的值 any * 任意类型 unknown * 类型安全的any,un

    2024年02月04日
    浏览(32)
  • 【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【TypeScript专栏】 上篇文章讲解了TypeScript部分高级类型 详细内容请阅读如下:🔽 【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可见性 今天来学习TypeScript另外一些高级类型! 感兴趣的小伙伴一起来

    2023年04月08日
    浏览(38)
  • TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!

    🎬 岸边的 风: 个人主页  🔥  个人专栏  : 《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! ​ TypeScript: 扩展 JavaScript 数据类型,赋予编程更强大的表达能力! 在现代Web开发中, TypeScript 已经成为了一种备受欢迎的编程语言。它不仅继承了 JavaScript 的

    2024年02月09日
    浏览(47)
  • 前端TypeScript学习day02-TS常用类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 TypeScript 常用类型 接口  元组  类型推论 类型断言 字面量类型 枚举 any 类型 typeof  当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到

    2024年02月08日
    浏览(52)
  • 前端TypeScript学习day03-TS高级类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)            目录 TypeScript 高级类型 class 类 class继承  extends implements  类成员可见性  public  protected  private   readonly 兼容性 类型兼容性 接口兼容性  函数兼容性  TypeScri

    2024年02月08日
    浏览(37)
  • TypeScript -- 基础类型

    错误示范 正确写法 布尔类型 – boolean 赋值为true 和 false 赋值为Boolean()对象 数字类型 – number 使用 number 定义数值类型 编译结果 字符串类型 – string 数组类型 「类型 + 方括号」 泛型 联合类型 元组类型 枚举类型 – enum 枚举定义 枚举项有两种类型:常数项(constant member)和

    2024年02月15日
    浏览(39)
  • 【TypeScript】基础类型

    https://nodejs.org/en 终端中可以查到版本号即安装成功。 然后,终端执行 npm i typescript -g 安装 TypeScript 。 查到版本号即安装成功。 终端中先执行 tsc --init ,然后执行 tsc -w 。发现原本TS文件夹中只有index.ts,现在多了两个文件。 再开一个终端,执行 即可输出。 同样支持模板字符

    2024年02月12日
    浏览(35)
  • TypeScript的基础类型

    1. boolean类型: boolean表示布尔值类型,即true和false。例: 2. number类型: number表示数字类型,包括整数和浮点数。例: 3. string类型: string表示字符串类型。例: 4. void类型: void表示没有返回值的函数类型。例: 5. null和undefined类型: null和undefined表示null和undefined值的类型。例

    2024年02月11日
    浏览(45)
  • Typescript基础知识(类型拓宽、类型缩小)

    引入一:Typescript基础引入(基础类型、元组、枚举) 引入二:Typescript面向对象引入(接口、类、多态、重写、抽象类、访问修饰符) 第一章:Typescript基础知识(Typescript介绍、搭建TypeScript环境、基本数据类型) 第二章:Typescript常用类型(任意值any、数组Array、函数Functio

    2024年02月12日
    浏览(46)
  • 前端TypeScript学习day04-交叉类型与泛型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)            目录 交叉类型 泛型 创建泛型函数 调用泛型函数: 简化调用泛型函数: 泛型约束  指定更加具体的类型 添加约束  泛型接口  泛型类 泛型工具类型  Partial 

    2024年02月08日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包