一、字符串
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. CF 445A(DZY Loves Chessboard-BW填充)

    A. DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input stand ...

  2. NoSQL的四大类型

    1 键值数据库 相关产品:Redis.Riak.SimpleDB.Chordless.Scalaris.Memcached 应用:内容缓存 优点:扩展性好.灵活性好.大量写操作时性能高 缺点:无法存储 ...

  3. 整形范围 运行Java代码的机器

    Java 无关 C C++ 有关  移植  整形溢出

  4. java复制图片实现方法

    原图片路径:srcpic 目的图片路径:despic public static void copyPic(String srcpic, String despic){ File file1=new ...

  5. STM32 ~ JTAG、SWD和串口下载的问题

    最近有一个项目用到STM32,为了使PCB布线方便一些所以改了一些引脚,占用了JTAG接口的PA15和PB3,所以要禁用一下JTAG,下载采用SWD模式.这样在实际操作中做出一些总结(方法网上都有.这 ...

  6. Backbone vs AngularJS

    首先 Backbone 没有 AngularJS 那么容易上手. 而且作者并没有想让Backbone草根化的意思. Backbone 比喻成战斗机. 看上去更像是真正的MVC框架, model-vie ...

  7. LightOJ1213 Fantasy of a Summation —— 快速幂

    题目链接:https://vjudge.net/problem/LightOJ-1213 1213 - Fantasy of a Summation    PDF (English) Statisti ...

  8. CSU 1554 SG Value —— 思维

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1554 Description The SG value of a set (mult ...

  9. java连接oracle的几种方式

    jdbc连接(驱动包ojdbc6.jar)String driver = "oracle.jdbc.OracleDriver"; //驱动标识符 String url = &quo ...

  10. Linux档案属性

    输入命令:ls -al 档案类型权限: 第一個字元代表这个档案是『目录.档案或链接档等等』: 当为[ d ]则是目录: 当为[ - ]则是目录: 若是[ l ]则表示为链接档(link file): ...