关于TypeScript

[TOC]

一.关于TypeScript

中文 英文

TypeScript:更好的JavaScript

TypeScript是由微软开发的自由和开源的编程语言,它是JavaScript的超集。它扩展了JavaScript的语法,JavaScript的语法可以不加修饰的情况下,在TypeScript的环境下运行。TypeScript添加了遵循es6的语法,以及基于类的面向对象编程的这种特性。而且谷歌发布的Angular2也是TypeScript开发的.

TypeScript是为开发大型应用而设计的,编译的JavaScript保证兼容性。

  • 微软开发
  • javascript超集
  • 遵循es6规范
  • 强类型

二.使用它的原因

由于JavaScript是一门弱类型语言,变量的数据具有动态性,无法准确知道它的类型.TypeScript的类型机制可以避免这一类问题, 等!

TypeScript具强大的IDE支持,体现在

1.类型检测
2.语法提示
3.重构

重构:
TypeScript中引入了模块的概念,这类似于C++中的名字空间。它可以把声明、数据、函数和类封装在模块中,并采用export关键字导出,供模块外部的代码取用。之所以说它和命名空间比较相似,一是因为同名的模块可以自动合并,甚至可以分别存储在多个文件中;二是因为模块的名字可以分成不同层次,在层次较多时还可以命名简化的别名。但无论模块怎么组织,最终生成的还是标准的、可直接取用的JavaScript代码。正是靠着模块化、可插拔的结构,TypeScript才得以在维护一个较小的语言核心的前提下,对广泛使用的库如jQuery、CommonJS和Node.js等提供了完整的支持。

由于TypeScript并不是采用字符串匹配的粗糙方式来推导变量和函数的名字,对TypeScript代码进行命名的重构就如同微软的其他编程语言一样容易。只需要选中要重新命名的实体,并键入新的名字,而不需要担心名字相同而意义不同的其他实体也被同时重命名了

vscode
 vscode搭建typescript开发环境

相比学习这门语言的付出,TypeScript诸多优点,都是值得的!

三.搭建TypScipt开发环境

因为TypeScript是编译型语言,而且不能在浏览器上直接运行,所以我们要安装TypeScript的编译器,将它编译成Javascript才能在浏览器上运行。

在线编译:

当然你也可以使用在线的编译器 => 点我

使用本地编译器:

使用本地编译你需要安装TS ,

安装:

sudo npm install -g typescript

安装完成后你可以测试是否安装成功,当然一般情况都没有什么问题的

tsc --version
Version 2.3.4

安装文档

编译:

tsc helloworld.ts

四.基础类型

1.Boolean

let isDone: boolean = false;

2.number
typescript 还支持es6里面引入的二进制和八进制的字面量

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

3.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.`;

4.Array
TypeScript定义数组有两种方式:

 1 .在元素类型后面接上 `[]`
let list: number[] = [1, 2, 3];
 2 .使用泛型
let list: Array<number> = [1, 2, 3];

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

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

6.枚举enum
enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

7.Any
any 是默认的类型,其类型的变量允许任何类型的值:

let notSure:any = 10;
let notSure2:any[] = [1,"2",false];

8.void
JavaScript 没有空值 Void 的概念,在 TypeScirpt 中,可以用 void 表示没有任何返回值的函数:

function alertName(): void {
  console.log('My name is muyy')
}

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

let u: undefined = undefined;
let n: null = null;

10.Never
never类型表示的是那些永不存在的值的类型

never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

类型断言

类型断言有两种形式。 其一是“尖括号”语法:

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

另一个为as语法:

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只有 as语法断言是被允许的。

函数:

function add(x: string, y: string): string{
    return "Hello TypeScript";
}

let add2 = function(x: string, y: string): string{
    return "Hello TypeScript";
}

类:

概括在TypeScript中class的核心语义:所有的class都是一个立即函数,所有的数据成员都是这个函数实例的属性,所有的方法都是这个函数原型的属性,所有的静态成员都是这个函数的构造函数的属性

class Person{
    name:string; // 这个是对后文this.name类型的定义
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    fo(){
        return this.name + this.age;
    }
}

let person:Person = new Person('text',23)
console.log(person.fo()) // text23

接口:
TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

interface Shape{
    color: string;
}

interface PenStroke{
    penWidth: number;
}

interface Square extends Shape,PenStroke{
    sideLength: number;
}

let s = <Square>{};
s.color = "blue";
s.penWidth = 100;
s.sideLength = 10;

五.tsconfig.json

作用:

  • 用于标识 TypeScript 项目的根路径
  • 用于配置 TypeScript 编译器
  • 用于指定编译的文件

示例:

{
  "files": ["src/app/app.ts"],
  "compilerOptions": {
    "target": "es5",
    "removeComments": true,
    "alwaysStrict": true, //代码将在严格模式下执行
    "noEmitOnError": true,//表示当发生错误的时候,编译器不要生成 JavaScript 代码
    "noUnusedLocals": true,
    "noUnusedParameters": true//表示编译器将检测没有使用的变量或参数
  }
}

引自文章

六.总结

1.关于typescript简介
2.使用它的理由
3.搭建TypScipt开发环境
4.基本数据类型
5.tsconfig.json

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容