备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

typescript

2017-11-02 895
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
复制代码 
ts兼容js,微软开发，ts会移除注释，
类 接口  模块

class hello{}//就是function,function就是class
function demo(){}  //支持js语法
---------------------------------------------------------
数据类型：Boolean Number String Array Enum Any Void

var isBoolean;//js
var isBoon : boolean = false;//ts,不给false是undefined
function tell(){
    alert(isBoon);
}
tell();
-------------------------------------------
var num;//js
var num : number = 1;//ts
num++;
-----------------------------------------
var s : string = "sss";
s += "dd";
-----------------------------------------
var list : number[] = [1,2,3];
var list1 : Array<string> = ['1','2','3'];
alert(list[1]);
alert(list1[1]);
-------------------------------------------
enum Color{Red,Green,Blue};//下标从0开始
var c:string = Color[1];

enum Color{Red = 1,Green,Blue};//下标从1开始
var c:string = Color[2];//Green

enum Color{Red = 5,Green = 10,Blue = 20};//下标是50,10,20
var c:string = Color[10];//Green

enum Color{Red,Green,Blue};
var c:Color = Color.Green;//1，获取下标
alert(c);
-------------------------------------------
var is : any = 123;
is = "hello";
is = true;
alert(is);//flase
--------------------------------------------
var list:any[] = [1,"hello",true];
alert(list[1]);
----------------------------------------
//Void是对函数声明的。
function tell():string{
    return "www";
}

function say():number{
    return 10;
}

function tee():void{
    return;
}
---------------------------------------------------------
//js是通过prototype实现复用，
class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){//构造方法不是跟类名一样
        this.name = name;
        this.age = age;
    }
    print(){//方法不需要function
        return this.name + this.age;
    }
}

var p = new Person("sss",111);
p.print();

--------------------------------------------------------
//类的继承
class Person{
    name:string;
    age:number;
    tell(){ 
        return this.name + this.age;
    }
}

class stud extends Person{//stud有name和age
    school:string;
    tell(){
        return this,name + this,age + this,school;
    }
}
var s = new stud("sss",111);
s.name = "nnn";
s.age = 22;
s.school = "sss";
s.tell();
--------------------------------------------------------------

class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    tell(){ 
        return this.name + this.age;
    }
}

class stud extends Person{//stud有name和age
    school:string;
    constructor(school:string){
        this.school = school;
        super("sss",222);
    }
    tell(){
        return this,name + this,age + this,school;
    }
}
var s = new stud("ssss");
s.tell();

--------------------------------------------------------
//public private,什么都不写是public

class People{
    public name:string;
    private age:number;//报错，
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    print(){
        this.name + this.age;
    }
}
class Teacher extends People{
    school:string;
    constructor(school:string){
        this.school = school;
        //super("aaa",222);
    }
    print(){
        return this.name + this.age + this.school;
    }
}
var t = Teacher();
t.name = "aaa";
t.age = 44440;
t.school = "ddddd";
t.print();
------------------------------------------------------
//封装
class Hello{
    private _name:string;
    tell(){
        return this.name;
    }
    get name():string{
        return this._name;
    }
    set name(name:string){
        this._name = name;
    }
}
var h = new Hello();
h.name = "sss";//set方法
h.tell();
-------------------------------------------------------
//static
class Person{
    static name:string;
    tell(){
        alert(Person.name);
    }
}
var p = new Person();
Person.name = "sss";
p.tell();
//引用数据类型
class Greet{
    greeting:string;
    constructor(message:string){
        thius.greeting = message;
    }
    greet(){
        return this.greeting;
    }
}
var greet:Greet = new Greet("ssss");//引用数据类型
greet.greet();

-----------------------------------------------------
//函数类型，
//js有名函数和匿名函数。
function add(x,y){
    return x + y;
}
var myadd = function(x,y){
    return x + y;
}

function add(x:number,y:number):number{
    return x + y;
}

var myadd = function(x:number,y:number):string{
    return "ssss";
}

var myadd1:(name:string,age:number) =>number = function(n:number,a:number):number{
    return a;
}
----------------------------------------------------
//默认参数、可选参数
function bulidName(firstName:string,lastName?:string){//第二个参数可以不传,第一个参数加?号则可以不传参数，
    if(lastName){
        return firstName + lastName;
    }else{
        return firstName;
    }
}
var r1 = buildName("ss","www");
var r2 = buildName("sss");//传一个参数也可以，不能传3个参数，


function bulidName(firstName:string,lastName = "ssss"){
    return firstName + lastName;
}
var r1 = buildName("ss","www");
var r2 = buildName("sss");//传一个参数也可以,不能传3个参数
----------------------------------------------------------
//可变参数
function pp(f:string, ...abc:string[]){
    return f + abc.join(" ");
}
var p = pp("ss","ss",'dee',"ssww");
-----------------------------------
//Lambads/this关键字
var people = {
    name:["w",'e','f','b'],
    getName:function(){
        return function(){
            var i = Math.floor(Math.random() * 4)
            return {
                n:this.name[i]
            }
        }
    }
}
var d = people.getName();
d().n; //获取不到

