[学习笔记] TypeScript入门基础

基础语法

ts程序组成部分

模块、函数、变量、语句和表达式、注释

一些注意

- ts会忽略程序中的空格、制表符和换行符

- ts区分大小写

- 分号可选,建议使用

- 注释与js相同

- ts是一种面向对象的编程语言

基础类型

ts包含的数据类型

any - 任意类型:声明为any的变量可以赋予任意类型的值

number - 数字类型

string - 字符串类型

boolean - 布尔类型

元素类型[] - 数组类型

    let arr: number[] = [1, 2]

Array<元素类型> - 数组类型(使用数组泛型) 

    let arr: Array<number> = [1, 2]

[元素类型1, 元素类型2, ...] - 元组类型:元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,但对应位置上但类型需要相同。

    let x: [string, number];

    x = ['string', 1];    // 正常运行

    x = [1, 'string'];    //  报错

enum - 枚举:枚举类型用于定义数值集合

    enum Color {Red, Green, Blue};

    let c: Color = Color.Blue;

    console.log(c);   // 2

void - void:用于标识方法返回值的类型,表示该方法没有返回值

    function hello(): void {

        alert('Hello World!')

    }

null - null:表示对象值缺失

undefined - undefined:用于初始化变量为一个未定义的值

never - never:never是其他类型(包括null和undefined)的子类型,代表从不会出现的值

Any 类型

任意值是TypeScript针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况:

1 - 变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查

2 - 改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查

3 - 定义存储各种类型数据的数组时

Null 和Undefined

null

在JavaScript中null表示“什么都没有”

在TypeScript中null时一个只有一个值的特殊类型,表示一个空对象引用。

用typeof检测null返回是object。

undefined

在JavaScript中,undefined是一个已声明但未赋值的变量。

Null和Undefined是其他任何类型(包括void)的子类型,可以赋值给其他类型,如数字类型,此时,赋值后的类型会变成null或undedined。

而在TypeScript中启用严格的空校验(--strictNullChecks)特性,就使得null和undefined只能被赋值给void或本身对应的类型。

never类型

never是其他类型的子类型,代表从不会出现的值。这意味着声明为never类型的变量只能被never类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环)

变量声明

ts变量声明

ts变量的命名规则与js变量的命名规则相同

变量不要使用name否则会与DOM中的全局window对象下的name属性出现重名

ts是强类型语言,如果将不同的类型赋值给变量会编译错误

类型断言

类型断言可以用来手动制定一个值的类型,即允许变量从一种类型更改为另一种类型。

类型推断

当类型没有给出时,TypeScript编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态的any类型。

let num = 2;   // 类型推断为 number

num = '2';   // 编译错误

编译错误原因:第一行代码num的类型已被推断为number了,不能再将字符型赋值给num。

变量作用域

全局作用域

类作用域 - 这个变量也可称为字段。类变量声明在一个类里,但在类的外面,该变量可以通过类的对象来访问。类变量也可以是静态的,静态的变量可以通过类名直接访问。

局部作用域

函数

函数返回值

function 函数名(): 返回值类型 {}

带参数函数

function 函数名( 参数1: 参数1的类型, 参数2: 参数2的类型, ... ) {}

可选参数

function 函数名( 参数?: 参数类型 ) {} - 在形参后加上?,该参数即作为可选参数

默认参数

function 函数名( 参数: 参数类型 = 默认值 ) {}

剩余参数

当我们不知道要向函数传入多少个参数时,可以使用剩余参数来定义。

function 函数名( ...参数数组: 数组类型 ) {}

Lambda函数(箭头函数)

let 变量名 = (参数: 参数类型) => {}

参数可不指定类型,通过函数内来推断参数类型

函数重载

重载就是方法名字相同,而参数不同,返回类型可以相同也可以不同。

每个重载的方法(或构造函数)都必须有一个独一无二的参数类型列表。

* 如果参数类型不同,则参数类型应设置为any

* 如果参数数量不同,则可以将不同的参数设置为可选

TypeScript Number

Number 对象属性

MAX_VALUE:可表示的最大的数,MAX_VALUE属性值接近于 1.79E+308。大于MAX_VALUE的值代表“Infinity”

MIN_VALUE:可表示的最小的数,即最接近 0 的正整数(实际上不会变为 0 ),MIN_VALUE的值约为 5e-324,小于MIN_VALUE的值将会转换为 0 。最大的负数是 -MIN_VALUE。

NaN:非数字值

NEGATIVE_INFINITY:负无穷大,溢出时的返回值。该值小于MIN_VALUE。

