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- ...
随机推荐
- Struts2 实例(转载)
一.准备工作及实例 1.解压struts-2.1.6-all.zip apps目录:struts2自带的例子程序docs目录:官方文档. lib 目录:存放所有jar文件. Src 目录:源文件存放地 ...
- 查看客户端java日志
通过 Java 控制面板启用 Java 控制台 Windows 8 使用搜索来查找控制面板 按 Windows 徽标键 + W 以打开搜索框来搜索设置,或者将鼠标指针拖动到屏幕的右下角,然后单击搜索图 ...
- 安装Ubuntn 和 pycharm
Ubuntu安装之python开发 什么??公司要用Ubuntu(乌班图)?不会用??怎么进行python开发??? 乌班图操作系统下载地址:http://releases.ubuntu.com/ ...
- call by value reference name
按名调用 Algol 按值调用 Java https://docs.python.org/3.6/faq/programming.html#how-do-i-write-a-function-with ...
- 理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?
作者:Wang Namelos链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎著作权归作者所有.商业转载请联系作者获得授权 ...
- 虚拟化(四):vsphere高可用功能前提-共享存储搭建(使用微软提供的iscsi software target,也可以使用免费开源的openfiler)
虚拟化(一):虚拟化及vmware产品介绍 虚拟化(二):虚拟化及vmware workstation产品使用 虚拟化(三):vsphere套件的安装注意及使用 虚拟化(四):vsphere高可用功能 ...
- checkbox 背景图片 纯CSS处理办法
CSS .table_container input[type="checkbox"] { background: #fff url(/img/blue.png); backgro ...
- linux iptables:安全应用,防火墙
iptables:安全应用,防火墙 windows和linux都有防火墙,企业的边缘会部署防火墙保证企业内部的局域网是安全的.针对个人电脑会有防火墙保证系统是安全的. 防火墙是唯一通道. 防火墙分类( ...
- 后台管理微服务(二)——docker的使用
1. docker概述 1.1 Docker是什么 Docker 是软件工业的集装箱技术 Docker 是一个容器引擎,docker提供了一套完整的容器解决方案. Docker 是一个能将开发的程序自 ...
- Gym - 101147E E. Jumping —— bfs
题目链接:http://codeforces.com/gym/101147/problem/E 题意:当人在第i个商店时,他可以向左或向右跳di段距离到达另一个商店(在范围之内),一个商店为一段距离. ...