好得很程序员自学网
  • 首页
  • 后端语言
    • C#
    • PHP
    • Python
    • java
    • Golang
    • ASP.NET
  • 前端开发
    • Angular
    • react框架
    • LayUi开发
    • javascript
    • HTML与HTML5
    • CSS与CSS3
    • jQuery
    • Bootstrap
    • NodeJS
    • Vue与小程序技术
    • Photoshop
  • 数据库技术
    • MSSQL
    • MYSQL
    • Redis
    • MongoDB
    • Oracle
    • PostgreSQL
    • Sqlite
    • 数据库基础
    • 数据库排错
  • CMS系统
    • HDHCMS
    • WordPress
    • Dedecms
    • PhpCms
    • 帝国CMS
    • ThinkPHP
    • Discuz
    • ZBlog
    • ECSHOP
  • 高手进阶
    • Android技术
    • 正则表达式
    • 数据结构与算法
  • 系统运维
    • Windows
    • apache
    • 服务器排错
    • 网站安全
    • nginx
    • linux系统
    • MacOS
  • 学习教程
    • 前端脚本教程
    • HTML与CSS 教程
    • 脚本语言教程
    • 数据库教程
    • 应用系统教程
  • 新技术
  • 编程导航
    • 区块链
    • IT资讯
    • 设计灵感
    • 建站资源
    • 开发团队
    • 程序社区
    • 图标图库
    • 图形动效
    • IDE环境
    • 在线工具
    • 调试测试
    • Node开发
    • 游戏框架
    • CSS库
    • Jquery插件
    • Js插件
    • Web框架
    • 移动端框架
    • 模块管理
    • 开发社区
    • 在线课堂
    • 框架类库
    • 项目托管
    • 云服务

当前位置:首页>前端开发>javascript
<tfoot draggable='sEl'></tfoot>

TypeScript简单介绍

 

1.0 TypeScript语言简单说明

简单说明

TypeScript 是微软2012年推出的一种编程语言,属于 JavaScript 的超集,可以编译为 JavaScript 执行。它最大特点是强大的类型系统和对ES6的支持,TypeScript托管于 GitHub上面 。

TypeScript代码,通过编译可以转换为纯正的 JavaScript代码,且编译出来的 JavaScript代码能够运行在任何浏览器上。TypeScript 的编译工具也可以运行在任何服务器和任何系统上。

设计目标

TypeScript从一开始就提出了自己的设计目标,主要如下:

遵循当前以及未来出现的ECMAScript规范 。 为大型项目提供构建机制(通过Class 、接口和模块等支撑)。 兼容现存的JavaScript代码,即任何合法的JavaScript程序都是合法的typeScript程序。 对于发行版本的代码没有运行开销。(使用过程可以简单划分为程序设计阶段和执行阶段)。 成为跨平台的开发工具,TypeScript使用Apache作为开源协议,且能够在所有主流的操作系统上安装和执行。

TypeScript的优势

拥有活跃的社区支持和生态 增加了代码的可读性和可维护性 拥抱 ES6 规范,也支持ES7 草案的规范 TypeScript本身非常包容,兼容所有现行的JavaScript代码

TypeScript的劣势

短期投入到工作可能增加开发成本 集成到自动构建流程中需要额外的工作量 学习需要成本,需要理解接口、Class、泛型等知识

关于TypeScript更多信息,请参考 TypeScript官网 和 TypeScript中文网站 或 TypeScript Github托管仓库 。

2.0 开发环境和工具支持

命令行工具

安装命令: $ npm install -g typescript

-g表示全局安装,上面的命令执行后会在全局环境下安装 tsc 命令。

查看版本信息命令: $ tsc --version

可以通过 $ tsc --help 来查看tsc使用帮助,通过 $ tsc --version 命令来查看tsc版本验证是否安装成功,当前最新的版本为 Version 2.9.1 ,安装成功后我们就可以在任何地方来执行 tsc 命令了。

typeScript文件的后缀为.ts。

我们可以通过在命令行中输入 $ tsc xxx.ts 命令来把文件编译为JavaScript文件,上述命令中xxx为对应文件的名称,编译完成后将得到xxx.js文件。

编辑器使用

主流的编辑器都支持 TypeScript 。下面列出推荐的编辑器(点击获取编辑器或IDE对TypeScript的支持)

Atom   21世纪黑客文本编辑器(拥有众多强大插件)
WebStorm  强大的前端开发编辑器
Visual Studio Code  内置了TypeScript支持,且本身也由TypeScript实现。

3.0 TypeScript组件

TypeScript语言内部被划分为三层,每层又被一次划分为子层或者是组件。


TypeScript语言内部的每一层都有自己不同的用途。

语言层 :实现所有TypeScript的语言特性。
编译层 :执行编译和类型检查操作,并把代码转换为JavaScript。
语言服务层 :生成信息以帮助编辑器或其它开发工具提供更好的辅助特性。

