typescript 学习
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 学习相关推荐
- RUST直接升钢指令_[译]参照TypeScript学习Rust-part-1
[译]参照TypeScript学习Rust-1 · 前端在线regx.vip 对于前端,笔者比较认可Rust作为前端开发技术栈投资的,本文系列翻译旨在分享.学习Rust这门语言. Rust常常被认为 ...
- TypeScript学习笔记3:运算符
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 运算符 ...
- TypeScript学习笔记2:数据类型
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 数据类型 ...
- TypeScript学习笔记1:变量赋值及书写方式
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 变量赋值 ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- typescript 接口 java_[Java教程]【TypeScript】TypeScript 学习 2——接口
[Java教程][TypeScript]TypeScript 学习 2--接口 0 2015-06-19 12:00:28 在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScr ...
- TypeScript 学习一 参数,函数,析构表达式
1,TypeScript是由微软开发的,不过新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...
- Typescript 学习笔记一:介绍、安装、编译
前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
- TypeScript学习总结
TypeScript学习总结 前言 一.TypeScript是什么? 二.JavaScript 与 TypeScript 的区别 三.TypeScript基础 3.3.TypeScript 基础语法 ...
- typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)
提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...
最新文章
- 正则表达式表示任意字符
- SolrJ搜索功能切换到集群
- 愚人节整人软件测试自学,2020愚人节整蛊整人攻略大全
- EduCoder Linux 文件/目录管理
- 分布式锁(基于redis和zookeeper)详解
- 正则表达式的基本语法[转]
- C++之获取配置文件值
- 贰零零肆年拾月拾伍日
- 【WebGIS bug】WARNING: Too many active WebGL contexts. Oldest context will be lost.
- 【第一阶段 day25 面向对象】 多态
- oracle通过正则验证香港、澳门、台湾的身份证和护照
- perl生成图片_使用Perl生成模拟数据
- IntelliJ IDEA 2018.2 x64激活
- Ubuntu的网络共享
- 如何开通微信支付和支付宝支付0.2%(千分之二)费率(最全攻略)
- 计算机职业生涯规划范文网,计算机职业生涯规划书范文
- MYSQL中无法进行删除,更新解决方法
- 用于记录解决Fermi望远镜处理数据报错
- 安装npm时报-4048错误的解决方案
- 关于AJAX开发技巧的想法
热门文章
- 超前进位加法器实验报告_干货 | 加法器与反相加法器原理解析
- asp php 用户登录,一个简单的asp.net 单点登录实现
- php追加数据,php追加数据到mysql
- java的多态怎么理解_JAVA多态的理解
- mysql generator备注_MyBatis Generator 自定义生成注释
- python 函数 全局变量_python3函数内全局变量使用global
- 怎么复活不了睡袋_测评 | 萌新的北京冬季户外睡袋初体验
- 快速搭建springmvc+spring data jpa工程
- python控制台输入字符串作为参数_Python-如何将字符串传递到subprocess.Popen(使用stdin参数)?...
- oracle标量子查询的优势,标量子查询