typescript将在不久的将来从前端大一统的趋势中脱颖而出成为主流编译器。学习ts对前端开发人员来说是不可或缺的。同时,也要抓紧学习es2015/6/7。ts和es6并不是对立的。而是相辅相成的。ts的竞争和打击对象实质上是babel……

官方资料

# 官方地址:
 https://www.tslang.cn

# github:
 https://github.com/Microsoft/TypeScript

# 官方文档
 http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html

安装与编译:

# 安装npm install -g typescript
# 编译tsc helloworld.ts

demo1:支持Commonjs规范

# helloworld.ts
import app from './app'
console.log(app)# app.ts
export default {sayHello () {console.log("Hello World!!")}
}

执行tsc helloworld.ts

控制台执行:node helloworld

控制台输出:Hello World!!

demo2: 快速扫基础篇

# 基础类型
let isDone: boolean = false;
let decLiteral: number = 6;
let name: string = "bob";# 模板字符串 和 内嵌表达式
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.`;

# 数组 与 泛型数组
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];# 元组
let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'
x[3] = 'world'; // OK
onsole.log(x[1].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型

demo3: 快速扫基础篇2

# 枚举
// 默认情况下,从 0 开始为元素编号
enum Color {Red, Green, Blue};
let c: Color = Color.Green; // 1enum Color {Red = 1, Green, Blue};
let c: Color = Color.Green; // 2enum Color {Red = 1, Green = 2, Blue = 4};
let c: Color = Color.Green; // 2//查找相应的名字
enum Color {Red = 1, Green, Blue};
let colorName: string = Color[2];
console.log(colorName) // Green

# 任意值
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

let list: any[] = [1, true, "free"];
list[1] = 100;# void
function warnUser(): void {alert("This is my warning message");
}

demo4 : ts的核心之一 接口

# 接口初探
function printLabel(labelledObj: { label: string }) {console.log(labelledObj.label);
}
let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);  // Size 10 Object

类型检查器会查看 printLabel 的调用。 printLabel 有一个参数,并要求这个对象参数有一个名为 label 类型
为 string 的属性。 需要注意的是,我们传入的对象参数实际上会包含很多属性,但是编译器只会检查那些必需
的属性是否存在,并且其类型是否匹配。// 将接口单独抽离出来
interface LabelledValue {label: string;
}
function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);类型检查器不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以。# 接口可选属性
interface SquareConfig {color?: string;width?: number;
}function createSquare(config: SquareConfig): {color: string; area: number} {let newSquare = {color: "white", area: 100};if (config.color) {newSquare.color = config.color;}if (config.width) {newSquare.area = config.width * config.width;}return newSquare;
}
let mySquare = createSquare({color: "black"}); // { color: 'black', area: 100 }

typescript 学习相关推荐

  1. RUST直接升钢指令_[译]参照TypeScript学习Rust-part-1

    [译]参照TypeScript学习Rust-1 · 前端在线​regx.vip 对于前端,笔者比较认可Rust作为前端开发技术栈投资的,本文系列翻译旨在分享.学习Rust这门语言. Rust常常被认为 ...

  2. TypeScript学习笔记3:运算符

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 运算符 ...

  3. TypeScript学习笔记2:数据类型

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 数据类型 ...

  4. TypeScript学习笔记1:变量赋值及书写方式

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 变量赋值 ...

  5. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. typescript 接口 java_[Java教程]【TypeScript】TypeScript 学习 2——接口

    [Java教程][TypeScript]TypeScript 学习 2--接口 0 2015-06-19 12:00:28 在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScr ...

  7. TypeScript 学习一 参数,函数,析构表达式

    1,TypeScript是由微软开发的,不过新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...

  8. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  9. TypeScript学习总结

    TypeScript学习总结 前言 一.TypeScript是什么? 二.JavaScript 与 TypeScript 的区别 三.TypeScript基础 3.3.TypeScript 基础语法 ...

  10. typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)

    提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...

最新文章

  1. 正则表达式表示任意字符
  2. SolrJ搜索功能切换到集群
  3. 愚人节整人软件测试自学,2020愚人节整蛊整人攻略大全
  4. EduCoder Linux 文件/目录管理
  5. 分布式锁(基于redis和zookeeper)详解
  6. 正则表达式的基本语法[转]
  7. C++之获取配置文件值
  8. 贰零零肆年拾月拾伍日
  9. 【WebGIS bug】WARNING: Too many active WebGL contexts. Oldest context will be lost.
  10. 【第一阶段 day25 面向对象】 多态
  11. oracle通过正则验证香港、澳门、台湾的身份证和护照
  12. perl生成图片_使用Perl生成模拟数据
  13. IntelliJ IDEA 2018.2 x64激活
  14. Ubuntu的网络共享
  15. 如何开通微信支付和支付宝支付0.2%(千分之二)费率(最全攻略)
  16. 计算机职业生涯规划范文网,计算机职业生涯规划书范文
  17. MYSQL中无法进行删除,更新解决方法
  18. 用于记录解决Fermi望远镜处理数据报错
  19. 安装npm时报-4048错误的解决方案
  20. 关于AJAX开发技巧的想法

热门文章

  1. 超前进位加法器实验报告_干货 | 加法器与反相加法器原理解析
  2. asp php 用户登录,一个简单的asp.net 单点登录实现
  3. php追加数据,php追加数据到mysql
  4. java的多态怎么理解_JAVA多态的理解
  5. mysql generator备注_MyBatis Generator 自定义生成注释
  6. python 函数 全局变量_python3函数内全局变量使用global
  7. 怎么复活不了睡袋_测评 | 萌新的北京冬季户外睡袋初体验
  8. 快速搭建springmvc+spring data jpa工程
  9. python控制台输入字符串作为参数_Python-如何将字符串传递到subprocess.Popen(使用stdin参数)?...
  10. oracle标量子查询的优势,标量子查询