POSITIVE_INFINITY:正无穷大,溢出时的返回值。该值大于MAX_VALUE。

prototype:Number 对象的静态属性。可以向对象添加属性和方法。

constructor:返回对创建此对象的Number函数的引用。

Number 对象方法

toExponential() :把对象的值转为指数计数法

toFixed() : 把数字转换为字符串,并可指定小数点的位数

toLocaleString() : 把数字转换为字符串,使用本地数字格式顺序

toPrecision() : 把数字格式转为指定的长度

toString() :把数字转换为字符串,使用指定的基数。数字的基数是2~36之间的整数。若省略该参数,则使用基数10.

valueOf() :返回一个Number对象的原始数字值

TypeScript String

String 对象属性

length

prototype

constructor

String 对象方法

localeCompare() - 用本地特定对顺序来比较两个字符串 - 相同返回0 不同返回-1

TypeScript Array(数组)

声明数组的语法格式

let array_name [:datatype];   // 声明

array_name = [val1, val2, val3, ...];   // 初始化

let array_name [:datatype] = [val1, val2, val3, ...];   // 直接在声明时初始化

*如果数组声明时未设置类型,则会被认为时any类型,在初始化时根据第一个元素的类型来推断数组的类型。

Array 对象

Array 对象的构造函数接受两种值:

表示数组大小的数值

初始化的数组列表 元素使用逗号隔开

数组结构

let arr:number[] = [1, 2];

let [num1, num2] = arr

// num1 = 1, num2 = 2

数组迭代

for ... in

多维数组

let arr_name:datatype[] []

数组方法

reduce() - 将数组元素计算为一个值(从左到右)

reduceRight() - 将数组元素计算为一个值(从右到左)

TypeScript 元组

创建元组

let tuple_name = [val1, val2, val3, ...]

元组运算

push() - 向元组尾部添加元素

pop() - 从元组尾部移除元素,并返回移除的元素

结构元组

let tup = ['a', 1];

let [a, b] = tup;

// a = 'a', b = 1

TypeScript 联合类型

联合类型可以通过管道将变量设置多种类型,赋值时可以根据设置的类型来赋值。

*只能赋值指定的类型

联合类型 格式

datatype1 | datatype2 | datatype3 | ...

TypeScript 接口

定义接口

interface interface_name {}

接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型,索引值类型可以是数字或字符串。

接口继承

单接口继承:Child_interface_name extends super_interface_name

多接口继承:Child_interface_name extends super_interface1_name, super_interface2_name, ...

TypeScript 类

类的模块(类的数据成员)

字段 - 类里面声明的变量,表示对象的有关数据

构造函数 - 类实例化时可调用,可以为类的对象分配内存

方法 - 对象要执行的操作

类的继承

子类不能继承父类的私有成员(方法和属性)和构造函数。

一次只能继承一个类,不支持继承多个类,但支持多重继承(A继承B,B继承C)。

语法:class child_class_name extends parent_class_name

static 关键字

static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。

instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型,如果是返回true,否则返回false。

访问控制修饰符

TypeScript中,可以使用访问控制符来保护对类、变量、方法和构造方法的访问。

支持三种不同的访问权:

public(默认) - 公有 可以在任何地方被访问

protected - 受保护 可以被其自身以及其子类和父类访问

private - 私有 只能被其定义所在的类访问

类和接口

类可以实现接口,使用关键词 implements,可将接口字段作为类的属性使用。

TypeScript 对象

TypeScript 类型模板

TypeScript 中的对象必须是特定类型的实例。

在JavaScript中如果需要在对象中添加方法,可以直接 object.方法名 = ... 添加,但是在TypeScript中使用该方法会出现编译错误,因为TypeScript 中的对象必须是特定类型的实例。

TypeScript 命名空间

命名空间定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相关的。

命名空间使用 namespace 来定义。

如果需要在外部调用命名空间内的标识符,需要在标识符前添加 export 关键词。

举例:

    namespace 命名空间名字 {

        export interface 接口名 {}

        export class 类名 {}

        ... ...

    }

要在另一个命名空间调用 语法格式为:需要被调用的标识符所在命名空间.标识符

如果一个命名空间在另一个TypeScript文件中,则需要使用三斜杠 /// 引用它。

    /// <reference path = "SomeFileName.ts" />

TypeScript 模块

模块的导入导出

export 导出 import 导入

    举例:

    导出文件名:SomeInterface.ts 

    导出代码:export interface SomeInterface { }

    导入代码:import someInterfaceRef = require("./SomeInterface")

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

推荐阅读更多精彩内容