ts 快速入门

前言:请先熟悉ES6,包括其中的import、export、class等。ts特性右转百度,只讨论入门语法,语法方面基本就是c++/java等静态类型的语法简化版,而且兼容js语法,有学过这些的话光速入门。


变量

1.let x: number = 6
其中:number说明x是一个number类型。也可以简写成let x = 6,typescript会自动推断这些简单类型

2.let list: number[] = [1, 2, 3]
表明list是一个数组,数组内的元素只能是number类型。也可写成let list: Array<number> = [1, 2, 3],这是typescript中泛型的写法,等价的。下面的几点均是对类型的进一步说明

3.any代表任何类型,即跳过静态检查。如let x:any,那么就跟js中let x效果一模一样,ts不会对其进行检查。

4.void用于没有返回值的函数。一个函数返回类型为void时,只要使用了返回值就会报错,而上面的any不会。

5.null,undefined可以赋值给任意类型的变量。(没有使用--strictNullChecks时)

6.let a: number|string|object联合类型。代表a既可以是number,也可以是string或object类型

7.接口、类均可作变量的类型声明,但接口名可和变量重名,而类不行。

注:Number,Object等不要number这些类型“关键字”混作一谈,后面会作详解


函数

function add(x: number, y: number): number {
    return x + y;
}
let myAdd = function(x: number, y?: number): number { return x; };
let myAdd = function(x: number, y: number = 12): number { return x + y; };

函数的参数类似变量声明,:number加到后面即可规定参数类型。函数的括号()加上:number即可规定返回类型。
其中参数的后?代表该参数可选;给参数赋值y: number = 12代表参数默认取12。即“可选参数”和“默认参数”,效果和需要注意的细则右转百度


接口

ts的接口与java等语言的不同,ts的接口只是用来规定对象、函数、类的“形状”。

规定对象形状

interface Example {
  a: string;
  b?: number;
  readonly c: boolean;
}

let x: Example  = {a:"123", c:true};//正确
x.c=false;//错误,c为只读属性
x = { a: "123", b:12, c: false };//正确
x = { a: "123", b:12, d:12};//两个错误,缺少c属性、不应该具有d属性

如上面中,变量x一定有a、c属性,可能有b属性,其中对c属性只能读不能改。

interface Example {
  [propName: string]: number;
}
let x: Example;
x.a=1;//正确
x.b=2;//正确
x.c="123";//错误

这样的接口表示对象可以有若干个“key类型为字符串、value类型为number”的属性。
另一种可能情况是[propName: number]: number;,他表明你可以像x[0]=0;x[1]=1这样使用。
且必须注意:

interface Example {
  [propName: string]: number;
  a:string;
}

这样会报错。如上面解释,[propName: string]: number;规定x.a是number类型,而a:string;规定x.a是string类型,产生二义性导致报错。
一个简单解决方式是改为[propName: string]: any;,使其兼容(string是any的子类),详细可右转文档

规定函数形状

interface Example1 {
  (a: number): boolean;
  (a: number, b: number): boolean;
  new (a: number, b: number): boolean;
  a:number;
}
let m1: Example1, temp:any;
temp = function (a,b) {return true;}
temp.a=123;
m1 = temp;
let a = m1(1), b = m1(1, 2), c = new m1(1, 2); 

interface Example2{
  (a: number): boolean;
}
let m2: Example2 = function (a: number): boolean { return true; }

一个接口可以定义函数的多种形状,如上面的Example1接口。
当接口如Example2只规定了一种形状时,变量m2直接赋值成这种类型的函数就行了。
当接口如Example1规定了多种形状时,变量m1无法直接简单赋值,此时需要搞个any类型的变量temp,js怎么做的这个temp就怎么做,最后赋值给变量m1。

注意:
1.接口名可以和变量重名,即let Example1:Example1;是可行的。同理,在typescript中,NumberString这些,既是接口也是变量。建议去typescript官方库看下Number具体是什么一回事。
2.接口可在不同地方重复定义,后面重复定义的接口内容将会被合并原有接口。简单来说就是接口具有灵活的扩展性,你不必在一处地方完全定义一个接口,也可以自行对原有接口进行补充。


