typescript语法入门
一、字符串
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语法入门的更多相关文章
- 【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践
前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm i ...
- 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践
1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 ...
- 转载:TypeScript 简介与《TypeScript 中文入门教程》
简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...
- 转载:《TypeScript 中文入门教程》
缘由 事情是这样的,我想搜索 TypeScript 中文教程,结果在 https://www.baidu.com , https://cn.bing.com ,上都找不到官方的翻译,也没有一个像样的翻 ...
- [独孤九剑]持续集成实践(二)– MSBuild语法入门
本系列文章包含: [独孤九剑]持续集成实践(一)- 引子 [独孤九剑]持续集成实践(二)– MSBuild语法入门 [独孤九剑]持续集成实践(三)- Jenkins安装与配置(Jenkins+MSBu ...
- 【转】TypeScript中文入门教程
目录 虽然我是转载的,但看在Copy这么多文章也是很幸苦的好吧,我罗列一个目录. 转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:&l ...
- Java基础语法入门01
Java基础语法入门01 学习java你要先进行去了解JDK,JRE,JVM JDK Java开发工具包 JRE Java语言开发的运行环境 JVM Java虚拟机,用于Java语言的跨平台所用. 当 ...
- 【转】.MD语法入门
@2019-02-13 [小记] .MD语法入门
- 《TypeScript 中文入门教程》
转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:<TypeScript 中文入门教程> 16.Symbols (2015- ...
随机推荐
- 基于docker/虚拟机的esp32远程工作流
原文:基于docker/虚拟机的esp32远程工作流 工作流框图 背景说明 为什么需要这套工作流--为了满足高效和灵活的开发方式 因为我经常需要在公司和家里切换不同的电脑工作,所以编译环境需要在远程主 ...
- 【iOS开发】---- UIView动画
iOS 动画UIView动画 原文:http://www.cocoachina.com/bbs/read.php?tid=110168 1.概述 UIKit直接将动画集成到UIView类中,实现简 ...
- 1492: [NOI2007]货币兑换Cash【CDQ分治】
1492: [NOI2007]货币兑换Cash Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 4166 Solved: 1736[Submit][Sta ...
- 嵌入式流媒体音视频服务器EasyIPCamera中live555发送性能优化点
EasyIPCamera流媒体服务器 今年EasyDarwin团队在给国内某最大的金融安防公司做技术咨询的时候,开发了一款适用于嵌入式IPCamera.NVR的RTSP流媒体服务器:EasyIPCam ...
- EasyPusher安卓Android手机直播推送之MediaCodec 硬编码H264格式
本文转自Holo的博客:http://blog.csdn.net/u013758734/article/details/50834770 最近在研究EasyDarwin的Push库EasyPusher ...
- mybatis入门(十)
mybatis和hibernate本质区别和应用场景 hibernate:是一个标准ORM框架(对象关系映射).入门门槛较高的,不需要程序写sql,sql语句自动生成了. 对sql语句进行优化.修改比 ...
- mongodb学习之:mongo安装以及远程访问
在linux下通过apt-get install mongo的方式一键式安装mongo 安装后mongo的配置文件位于/etc/mongodb.conf. 里面有mongo的各项配置,文件内容如下:重 ...
- TCP/IP-ICMP-Ping-Traceroute
TCP/IP-ICMP 作者:Danbo 2015-8-22 I C M P经常被认为是I P层的一个组成部分.它传递差错报文以及其他需要注意的信息.I C M P报文通常被I P层或更高层协议( T ...
- Docker容器的网络连接:
yw1989@ubuntu:~$ ifconfig docker0 Link encap:Ethernet HWaddr 02:42:97:61:42:9f inet addr:172.17.0.1 ...
- hihocoder #1094 : Lost in the City微软苏州校招笔试 12月27日 (建图不大【暴力枚举】 子图的4种形态 1Y )
#1094 : Lost in the City 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi gets lost in the city. He ...