var people = {
    name:["w",'e','f','b'],
    getName:function(){
        return ()=>{
            var i = Math.floor(Math.random() * 4)
            return {
                n:this.name[i]
            }
        }
    }
}
var d = people.getName();
d().n; //获取到
-------------------------------------------------------
//函数重载
function aa(name:string):string;
function aa(age:number):number;
function aa(nameorage : any):any{
    if(nameorage && typeof nameorage === 'string'){
        alert('姓名');
    }else{
        alert('年龄');
    }
}
aa("ss");
aa(19);
-------------------------------------------------------
//接口,类型检查
function print(labelo:{label:string}){
    console.log(labelo.label);
}
var my = {label:"dddd"};
print(my);


interface ppp{
    label:string;
}
function cc(ll:ppp){
}
var dd = {label:"label"};
cc(dd);

//接口可选属性
interface USB{
    name:string;
    age:number;
    schllo?:string;//可选参数，可以不传，
}
function printUSB(us:USB){
    console.log(us.name);
    console.log(us.age);
}
var my = {name:"dd",age:111};
printUSB(my);

//接口，函数类型，对函数规范化
interface search{
    (s:string,su:string):boolean;
}
var v:search;
v = function(a:string,su:string){
}

//接口，数组类型，对数组规范化
interface arr{
    [index:number]:string;//索引是数字，内容是string
}
var myarr = arr;
myarr = ['ss','dee'];

//接口，class类型，对类的规范化
interface cc{
    time:Date;
    settime(d:Date);
}
class CC implements cc{
    time:Date;
    settime(d:Date){
        this.time = d;
    }
    constructor(){
    }
}

//接口继承与混合
interface a{
    co:string;
}
interface ab{
    dd:number;
}
interface b extends a,ab{//b有了2个属性
    cd:number;
}
var s = <b>{};
s.cd = 11;
s.co = "ss";
s.dd = 33;


interface ee{
    ee1:number;
    ee2():void;
    (ee3:number):string;
}
var c:ee;
c(10)
c.ee2();

----------------------------------------------------------
//泛型
function hello(num:number):number{
    return num;
}

function hello<T>(num:T):T{//函数是泛型，参数是泛型，返回值类型是泛型，T是任何大写字母就可以，
    return num;
}
var dd = hello<string>("sss");
alert(dd);
----------------------------------------
function hello<T>(num:T[]):T[]{
    alert(num.length);
    return num;
}
var list:Array<string> = hello<string>(['ww','ee','rr']);
alert(list[0]);
---------------------------------------

function Hello<T>(arg:T):T{
    return arg;
}
var m:<K>(arg:K) => K = Hello;//lamdar表达式，指定一个对象m,将其指定成方法，=>K指定返回值，并把函数Hello赋值给他，
m("sss");

---------------------------------------
//lamdar表达式，lamdar表达式是一个匿名函数，myFunc是一个函数，(a:number)是参数，=>string返回值是string类型，
var myFunc:(a:number)=>string = function(aa:number):string{
    return "ssss" + a;
}
myFunc(2);
//var myFunc = function(aa:number):string{
//    return "ssss" + a;
//}

var myh:{<T>(arg:T):T} = Hello;
myh("myh");

----------------------------------------
interface Hello{
    <T>(arg:T):T;//接口中的一个泛型函数
}
function myHeel<T>(arg:T):T{
    return arg;
}
var MH:Hello = myHeel; //Hello 后面不写<string>
MH("ssss");
MH<string>("ssss");

-----------------------------------------
interface Hello<T>{
    (arg:T):T;
}
function myHeel<T>(arg:T):T{
    return arg;
}
var mh:Hello<number> = myHeel;  //Hello 后面要写<number>
mh(100);

----------------------------------------
//泛型类
class Hello<T>{
    zer:T;
    add:(x:T,y:T)=>T;
}
var myheel = new Hello<number>();
myheel.zer = 10;
myheel.add = function(x,y){
    return x + y;
}
myheel.add(11,11);
---------------------------------------------------------
//模块：模块化可重用，封装变量和函数
interface str{
    isAcc(s:string):boolean;
}
var le = /^[A-Za-z]+$/;
var num = /^[1-9]$/;
class Letter implements str{
    isAcc(s:string):boolean{
        return s.match(num);
    }
}

----------------------------------------------------
module Validation{
    export interface sv{
        isAcc(s:string):boolean;
    }
    var le = /^[A-Za-z]+$/;
    var num = /^[1-9]$/;
    export class Letter implements str{
        isAcc(s:string):boolean{
            return s.match(num);
        }
    }
}

-------------------
module Time{
    export class Test{
        element:HTMLElement;
        span:HTMLElement;
        timer:number;
        constructor(e:HTMLElement){
            this.element = e;
        }
    }
}
复制代码

 


