TypeSctipt语法和类型基础

TypeScript基础语法

TypeScript程序由以下部分组成:

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

tsc常用编译参数

参数 参数说明
--help 显示帮助信息
--module 载入扩展模块
--target 设置ECMA版本
--declaration 额外生成一个.d.ts扩展名的文件(会生成两个文件.d.ts和.js)
--removeComments 删除文件的注释
--out 编译多个文件并合并到一个输出文件
--sourcemap 生成一个sourcemap(.map)文件。sourcemap是一个存储源代码和编译代码对应闻之映射的信息文件。
--module nolmplicitAny 在表达式和声明上有隐含的any类型时报错
--watch 在监视模式下运行编译器。会监视输出文件,在他们改变时重新编译。

TypeScript保留关键字

image.png

语法

  • 空白和换行
    TS会忽略程序中出现的空格、制表符和换行符(用来缩进代码)。
  • TypeScript区分大小写字符
  • 分号可选
    写在同一行一定要使用分号来分隔,否则会报错(每行指令都是一段语句)。
  • 注释
    单行注释//;多行注释/* */

TypeScript和面向对象

TS是一种面向对象的编程语言。
面向对象主要有两个概念:对象和类。

  • 对象:对象是类的一个实例,有状态和行为。
  • 类:类是一个模板,描述一系列对象的行为和状态。
  • 方法:方法是类的操作的实现步骤。

基础类型

数据类型 关键字 描述
任意类型 any 声明为any的变量可以赋予任意类型的值。
数字类型 number 双精度64位浮点值。可以表示整数和分数,进制数。
字符串类型 string ‘和“表示字符串类型。`定义多行文本和内嵌表达式。
布尔类型 boolean true和false
数组类型 声明变量是数组。number[]Array<number>
元组 用来表示已知元素的数量和类型的数组。各元素类型不必相同,对应位置类型需相同。
枚举 enum 枚举类型用于定义数值集合。enum Color {Red, Green, Blue};let c: Color = Color.Blue;console.log(c); // 输出 2??
void void 用于标识方法返回值的类型,表示该方法没有返回值 。
null null 空值
undefined undefined 未定义的值
never never never是其他类型(包括null和undefined)的子类型,代表从不会出现的值。

Any类型

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

  1. 变量的值会动态改变,如用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查。
  2. 改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查。??
let x: any = 4;
x.ifItExists();    // 正确,ifItExists方法在运行时可能存在,但这里并不会检查
x.toFixed();    // 正确
  1. 定义存储各种类型数据的数组。let arr: any[]=[1,false,'']

undefined

null和undefined是其他类型(包括void)的子类型,可以赋值给其他类型,赋值后的类型会编程null和undefined.而TS中启用严格的空校验(--strictNuilChecks)特性,就可以使得null和undefined只能被赋值给或本身对应的类型。启用 --strictNullChecks;let x: number | null | undefined;联合类型

never类型

never是其他类型 (包括null和undefined)的子类型,代表从不会出现的值。never类型的变量只能被never类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(无线循环)。

let x: never;
let y: number;

// 运行错误,数字类型不能转为 never 类型
x = 123;

// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

TypeScript变量声明

变量是一种使用方便的占位符,用于引用计算机地址。可以把变量看作存储数据的容器。
TS变量命名规则:

  • 变量名可以包含数字和字母。
  • 除了下划线 _和美元$符号外,不能包含其他特殊字符,包括空格。
  • 不能以数字开头。
//声明变量的类型及初始值:
var uname:string = "Runoob";
//声明变量的类型,无初始值,变量值 会设置为undefined
var uname:string;
//声明变量并赋初始值,不设类型,可以是任意类型:
var uname = "Runoob";
//声明变量不设类型和初始值,可以是任意类型,默认初始值为undefined
var uname;

注意:变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。
TypeScript 遵循强类型,如果将不同的类型赋值给变量会编译错误。

类型断言

它之所以不被称为类型转换,是因为转换通常意味着某种运行时的支持。但类型断言纯粹是一个编译时语法,它也是一种为编译器提供关于如何分析代码的方法。

类型推断

当类型没有给出时,TS编译器利用类型推断来推断类型。(类型一旦被推断,后面再次赋值其他类型时,会编译错误)
如果由于缺乏声明而不能推断出类型,则类型被默认动态any类型。

变量作用域

  • 全局作用域
  • 类作用域:这个变量也可以叫做字段.类变量声明在类中,类方法之外。可以通过类的对象来访问变量。类变量也可以是静态的,可以直接通过类名访问。
  • 局部作用域
var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

TypeScript运算符

TypeScript条件语句

TypeScript循环

同JS类似

TypeScript函数

可选参数、默认参数和剩余参数

  1. 可选参数
    在TS函数中,若定义了参数,就必须传入这些参数,除非将参数设置为可选,可选参数使用?标识。function buildName(firstName: string, lastName?: string)
    可选参数必须跟在必须参数后。若都是可选参数就不做要求。
  2. 默认参数
    可以设置参数的默认值,这样在调用函数的时候,若不传入该参数的值,则使用默认参数function discount(price:number,rate:number = 0.50)
    编译后的js将在内部if (rate === void 0) { rate = 0.50; }判断rate的取值。
  3. 剩余参数
    当不确定要向函数传入多少个参数,剩余参数允许将一个不确定数量的参数作为一个数组传入。
    函数的最后一个命名参数以...为前缀,它将成为一个由剩余参数组成的数组。

函数重载

重载是方法名字相同,参数不同,返回类型可相同也可不同。每个重载的方法(或者构造函数)的参数类型列表独一无二。

  1. 参数类型不同:
    function disp(string):void;
    function disp(number):void;
  2. 参数数量不同
    function disp(n1:number):void;
    function disp(x:number,y:number):void;
  3. 参数类型顺序不同
    function disp(n1:number,s1:string):void;
    function disp(s:string,n:number):void;
    如果参数类型不同,则参数类型应设置为any;参数数量不同,将不同的参数设置为可选。
    同JS类似
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容