一、字符串
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. 第 1 章 第 2 题 空间敏感排序问题 位向量实现( bitset位向量 )

    问题分析 在上篇文章中,给出了使用C语言中经典位运算符来实现位向量的方法.而本文,将介绍使用C++中的bitset容器来实现位向量的方法. 实现 // 请包含bitset头文件 #include &l ...

  2. 九度OJ 1111:单词替换 (查找)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4473 解决:1268 题目描述: 输入一个字符串,以回车结束(字符串长度<=100).该字符串由若干个单词组成,单词之间用一个空格隔 ...

  3. Liquibase

    http://www.liquibase.org/documentation/index.html https://github.com/studygolang/studygolang/tree/ma ...

  4. log4j(转)

    让System.out.println回家种田,换句话说,就是该干嘛干嘛去. 您可能在想: System.out.println几乎在每个Java程序里都有那么几行,如何让他老人家回家种田呢? 我们怎 ...

  5. hibernate属性配置

    数据库中一个字段的默认值设为0,当用hibernate插入数据时,没有对该字段进行操作,结果该字段居然不是0,而是空.后来google了一下,发现应该在.hbm.xml文件中添加一些参数定义(示例中的 ...

  6. Machine Learning No.1: Linear regression with one variable

    1. hypothsis 2. cost function: 3. Goal: 4. Gradient descent algorithm repeat until convergence { (fo ...

  7. 快速上手Ubuntu之安装篇——安装win7,Ubuntu16.04双系统【转】

    本文转载自:http://blog.csdn.net/qq_28205153/article/details/52203512 Linux可以说是开发者的系统,对于开发者来说,Linux发行版不仅为我 ...

  8. HDU5950 Recursive sequence —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/HDU-5950 Recursive sequence Time Limit: 2000/1000 MS (Java/Others)   ...

  9. java hql case when 的用法

    if(null == sorter){ hql.append(" order by m.mDate desc,case when m.mealTime = 'morning' then '1 ...

  10. MYSQL进阶学习笔记十六:MySQL 监控!(视频序号:进阶_35)

    知识点十七:MySQL监控(35) 一.为什么使用MySQL监控 随着软件后期的不断升级,myssql的服务器数量越来越多,软硬件故障的发生概率也越来越高.这个时候就需要一套监控系统,当主机发生异常时 ...