Follow Me通读Angular权威教程之TypeScript

   日期:2020-05-03     浏览:146    评论:0    
核心提示:原书第二章:angular是用typescript构建的但是typescript并不是一种新的语言,shell

原书第二章:

angular是用typescript构建的

但是typescript并不是一种新的语言,严格上说是属于es6(ECMAScript 6(是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。)的超集。
这里说一下超集的概念:

定义:如果一个集合S2中的每一个元素都在集合S1中,且集合S1中可能包含S2中没有的元素,则集合S1就是S2的一个超集,反过来,S2是S1的子集。
S1是S2的超集,若S1中一定有S2中没有的元素,则S1是S2的真超集,反过来S2是S1的真子集。


所以typescript是es6的超集,简单理解就是typescript比es6大就完事,es6再typescript里面。


再来看看书本中给出的图,明显比博主的好看许多,包含关系也是非常的正确。

typescript提供了哪些特性:

类型

typescript类型是可选的,也就是说可以和之前JavaScript的代码一样一直var var var(哇哇哇),也可以进行包括字符串,数字,布尔值等的类型声明
还是要哇,但是提供哇完了之后进行类型指定了

var name: string; 

在声明函数时,同样可以指定函数参数的返回值类型:

function greetText(name: string): string 
{  
 return "Hello " + name; 
 } 

因为此时name已经确定了类型,所以如果给函数传一个非string类型的参数,是会报错的。

新语法

除string 的number,boolean,Array,enum

var age: number = 36; 

var married: boolean = true; 

var jobs: Array<string> = ['IBM', 'Microsoft', 'Google']; 
var jobs: string[] = ['Apple', 'Dell', 'HP']; 

enum Role {Employee, Manager, Admin}; 
var role: Role = Role.Employee; 

特殊类型

任意类型

var something: any = 'as string'; 
something = 1;
 something = [1, 2, 3]; 

无类型

function setName(name: string): void
 {   
 this.name = name; 
 } 

不多说,class就是类

class 类名{}

类中存在的属性,方法

  class Person {      
   first_name: string;       
   last_name: string;       
   age: number; 
 
   greet() {         
      console.log("Hello", this.first_name);       
      } 
 
   ageInYears(years: number): number {        
       return this.age + years;       }     } 
 
   // instantiate a new Person instance 
    var p: Person = new Person(); 
 
   // set initial age 
    p.age = 6; 
 
   // how old will he be in 12 years? 
    p.ageInYears(12); 
 
   // -> 18 

构造函数


等价↑↓

可以在构造函数中进行初始化数据

继承

  • extend标注

模块导入

import

语言工作包

胖箭头函数

语法特性:!!!!!它和环绕它的外部代码共享一个this!!!!!!!

  • old JavaScript:

  • new typescript:

模板字符串

  • 字符串中可以添加变量:
var firstName = "Nate"; 
var lastName = "Murray"; 
 
// interpolate a string 
var greeting = `Hello ${firstName} ${lastName}`; 
 console.log(greeting);

这里需要注意的是,只能用反引号。

  • 多行字符串:
var template = ` <div> <h1>Hello</h1> <p>This is a great website</p> </div> ` 
 
// do something with `template` 

尝试REPL

REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,
我们可以在终端中输入命令,并接收系统的响应。

安装

npm install -g tsun


建议科学上网安装

问题解决

启动以后出现了问题:
报错:Error: Cannot find module ‘typescript’
原因是没有安装typescript

npm install -g typescript

启动

tsun

使用

Use it as repl: tsun
Use it as interpreter: tsun path/to/app.ts
Other repl command can be accessed by typing :help
Command Line options can be viewd by passing -h or --help option


附一个网址:

https://www.npmjs.com/package/tsun

,准备就绪,下一篇正式进入angular的世界。

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
更多>相关资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服