写法跟js的class几乎一样,下面简要概括

class A {
    a: string;
    protected c: string;
    constructor(a: string, public b: string) {
        this.a= a;
    }
    m():string {
      return this.a + this.b;
    }
    static mm():number { return 0; }
}
let x = new A("1","2");

类成员a直接写在里面,访问级别默认是public,变量和函数同样遵从上面讲过的写法。

其特点:
1.构造函数里面的参数public b: string:当你在构造函数的参数b前面加上public、protected、private中任意一个,就代表声明了一个成员变量b,且把参数b的值赋给它。简单来说,就是一种对成员变量定义+构造函数中初始化的简写形式。
2.像java一样,类可以单继承(extends)一个类,实现(implements)多个接口;接口可以继承多个接口。比较奇葩的是接口同样可以继承多个类(interface B extends A{}),不过建议尽量别这样用。
3.类实现接口,仅代表类的实例部分被接口所约束,即类中必须重新声明定义接口中出现的方法和成员。这表明我们无法直接通过接口,规定其实现类的static修饰的成员、函数以及构造函数(constructor)。深入了解还请右转文档


命名空间

即namespace,作用类似与js的import/export。用的比较少,我就大概说说了。

import/export大家都熟了,就是一个js一个模块,另外一个文件可以通过import,导入export导出的变量和成员。这个的稍微不足之处是限死了一个模块只能在一个js文件里,不过我们也能通过额外写个js模块负责总的导入导出,其实也还行。
而typescript中的namespace,同样可以看作是模块化,不过除去了上述限制。你可以在一个ts文件里写多个namespace,也可以把一个namespace分散在若干个ts文件中,更加灵活。

namespace ns {
  const a = 1;
  let b = 1;
  export const c = a + b;
  export class A { }
}
let x = ns.c, xx = new ns.A();

可以看作是

//f1.js
const a = 1;
let b = 1;
export const c = a + b;
export class A { }

//f2.js
import * as ns from './f1.js'
let x = ns.c, xx = new ns.A();

当然只是个大概示意,为了说明namespace拿来干什么用,不要忘记其特性。
注意:需要通过特殊注释来发现另一个文件中的namespace,如/// <reference path="Validation.ts" />这种形式,而且有顺序先后的影响。深入了解请右转文档


声明文件

d.ts后缀那些ts文件。如果是全项目都用ts的,那么没什么问题;但如果你是js、ts混杂的,ts中无法识别js中的东西,这就需要我们去为这些js中的对象、函数、类等写一份ts格式的声明,否则ts中大量报错未定义、类型不对等等东西。

介绍两个关键字typedeclare
(1)type跟c++的type差不多,用于类型别名,包括联合类型,如type NumStr=number|string

(2)declare基本上专门用于声明文件,被其修饰的变量/函数/类的成员和函数均无法被初始化赋值。
当然你要用在普通ts文件、或者声明文件不用它也是可以的,只是某些情况下你必须使用,如declare const XXX;,如果不加上declare,ts会报错常量未初始化,但实际上这个是来自js的常量,你不能在ts中重复初始化,否则编译为js后实际运行时就会报错。
另外一个要点是declare namespace X{}来修饰命名空间X时,等价于用export declare来修饰其内部的每一个变量:

//a.js
var X={a:1,b:2,c:3}
export X;

//a.d.ts
//方式1
declare namespace X {
  var a: number;
  var b: number;
  var c: number;
}
//方式2
namespace X {
  export declare var a: number;
  export declare var b: number;
  export declare var c: number;
}
//方式3
interface X{
  a: number;
  b: number;
  c: number;
// ():number;
}
declare var X: X;

注意:声明一个对象不一定要用namespace实现,也可通过接口+声明一个对象来实现,副作用是多了一个基本无作用的接口,如方式3。但是,假如X是一个函数对象,即X能以let a=X()函数调用时,你基本上只能靠接口实现(你用any来搞也行),如方式3的注释

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容