4.0 基本的数据类型

 像JavaScript,TypeScrip也有自己的数据类型,数据类型和JavaScript只是稍有不同,主要有

布尔类型(boolean)、数值类型(number)、字符串类型(string)、数组类型(array)、void类型以及枚举类型 。

数值(number)
数值类型等同于JavaScript中的number类型,在TypeScript中所有的数字都是浮点数,它们全部都是number类型的。

除了支持十进制和十六进制字面量,TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

 let decLiteral:  number =  6; 
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

 

字符串(string)
连续的一个或多个字符,在代码中需要使用单引号或双引号包住,可以交叉。

 let name: string = "bob" ;
name  = "smith";

//还可以使用 模版字符串 ,它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围(  ` ),并且以 ${ expr } 这种形式嵌入表达式
   let name:  string =  `Gene`;
 let age:  number =  37;
 let sentence:  string =  `Hello, my name is  ${ name }.
I'll be  ${ age + 1 } years old next month.`;             

 

布尔类型(boolean)
布尔类型有两个可选的值,true或false。

 let bool1: boolean  =  true  ;
let bool2:  boolean  =  false ; 

 

数组类型(array)
TypeScript中的数组类型和JavaScript不太一样。数组类型在声明的时候比较特殊,通常有两种声明方式: 关键字 数组名:类型[] 或者 关键字 数组名:Array<类型> 后一种格式被称为泛型,后面会专门介绍。 

let list: number[] = [1, 2, 3];
//第二种方式是使用数组泛型,Array<元素类型>:
let list: Array<number> = [1, 2, 3];

 

枚举类型(enum)
枚举类型和其他面向对象语言中保持一致。我们可以通过 enum 类型名{选项1,选项2,选项3,···} 的方式来定义,枚举类型中的成员默认从0开始依次递增。

  enum Color {Red, Green, Blue}
let c: Color  =  Color.Blue;
console.log(c);       //  打印的结果为2,每个选项从0开始依次递增  
//  默认情况下,从0开始为元素编号。 你也可以手动的指定成员的数值。 例如,我们将上面的例子改成从 1开始编号: 
 
enum Color {Red  = 1 , Green, Blue}
let c: Color  = Color.Green; 

 

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

  //    Declare a tuple type 
let x: [string, number];
  //   Initialize it 
x = ['hello', 10];  //   OK  
//   Initialize it incorrectly 
x = [10, 'hello'];  //   Error  

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如,我们知道数值为2,但是不确定它映射到Color里的哪个名字,我们可以查找相应的名字:

 enum Color {Red = 1 , Green, Blue}
let colorName: string  = Color[2 ];

console.log(colorName);    //   显示'Green'因为上面代码里它的值是2  

 

void类型
void类型在所有类型都不存在的时候使用,是any类型的反面。

  function  warnUser():  void   {
    console.log( "This is my warning message" );
}
  //  声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined和null: 
 
let unusable:   void  = undefined; 

 

any类型
有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检

查而是直接让它们通过编译阶段的检查。 那么我们可以使用  any 类型来标记这些变量

 let any1 ;     //  声明变量的时候没有进行初始化操作,无法通过类型推导得出真实类型,通常总是设置为any类型 
let any2:any = "我现在是字符串";    //  如果某个变量其类型可能会变化,建议使用any类型 
any2 =  false ; 

 

Null 和 Undefined

TypeScript里, undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null 。 和  void 相似,它们的本身的类型用处不是很大:

  //   Not much else we can assign to these variables! 
let u: undefined =  undefined;
let n:   null  =  null ; 

 

 

查看更多关于TypeScript简单介绍的详细内容...

声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did223303
更新时间:2023-05-08   阅读:62次

上一篇: vue3.0 + vite + axios + vuex + vue-router + typesc

下一篇:vue3 + vuex4.0 + typescript 使用详情

相关资讯

最新资料更新

  • 1.TypeScript入门指南
  • 2.typescript中使用泛型
  • 3.Typescript的函数定义方式
  • 4.Typescript---01 数据类型
  • 5.vscode下搭建typescript时提示"无法将“npm”项识别为 cmdlet、函数
  • 6.如何在TypeScript中使用函数
  • 7.typescript 学习笔记 - error TS2531: Object is possibly
  • 8.使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程
  • 9.typescript 类型any不能分配给类型never
  • 10.Typescript 和 Javascript之间的区别
  • 11.TypeScript技巧集锦(陆续更新)
  • 12.typescript中高级类型之交叉类型与联合类型
  • 13.vue typescript curd
  • 14.typescript中的类
  • 15.TypeScript & JavaScript
  • 16.typeScript类-class
  • 17.vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)
  • 18.使用Typescript重构axios(十九)——请求取消功能:实现第二种使用方式
  • 19.vscode 对 typescript代码调试的步骤
  • 20.使用typescript开发vue项目

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网」
[ SiteMap ]