TypeScript 快速学习

时间:2023-03-08 19:01:12

https://learnxinyminutes.com/docs/zh-cn/typescript-cn/

https://www.tslang.cn/docs/handbook/basic-types.html

姊妹篇 《javascript 快速学习》http://www.cnblogs.com/chenhui7373/p/8901933.html

【REPL环境】

去npm搜索 typescript 就有 ts-node

var isDone: boolean = false;
var lines: number = 42;
var name2: string = "Anders";
var notSure: any = 4;
var list: number[] = [1, 2, 3];
// 枚举
enum Color { Red, Green, Blue };
var c: Color = Color.Green;
// 最后 void 用于函数没有任何返回
function bigHorrible(): void {
console.log("Hi");
}
// …………………………………………………………………………………………………………
// 归纳以上,类型有 boolean string number number[] any enum void
// 加上 JS 类型 object undefined null 非数字(NaN、Infinity、-Infinity)
// …………………………………………………………………………………………………………
var f1 = function (i: number): number { return i * i; }// 以下函数和f1等价
var f2 = function (i: number) { return i * i; }// 推断返回类型
var f3 = (i: number): number => { return i * i; }// 箭头表达式
var f4 = (i: number) => { return i * i; }// 推断返回类型
var f5 = (i: number) => i * i;// 单行可以这么干
// …………………………………………………………………………………………………………
// 归纳以上,为了发挥TypeScript威力,f1和f3的写法都是推荐的,因为这样类型是明确的不用推断
// …………………………………………………………………………………………………………
interface Person {
name: string;
// ?标识 表示这是可选的属性
age?: number;
move(): void;
}
// 实现接口只要结构体相同就可以了
var p: Person = { name: "Bobby", move: () => { } };
var validPerson: Person = { name: "Bobby", age: 42, move: () => { } };
// var invaildPerson: Person = {name:"Bobby",age:true};
// …………………………………………………………………………………………………………
// 归纳以上,实现接口只要结构体相同就可以了,另外接口声明可以用 ? 标识可选属性
// 这样子的话,接口就成为我们 Object 的【规范】,规范用来定义项目 让多人协作合理化
// …………………………………………………………………………………………………………
// 接口描述一个函数类型 特别像 Java 8 中的 FunctionalInterface
interface SearchFunc{
(source:string,subString:string):boolean;
}
var mySearch:SearchFunc;// 这里挺怪的 不过说明了参数类型更重要
mySearch = function(src:string,sub:string){
return src.search(sub)!=-1;
}
// …………………………………………………………………………………………………………
// 归纳以上,这样子的话 我们就可以根据接口去实现方法了 ,接口成为了函数规范
// …………………………………………………………………………………………………………
// 整个类成员默认就是公共的 public
class Point {
x: number;
// 这里y声明为public 自动多一个成员不需要我们手动再声明
constructor(x:number,public y:number=0){
this.x = x;
}
dist(){return Math.sqrt(this.x * this.x + this.y * this.y);}
static origin = new Point(0,0);
}
class Point3D extends Point{
constructor(x:number,y:number,public z:number=0){
super(x,y);//必须显示调用
}
// override
dist(){
var d = super.dist();
return Math.sqrt(d*d+this.z*this.z);
}
}
// …………………………………………………………………………………………………………
// 归纳以上,演示了 类和类之间的【继承】 【重写方法】 【可重用目的】
// …………………………………………………………………………………………………………
// 模块
module Geometry{
export class Square {
constructor(public sideLength:number = 0){
}
area(){
return Math.pow(this.sideLength,2);
}
}
}
// "."可以作为子模块的分隔符
var s1 = new Geometry.Square(5);
// 引入模块并定义本地别名
import G = Geometry;
var s2 = new G.Square(10);
// …………………………………………………………………………………………………………
// 归纳以上,JS本身很像C external 去暴露给外部,通过这样我们可以写【模块化】代码
// …………………………………………………………………………………………………………
// 泛型
// 类
class Tuple<T1,T2>{
constructor(public item1:T1,public item2:T2){
}
}
interface Pair<T>{
item1:T;
item2:T;
}
var pairToTuple = function<T>(p:Pair<T>){
return new Tuple(p.item1,p.item2);
}
var tuple = pairToTuple({item1:'hello',item2:'world'});
// …………………………………………………………………………………………………………
// 归纳以上,最重要的思想 泛型让我们可以把代码更加【通用】进一步更【复用】
// …………………………………………………………………………………………………………
// 其他:引用定义文件
// / <reference path="jquery.d.ts" />
// 模板字符串(使用反引号的字符串)
// 嵌入变量的模板字符串
var name3 = 'Typrone';
var greeting = `Hi ${name3}, how are you?`
console.log(greeting);