专栏首页达达前端【一起来烧脑】一步学会TypeScript入门

【一起来烧脑】一步学会TypeScript入门

字符串新特性 变量和参数新特性 函数新特性 匿名函数 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();

image.png

构造函数

image.png

image.png

image.png

TypeScript-泛型

参数化的类型,一般用来限制集合的内容

TypeScript-接口

image.png

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-模块

image.png

image.png

image.png

TypeScript-注解

image.png

类型定义文件

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大厂HR面试必备ES6中的深入浅出面试题知识点

    ESMAScript6简介,ES6是JavaScript语言的下一代标准,目的是让JavaScript语言可以写复杂的大型应用程序,成为企业级语言。那么ECMA...

    达达前端
  • 熬夜7天,我总结了JavaScript与ES的25个重要知识点!

    说起JavaScript,大家都知道是一门脚本语言。那么ES是什么鬼呢?ES全称ECMAScript ,是JavaScript语言的国际标准。

    达达前端
  • 【一起来烧脑】入门ES6体系

    不需要function关键字来创建函数 省略return关键字 继承当前上下文的 this 关键字

    达达前端
  • 「查缺补漏」送你 54 道 JavaScript 面试题

    看过源码的同学应该知道,filter源码中,会去判断数组的这个索引值是不是数组的一个属性,有兴趣的同学可以看看我写的这篇关于数组的:[干货?]从详细操作js数组...

    童欧巴
  • 重读《JavaScript高级程序设计》

    ECMAScript 函数不能像传统意义上那样实现重载。而在其他语言(如Java)中,可以为一个函数编写两个定义,只要这两个定义的签名(接受的参数类型和数量)不...

    嘉明
  • js 函数作用域与this 的指向实例 原

    函数的定义分为2种,(1)直接定义-window 下,内部定义;(2)对象的方法(或对象原型的方法),下面的函数fn1与fn2 是直接定义的函数, doFun...

    tianyawhl
  • ES6系列_9之对象

    有时候我们会在后台取出key值,而不是我们前台定义好的,这时候我们可以我们可以把后台定义的key值重新构建返回给后台。

    wfaceboss
  • ECMAScript 6介绍

    js中并没有声明常量的关键字,在es6中,出现了可以声明常量的关键字,const

    一个淡定的打工菜鸟
  • JavaScript第六节

    数组:是有序的元素集合 ,数组用于存放一组有序的数据,比如一个班级所有人的名字,一个班级所有人的成绩。

    用户3461357
  • javascript(三):对象

     对象(object)是javascript中很重要的数据类型。对象是“键值对”的集合,同时也是无序的。(注意:对象结尾处有分号) 1 var ob1={ ...

    用户1149564

扫码关注云+社区

领取腾讯云代金券