【一起来烧脑】一步学会TypeScript入门
[外链图片转存失败(img-rmJXMGFs-1563388353181)(https://upload-images.jianshu.io/upload_images/11158618-dd813ed6e7f957c9.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
字符串新特性
变量和参数新特性
函数新特性
匿名函数
for of循环
TypeScript语言中的面向对象特性
理解ES5,ES6,JAVASCRIPT,TYPESCRIPT概念之间的关系
ES是客户端脚本语言的规范
ES5,ES6是这个规范的不同版本
JavaScript和TypeScript是两种不同的脚本语言
JavaScript实现了ES5规范
TypeScript实现了ES6规范
本地compiler
npm --version
sudo npm install -g typescript
tsc --version
ls
tsc Hello.ts
export class Hello {
}
"use strict";
var Hello = (function () {
function Hello() {
}
return Hello;
}());
exports.Hello = Hello;
字符串新特性
function test(template, name, age) {
console.log(template);
console.log(name);
console.log(age);
}
var myname = "da";
var getAge = function () {
return 12;
}
test `hello my name is ${myname}, ${getAge()}`
参数类型
var myname: string = "da shu";
var a: any = "da shu";
var b: number = 12;
var man: boolean = true;
function test(name: string) :string {
return "";
}
class Person {
name: string;
age: number;
}
var zhangsan: Person = new Person();
zhangsan.name = "da"
zhangsan.age = 223
参数默认值
参数类型:
在参数名称后面使用冒号来指定参数的类型
默认参数:
在参数声明后面用等号来指定参数的默认值
var myname: string = "da shu"
function test(a: string, b: string, c: string = "da"){
console.log(a);
console.log(b);
console.log(c);
}
text("xx","yy","zz");
可选参数
var myname: string = "da shu"
function test(a: string, b?: string, c: string = "da"){
console.log(a);
console.log(b);
console.log(c);
}
text("xx","yy","zz");
Rest and Spread操作符
function func1(...args) {
args.forEach(function (arg) {
console.log(arg);
})
}
function func1() {
var args = [];
for( var _i = 0; _i < arguments.length; _i++) {
args[_i - 0] = arguments[_i];
}
args.forEach(function(arg) {
console.log(arg);
});
}
func1(2,3,4);
func1(2,3,4,5,2);
function func1(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
var args = [1,2];
func1.applay(void 0, args);
var args2 = [23,32,2,211];
func1.apply(void 0, args2);
generator函数
Rest and Spread 操作符:
用来声明任意数量的方法参数
generator函数:
控制函数的执行过程,手工暂停和恢复代码执行
Babel是一个JavaScript编译器。
析构表达式
destructuring析构表达式:
通过表达式将对象或数组拆解成任意数量的变量
function getStock() {
return {
code: 'IBM',
price: 100
}
}
var { code, price } = getStock();
console.log(code);
console.log(price);
var array1 = [1,2,3,4];
function doSomething([number1,number2,...others]) {
console.log(number1);
console.log(number2);
console.log(others);
}
doSomething(array1);
箭头表达式
用来声明匿名函数,消除传统匿名函数的this指针问题
var myArray = [1,2,3,4,5];
console.log(myArray.filter(value=> value%2==0));
function getStock(name: string) {
this.name = name;
setInterval(function(){
consolv.log("name is :" + this.name);
}, 1000);
}
var stock = new getStock("IBM");
function getStock(name) {
this.name = name;
setInterval(function(){
console.log("name is" + this.name);
}, 1000);
}
var stock = new getStock("IBM");
结果没值
function getStock2(name: string) {
this.name = name;
setInterval(() => {
consolv.log("name is :" + this.name);
}, 1000);
}
var stock = new getStock("IBM");
有值了
for of循环
forEach(),for in,for of
面向对象:
类,泛型,接口,模块,注解,类型定义文件
for (var n of myArray) {
if(n > 2) break;
console.log(n);
}
TypeScript-类
class Person {
name;
eat() {
console.log();
}
}
var p1 = new Person();
p1.name = "da";
p1.eat();
[外链图片转存失败(img-9fm4hbd8-1563388353184)(https://upload-images.jianshu.io/upload_images/11158618-6a886263a34cb4af.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
构造函数
[外链图片转存失败(img-QgxDCRlD-1563388353186)(https://upload-images.jianshu.io/upload_images/11158618-6637184ffa3563cc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-9zUGCPVQ-1563388353188)(https://upload-images.jianshu.io/upload_images/11158618-a5fa8bb29927c12c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-Qbzn15ac-1563388353189)(https://upload-images.jianshu.io/upload_images/11158618-b063b8ac7aaadb41.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
TypeScript-泛型
参数化的类型,一般用来限制集合的内容
TypeScript-接口
[外链图片转存失败(img-Nm0e7beu-1563388353192)(https://upload-images.jianshu.io/upload_images/11158618-bdf49ed81e70d869.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
interface IPerson {
name: string;
age: number;
}
class Person {
constructor(public config: IPerson) {
}
}
var p1 = new Person({
name: 'da',
age: 12
});
interface Animal{
eat();
}
class Sheep implements Animal {
eat() {
console.log("");
}
}
class Tiger implements Animal{
eat() {
console.log();
}
}
TypeScript-模块
[外链图片转存失败(img-oNNq1GRq-1563388353194)(https://upload-images.jianshu.io/upload_images/11158618-61b70a83d766d68f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-zEdxHjWB-1563388353195)(https://upload-images.jianshu.io/upload_images/11158618-b1005e275f913275.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-PEHhEQHh-1563388353196)(https://upload-images.jianshu.io/upload_images/11158618-41d3551c3d907650.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
TypeScript-注解
[外链图片转存失败(img-odDOybkh-1563388353197)(https://upload-images.jianshu.io/upload_images/11158618-6aec5776baa3e512.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
类型定义文件
[外链图片转存失败(img-fAPjag9x-1563388353199)(https://upload-images.jianshu.io/upload_images/11158618-7ba7f6c82cfd8d7b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达叔小生的简书!
这是一个有质量,有态度的博客
[外链图片转存失败(img-zrzA76Ek-1563388353203)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
【一起来烧脑】一步学会TypeScript入门的更多相关文章
- 一文学会 TypeScript 的 82% 常用知识点(下)
一文学会 TypeScript 的 82% 常用知识点(下) 前端专栏 2019-11-23 18:39:08 都已经 9021 年了,TypeScript(以下简称 TS)作为前端工程师不得 ...
- TypeScript入门一:配置TS工作环境
配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...
- TypeScript入门五:TypeScript的接口
TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...
- Membership三步曲之入门篇 - Membership基础示例
Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 - Membership基础示例 Membership三步曲之进阶篇 - 深入剖析Pro ...
- [转]Membership三步曲之入门篇 - Membership基础示例
本文转自:http://www.cnblogs.com/jesse2013/p/membership.html Membership三步曲之入门篇 - Membership基础示例 Members ...
- Java基础:三步学会Java Socket编程
Java基础:三步学会Java Socket编程 http://tech.163.com 2006-04-10 09:17:18 来源: java-cn 网友评论11 条 论坛 第一步 ...
- [EntLib]微软企业库5.0 学习之路——第一步、基本入门
话说在大学的时候帮老师做项目的时候就已经接触过企业库了但是当初一直没明白为什么要用这个,只觉得好麻烦啊,竟然有那么多的乱七八糟的配置(原来我不知道有配置工具可以进行配置,请原谅我的小白). 直到去年在 ...
- TypeScript入门指南(JavaScript的超集)
TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...
- ASP.NET 安全系列 Membership三步曲之入门篇 - Jesse Liu
Membership 三步曲 ASP.NET 安全系列 Membership三步曲之入门篇 ASP.NET 安全系列 Membership三步曲之进阶篇 ASP.NET 安全系列 Membership ...
随机推荐
- 递归在JavaScript中的应用实例
递归 适用的必要条件:①过程的描述中包含它自身②有明确的结束递归的条件. 主要思路:在每一次调用自己时,使用相同的解决问题的方法,但调用的参数每次不同(有规律的变化),使用一个终止处理(结束递归)的条 ...
- JAVA线程Disruptor核心链路应用(八)
import java.util.concurrent.atomic.AtomicInteger; /** * Disruptor中的 Event * @author Alienware * */ p ...
- 使用 SetParent 跨进程设置父子窗口时的一些问题(小心卡死)
原文:使用 SetParent 跨进程设置父子窗口时的一些问题(小心卡死) 在微软的官方文档中,说 SetParent 可以在进程内设置,也可以跨进程设置.当使用跨进程设置窗口的父子关系时,你需要注意 ...
- spring-boot-starter-parent的主要作用
SpringBoot项目一般都会配置starter-parent依赖. 示例: <parent> <groupId>org.springframework.boot</g ...
- Java开发环境搭建(一)
一.JDK与JRE JDK:Java Development Kit,Java开发工具包,是给开发人员使用的,其中包含了Java的开发工具,如java.javac.jar等命令,同时也包含了JRE. ...
- npm 安装 react-devtools
由于不能科学的上网.网上看资料装上了这个插件,装的过程有点坑.记录一下,希望能帮到和我一样的新手. 1.第一步,克隆下远程仓库的东西. 桌面右键,git-bash.然后输入: git clone ht ...
- Java8 stream用法-备忘录
1. 如何使用匹配模式 List<String> strs = Arrays.asList("a", "a", "a", &qu ...
- altium designer的pcb板如何移动到原点?
可以把所有的都选中,然后将光标移到起点处,将所有的移到原点的地方,但这种做法很多时候都不好:比较好的办法就是将原点设置到起点上来. 具体做法是:edit--origin --set. 这时光标成了十字 ...
- 16.centos7基础学习与积累-002
1.从头开始积累centos7系统运用 大牛博客:https://blog.51cto.com/yangrong/p5 互联网公司服务器品牌: dell 服务器品牌: 1U=4.45CM 2010年以 ...
- 使用Kerberos进行Hadoop认证
使用Kerberos进行Hadoop认证 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Kerberos是一种网络身份验证协议.它旨在通过使用秘密密钥加密为客户端/服务器应用程序提 ...