本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/7198446.html，如需转载请自行联系原作者

文章标签：
JavaScript
索引
范大脚脚
目录
相关文章
博客zhu虎康
|
12天前
|
JavaScript 前端开发 安全
TypeScript五
TypeScript是面向对象的JavaScript超集，支持类、接口等OOP特性。类通过`class`定义，包括字段、构造函数和方法。例如，`Car`类有`engine`字段、构造函数和`disp`方法。类间可实现继承，如`Circle`继承`Shape`。TypeScript不支持多重继承，但允许多重继承链。`static`关键字定义静态成员，`instanceof`检查对象类型，访问控制修饰符（public, protected, private）管理访问权限。类能实现接口，如`AgriLoan`实现`ILoan`。 TypeScript对象是类型实例，
博客zhu虎康
26 2
博客zhu虎康
|
12天前
|
存储 JavaScript 索引
TypeScript四
## 联合类型 联合类型使用`|`分隔，表示变量可为多种类型： ```c var val: string | number; val = 12; // OK val = &quot;Runoob&quot;; // OK `
博客zhu虎康
25 2
博客zhu虎康
|
12天前
|
JavaScript 前端开发 开发者
TypeScript一
JavaScript开发迅速但维护成本高，适合小型项目，因其动态类型导致编辑器提示不全。TypeScript是JS超集，增加了类型系统，提高开发效率和代码质量。安装TypeScript需先安装Node.js，然后通过npm安装tsc。案例演示创建`.ts`文件，转换成`.js`并运行。TypeScript支持多种数据类型，如any、number、string等，并有严格变量声明和函数定义规则，包括函数重载和匿名函数。
博客zhu虎康
30 4
博客zhu虎康
|
12天前
|
JavaScript 前端开发
TypeScript二
JavaScript Number对象包含多种方法，如`toExponential()`将数值转化为指数形式，`toFixed()`保留指定位数的小数，`toLocaleString()`按本地格式显示数字，`toPrecision()`格式化数字到指定长度，`toString()`以指定基数表示数字，而`valueOf()`返回原始数值。此外，示例中还展示了Date对象的格式化方法。对于String对象，有`constructor`返回创建对象的函数，`length`获取字符串长度，`prototype`用于扩展对象，以及一系列如`charAt()`、`indexOf()
博客zhu虎康
46 1
泡芙-草莓
|
21天前
|
开发框架 JavaScript 前端开发
什么是TypeScript
什么是TypeScript
泡芙-草莓
11 0
Clover&lsquo;sBlog
|
8月前
|
JavaScript
【TypeScript理解】
【TypeScript理解】
Clover&lsquo;sBlog
26 0
demo123567
|
8月前
|
JavaScript 前端开发 编译器
TypeScript使用技巧
TypeScript使用技巧
demo123567
41 0
程序员皮卡秋(公众号程序员皮卡秋)
|
JavaScript 安全 前端开发
typescript修炼指南（三）
typescript修炼指南（三）
程序员皮卡秋(公众号程序员皮卡秋)
71 0
程序员皮卡秋(公众号程序员皮卡秋)
|
前端开发 JavaScript 安全
typescript修炼指南（四）
typescript修炼指南（四）
程序员皮卡秋(公众号程序员皮卡秋)
52 0
游客zceuxqeshfcq6
|
JavaScript 前端开发
初识 TypeScript 二。
初识 TypeScript 二。
游客zceuxqeshfcq6
80 0
初识 TypeScript 二。

热门文章

最新文章

  • 1
    Mac安装并使用telnet命令操作
  • 2
    OSS回源的几种方式和应用场景
  • 3
    [剑指offer] 孩子们的游戏(圆圈中最后剩下的数)
  • 4
    网络安全系列之二十二 Windows用户账号加固
  • 5
    我理解的一个程序员如何学习前端开发
  • 6
    《社交网站界面设计（原书第2版）》——1.9　为设备之间的空间进行设计
  • 7
    《Microduino实战》——1.2　为什么要开源
  • 8
    .Net函数Math.Round你会用吗？
  • 9
    麻省理工大学新发明：暗黑WiFi透视技术
  • 10
    2014秋C++第19周 补充代码 哈希法的存储与查找
  • 1
    R语言关联规则模型(Apriori算法)挖掘杂货店的交易数据与交互可视化
    25
  • 2
    R语言近似贝叶斯计算MCMC（ABC-MCMC）轨迹图和边缘图可视化
    21
  • 3
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现-4
    29
  • 4
    Sentieon | 每周文献-Multi-omics-第四十一期
    25
  • 5
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-2
    15
  • 6
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-1
    22
  • 7
    基于RT-Thread摄像头车牌图像采集系统
    22
  • 8
    R语言极值理论：希尔HILL统计量尾部指数参数估计可视化
    16
  • 9
    【视频】R语言中的分布滞后非线性模型（DLNM）与发病率，死亡率和空气污染示例
    18
  • 10
    sql语句创建数据库
    18

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）