一、字符串
1.多行字符串: (支持换行)
`
<div></div>
<p></p>
`
2.表达式:${} --> 变量
var a = 'david';
var b = function(){return 'world'};
console.log( `hello ${a}` ) --> hello david
console.log( `hello ${b()}` ) --> hello world
3.自动拆分字符串:
function fn(template, name, age){
console.log( template )
console.log( name )
console.log( age )
}
var a = 'david';
var b = 23;
fn`hello my name ${a}, i'm ${b}`;
-->会输出:
数组['hello my name ',', i'm ',''],
david,
23 二、参数新特性
1.指定类型:
Ⅰ.指定某种类型:
var a: number = 10;
Ⅱ.指定所有类型:
var b: any = 10;
Ⅲ.默认会指定为'number'类型(不声明时):
var c = 10;
Ⅳ.函数没有返回值:
function(x: string,y: number) :void{}
Ⅴ.自定义类型:
class Person{
name: string; 【结尾为分号,或者不填】
age: number;
}
var wenwen: Person = new Person();
wenwen.name = 'david';
wenwen.age = 23;
//name,age会限定类型
2.指定默认值:
function(x,y: number = 1){} --> 没有传入y值时,使用默认值:1
3.可选参数:[参数后面加?]
function(x, y?: number = 1){} 三、函数新特性
1.Rest and Spread操作符:[声明传入任意数量的方法参数]
function add(...args){}
1-2.【*ts不支持】反用:
function add(a, b, c){
console.log( a,b,c )
}
var a1 = [1,2];
var a2 = [1,2,3,4]
add(...a1) // 1,2,undefined
add(...a2) // 1,2,3
2.generator函数:[控制函数的执行过程,手工暂停和恢复代码执行]
function* add(){
console.log( 'start' );
yield;
console.log( 'end )
}
var a = add();
a.next();
// start
a.next();
// start end
3.析构表达式:[通过表达式将对象或数组拆解成任意数量的变量]
Ⅰ、对象:
function add(){
return {
code: 'ibm',
price: {
price1: 100,
price2: 200
}
}
}
var {code, price: {price1}} = add(); --> 可访问变量:code,price1
Ⅱ、数组:
var arr = [1,2,3,4,5]
var [a,,b,..c] = arr; --> a=1;b=3;c=[4,5]
四、表达式和循环
1.箭头表达式:
-无参数:() => {};
-一参数:(a) => {}; || a => {}
-多参数:(a,b) => {};
*a => a;返回值只有一句,不需要{}
*{}中是返回值
2. for...of 循环:
obj.forEach(); -->循环值,不能被打断
for...in -->循环键,可以被打断
for...of -->循环值,可以被打断
五、面向对象特性
1.类:
Ⅰ、声明
1).访问控制符:
* public[默认] 共有
* private 私有(类的内部可以访问)
* protected 私有(类的内部和子类可以访问)
Ⅱ、类的构造函数(constructor):只有类被实例化时调用,且只执行一次
class Person {
constructor(public name) { //public声明
this.name = name;
}
eat() {
console.log( this.name )
}
}
var son1 = new Person('son1');
son1.eat(); --> // son1
Ⅲ、继承 [extends继承,super在子类中指向父类]
//*父类
class Person {
constructor(public name: string) {
console.log('haha');
}
eat() {
console.log('eating...');
}
}
//*子类
class Employee extends Person{
constructor (public name: string, id: number) {
super(name); //*必须要在子类中调用一次父类
console.log('xixi');
}
work() {
super.eat();
this.doWork();
}
private doWork() {
console.log('do work')
}
}
//*类的实例
var el = new Employee('David', 1);
el.work();
--> 输出:
haha | xixi | eating... | do work
2.泛型:参数化的类型,一般用来限制集合的内容 [数组内的值只能是 Person或者Person的子类或者实例]
*接着上一个‘继承’的例子写:
var workers: Array<Person> = [];
workers[0] = new Person('David1');
workers[1] = new Employee('David2', 1);
3.接口:用来建立某种代码约定,使得其它开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。
Ⅰ、interface 作为属性的类型
interface IPerson{
name: string;
age: number;
add();
}
class Person {
constructor(public config: IPerson) {}
}
var p = new Person({ //必须写入 name,age属性且类型正确
name: 'david',
age: 1,
add(){}
});
Ⅱ、implements 作为类的类型
interface Animal{
eat();
name: string;
}
class Person implements Animal{
eat() {}; //必须要写eat方法
name; //必须要写name属性
}
4.模块:
export 暴漏方法|属性|类
export var a = 1;
export var b = () => {};
export class c {};
import {a,b,c} from 'xxx'
5.注解:为程序的元素(类,、方法、变量)加上更直观明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的工具或框架使用的。
告诉框架或者工具,如何使用。
@Component声明注解
6.类型定义文件:类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包,如JQuery
类型定义文件 *.d.ts
npm install -g typings

typescript语法入门的更多相关文章

  1. 【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践

    前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm i ...

  2. 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

    1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择  ...

  3. 转载:TypeScript 简介与《TypeScript 中文入门教程》

    简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...

  4. 转载:《TypeScript 中文入门教程》

    缘由 事情是这样的,我想搜索 TypeScript 中文教程,结果在 https://www.baidu.com , https://cn.bing.com ,上都找不到官方的翻译,也没有一个像样的翻 ...

  5. [独孤九剑]持续集成实践(二)– MSBuild语法入门

    本系列文章包含: [独孤九剑]持续集成实践(一)- 引子 [独孤九剑]持续集成实践(二)– MSBuild语法入门 [独孤九剑]持续集成实践(三)- Jenkins安装与配置(Jenkins+MSBu ...

  6. 【转】TypeScript中文入门教程

    目录 虽然我是转载的,但看在Copy这么多文章也是很幸苦的好吧,我罗列一个目录. 转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:&l ...

  7. Java基础语法入门01

    Java基础语法入门01 学习java你要先进行去了解JDK,JRE,JVM JDK Java开发工具包 JRE Java语言开发的运行环境 JVM Java虚拟机,用于Java语言的跨平台所用. 当 ...

  8. 【转】.MD语法入门

    @2019-02-13 [小记] .MD语法入门

  9. 《TypeScript 中文入门教程》

    转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:<TypeScript 中文入门教程> 16.Symbols (2015- ...

随机推荐

  1. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  2. [不好分类]iphone手机激活错误的处理过程

    同事一台iphone 6s手机,重启后显示无法激活.(欢迎访问viphhs,欢迎转载.https://www.cnblogs.com/viphhs) 百度后尝试更换了手机卡,重新连接wifi,都不能恢 ...

  3. input光标位置

    兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...

  4. python自动化运维九:Playbook

    playbook:playbook 由一个或多个 ‘plays’ 组成.它的内容是一个以 ‘plays’ 为元素的列表.在 play 之中,一组机器被映射为定义好的角色.在 ansible 中,pla ...

  5. 剑指Offer:合并两个排序的链表【25】

    剑指Offer:合并两个排序的链表[25] 题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 题目分析 每次都是比较箭头节点,把小节点连接到已经合 ...

  6. HDU2896 病毒侵袭 —— AC自动机

    题目链接:https://vjudge.net/problem/HDU-2896 病毒侵袭 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit ...

  7. 人生苦短之Python多线程

    #encoding=utf-8 import threading import time ''' python多线程并不是真正意义上的多线程,通常我们所说的多线程是多个线程同时执行某功能,而在pyth ...

  8. 记录 Linux分析apache日志获取最多访问的前10个IP

    摘自: http://blog.csdn.net/tanga842428/article/details/52856413

  9. html5--3.8 input元素(7)

    html5--3.8 input元素(7) 学习要点 input元素及其属性 input元素 用来设置表单中的内容项,比如输入内容的文本框,按钮等 不仅可以布置在表单中,也可以在表单之外的元素使用 i ...

  10. tcp连接时,BROKEN PIPE错误的原因以及解决方法

    问题: 写了一个server和一个client,UNIX套接字的,server不断接收消息并打印出来,client是一个交互程序,输入一个消息回车发送,接着又可以输入消息.出问题了:当server监听 ...