先编译，后运行
tsc test1.ts
node test1.js
1.简单的例子 test1.ts
function greeter(person:string){
return "Hello " + person;
}
var user = "Joe User";
console.log(greeter(user));
2.类型和声明（Types and declarations）
//test2.ts
//number
//string
//Boolean
//null, undefined
//any
//void
var x = 1000;
var xx: number;
var y: string;
var z: boolean;
var zz = true;
var abc = 'stringvalue';
TS中有三种声明变量的方式：var, let , const。const跟let很像，只不过const一经定义便不能修改；
let和var的不同： let只在离自己最近的一组大括号内有效
//test3.ts
//var let const
//difference between let and var
function f(shouldInitialise: boolean){
if(shouldInitialise){
var x = 10;
}
return x;
}
console.log(f(true)); //10
console.log(f(false)); //undefined
function f1(shouldInitialise: boolean){
if(shouldInitialise){
let x1 = 10;
}
return x1;
}
console.log(f1(true)); //10
console.log(f1(false)); //undefined
test3.png
3.Type unions 变量可以为一种或几种类型
typeUnion1.png
typeUnion2.png
4.流程控制（flow control）
for(var i = 0; i < 10; i++){
console.log(i); //0 1 2 3 4 5 6 7 8 9
}
let idx = 0;
while(idx < 10){
console.log(idx++);//0 1 2 3 4 5 6 7 8 9
}
let index: number = 0;
do{
console.log(index++);//0 1 2 3 4 5 6 7 8 9
}while(index < 10);
let arr:number[] = [2,4,6,8,10];
for(let value of arr){
console.log(value);//2 4 6 8 10
}
5.方法（function）
//function1.ts
function myfunction(param: string): void{
}
function myfunction1(param1: number, param2: number): number{
return param1 + param2;
}
console.log(myfunction1(1243, 3259235)); //3260478
function myfunction2(param1: number, param2: number,param3: number = 0): number{
return param1 + param2 + param3;
}
console.log(myfunction2(1, 2,3)); //6
console.log(myfunction2(1, 2)); //3
function add(param1: number, param2: number,param3?: number): number{
return param1 + param2 + param3;
}
console.log(add(1, 2,3)); //6
console.log(add(1, 2)); //NaN
//function2.ts
function myfunc(...args:any[]){
for(let arg of args){
console.log(typeof(arg));
}
}
myfunc(1,2,3,'a','b','c',true); //number number number string string string boolean
objFunction1.png
objFunction2.png
objFunction3.png
6.字符串和数组（strings and array）
Tips:变量赋值最好还是用单引号，因为双引号会用在写HTML的时候；
//strings1.ts
var abc: string = 'abcdef';
var def: string = "abcdef";
//"<div style=\"display: none\"></div>";
var composite: string = 'This string has both "${abc}" and "${def}"'; //This string has both "${abc}" and "${def}"
console.log(composite);
var composite1: string = "This string has both \""+abc+"\" and \""+def+"\""; //This string has both "abcdef" and "abcdef"
console.log(composite1);
//string2.ts
var abc: string = 'avcdef';
var def: string = "a:b:c:d:e:f";
let arr = def.split(':');
console.log(arr); //[ 'a', 'b', 'c', 'd', 'e', 'f' ]
console.log(abc.slice(2,4));//cd
console.log(abc.indexOf('c'));//2
注意array().slice和array.splice()的区别
arrray.ts
var arr1: number[] = [1, 2, 3, 4, 5, 6];
arr1.push(1);
console.log(arr1.length); //7
console.log(arr1.slice(1,2));[ 2 ]
console.log(arr1);[ 1, 2, 3, 4, 5, 6, 1 ]
console.log(arr1.splice(1,2));[ 2, 3 ]
console.log(arr1);[ 1, 4, 5, 6, 1 ]
7.接口，类和继承（interfaces, classes and inheritance）
TS真正改变JS的地方是这个部分；
//interface.ts
interface IPerson {
first_name: string;
last_name: string;
age: number;
}
let person1: IPerson = {
first_name: 'marc',
last_name: 'really long',
age:105,
}
person1.first_name = 'Marc';
person1.last_name = 'Wandscheider';
interface IDescriptivePerson extends IPerson {
hair_colour: string;
height: number;
eye_colour: string;
weight: number;
}
let person2: IDescriptivePerson = {
first_name: 'Bobo',
last_name: 'The colown',
age: 12,
hair_colour: 'brown',
height: 180,
eye_colour: 'green',
weight: 170,
}
interface INationality {
nationality: string;
}
interface INationalisedDescriptivePerson extends IDescriptivePerson, INationality{}
let person3: INationalisedDescriptivePerson = {
first_name: 'Bobo',
last_name: 'The clown',
age: 12,
hair_colour: 'brown',
height: 180,
eye_colour: 'greeen',
weight: 170,
nationality: 'funlandia'
}
//class.ts
class PersonClass{
first_name: string;
last_name: string;
age: number;
}
let pp1 = new PersonClass();
pp1.first_name = 'marc';
pp1.last_name = 'long';
pp1.age = 39502;
console.log(pp1); //PersonClass { first_name: 'marc', last_name: 'long', age: 39502 }
public, private, protected
//class实现接口
interface IDisplayable{
display():void;
displayAsString(): string;
}
class PersonClass implements IDisplayable{
first_name: string;
last_name: string;
age: number;
protected _ssn: string;
display(): void{
console.log(this);
}
displayAsString(): string{
return JSON.stringify(this, null, 2);
}
}
let pp1 = new PersonClass();
pp1.first_name = 'marc';
pp1.last_name = 'long';
pp1.age = 39502;
console.log(pp1); //PersonClass { first_name: 'marc', last_name: 'long', age: 39502 }
就像接口可以扩展接口，类也可以扩展类
class SuperPerson extends PersonClass{
super_power: string;
}
let sp1 = new SuperPerson();
sp1.first_name = 'asdf';
sp1.last_name = 'qwer';
sp1.age = 12;
sp1.super_power = 'lasert beams';
sp1.display();
/*
SuperPerson {
first_name: 'asdf',
last_name: 'qwer',
age: 12,
super_power: 'lasert beams' }
*/
//class 结构体 constructor
interface IDisplayable{
display():void;
displayAsString(): string;
}
class PersonClass implements IDisplayable{
first_name: string;
last_name: string;
age: number;
protected _ssn: string;
constructor(fn:string, ln:string, age:number){
this.first_name = fn;
this.last_name = ln;
this.age = age;
this.display();
}
display(): void{
console.log(this);
}
displayAsString(): string{
return JSON.stringify(this, null, 2);
}
}
class SuperPerson extends PersonClass{
super_power: string;
}
let pp1 = new PersonClass('marc', 'wandschneider', 1395);
let sp1 = new SuperPerson('asdf','qwer',1234);
class SuperPerson extends PersonClass{
super_power: string;
constructor(fn:string, ln: string, age:number, sp:string){
super(fn,ln,age);
this.super_power = sp;
}
}
let sp1 = new SuperPerson('asdf','qwer',1234,'laser beams');
private就是只有这个类可以看到它；super person也不可以用this._ssn,会报错；protected除了这个类以及类的扩展外，都是不可见的；
网友评论