一、Typescript学习之基础语法

一 概述
TypeScript(简称 TS)是微软公司开发的一种基于 JavaScript (简称 JS)语言的编程语言。
TypeScript 可以看成是 JavaScript 的超集(superset),即它继承了后者的全部语法,所有 JavaScript 脚本都可以当作 TypeScript 脚本(但是可能会报错),此外它再增加了一些自己的语法。

// 声明变量指定number类型
let a1: number;
a1 = 10;
// 此时赋值非number类型会引起编译报错
// a1 = 'hello';
============================================================
// 声明变量时直接赋值,ts可自动检测类型
let c1 = false;
// 此时赋值非boolean类型会引起编译报错
// c1 = 1;
============================================================
// 可以使用 | 连接多个类型(此时变量的类型可以是指定类型的其中之一)
let d1: number | null | undefined;
d1 = 1;
d1 = null;

============================================================
// 函数参数指定类型
function sum(a2: number, b2: number) {
  return a2 + b2;
}
// 如下调用函数时会编译报错:参数必须是number,参数必须是2个
// sum(123, '456');
// sum(123, 456, 789);
// sum(123);

// 函数返回值指定类型
function sum2(c2, d2): number {
  return c2 + d2;
  // 返回值必须是number,否则会编译报错
  // return '123';
}
============================================================
// ts提供的类型如图

// 其中字面量就是固定的值(相当于常量)
let a3: 10 = 10;
let b3: '你好' = '你好';
let c3: {haha: 1} = {haha: 1};
// 只能改成固定的值,相当于没改,改成其他值编译报错
a3 = 10;
// a3 = 20;
// b3 = '早上好';
c3 = {haha: 1};

// 字面量定义多个值(相当于下拉选的值)
let d3: 'yes' | 'no' | null;
d3 = 'yes';
d3 = null;
// d3 = 'yes123';

============================================================
// any 表示任意类型,并且ts不会对该类型的变量做类型校验(不建议使用,应尽量避免!)
let a4: any;
a4 = 1;
a4 = true;
a4 = '';
a4 = 15;
// 如果声明一个变量时没有指定类型,也没有赋值,这个变量就默认是any(不建议使用,应尽量避免!)
let b4;
b4 = 1;
b4 = true;
b4 = '';
============================================================
// unknown 表示未知类型(变量本身赋值时和 any 效果一样)
let c4: unknown;
c4 = 1;
c4 = true;
c4 = '';
c4 = 15;
============================================================
// 但是使用变量时,unknown 和 any 是有区别的(unknown 类型更安全)
let d4: number;
// a4(any) 可直接赋值给 d4(number)
d4 = a4;
// c4(unknown) 必须做类型校验 或 类型断言
// d4 = c4;
if (typeof c4 === 'number') {
  d4 = c4;
}
// 类型断言,告诉编译器 c4是number,有以下两种写法
d4 = c4 as number;
d4 = <number>c4;

二、基本语法

1.声明原始数据类型
// string类型
const a: string = 'hello'
// number类型
const b: number = 666 // 包括 NAN Infinity
// boolean类型
const c: boolean = true
// null类型
const d: null = null
// undefined类型
const e: undefined = undefined
// symbol类型
const h: symbol = Symbol()
2. 声明Object类型

首先,object类型不单单可以指定对象,还可以指定数组或函数:

const foo1: object = {};
const foo2: object = [];
const foo3: object = function(){};

如果只想指定为对象,如下,对象属性都要提前声明好类型:

const obj: {name: string,age: number} = {
    name: '北极光',
    age:18
}

2.1 声明数组类型
方式一、可以指定声明Array且通过<>指定元素类型,比如声明元素都为数字得数组:

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

方式二、使用 T[],T为元素类型,例:number[]、string[]

const arr: number[] = [1, 2, 3]

可以为数组中每个元素指定类型,严格一一对应

const arr: [number, string, boolean] = [ 666, 'hello world', true ]
3. 声明枚举类型

通过关键字 enum 声明一个枚举类型,如:

enum Status {
    pedding = 1,
    resolve = 2,
    reject = '3'
}
//访问
console.log(Status.pedding);

如果全不写值,默认值为从0开始递增。如果第一个元素为字符类型,就必须全部定义值。如果第一个元素指定为一个数字,后面元素不写值,那值为第一个元素值按位置大小递增的结果。

4. *函数参数与返回类型

指定函数传入 参数类型,指定 返回值类型,调用时传入参数个数与类型都必须相同:

括号里指定每个 参数类型括号右边 指定 返回值的类型

// (name:string,age:number):string
// 分号左侧(name:string,age:number)为参数类型
// 分号右侧string 为返回值类型
function fun (name:string,age:number):string{
  return 'sss'
}
fun('auroras',18);

如果传入参数不确定传不传,那么可以给参数加个 ? 表明它是可选的:

function fun (name:string,age?:number):string{
  return 'sss'
}
fun('auroras');

或者给参数添加默认值,那也会成为可选参数:

function fun (name:string,age:number=666):string{
  return 'sss'
}
fun('auroras');

如果参数个数不确定,可以用扩展运算符加解构赋值表示,当然要传入与指定类型一致的:

function fun (name:string,age:number=666,...res:number[]):string{
  return 'sss'
}
fun('auroras',1,2,3);

函数表达式:

const fun2:(name:string,age:number)=>string = function(name:string,age:number){
  return 'sss'
}
5.任意类型
6.类型断言

类型断言就是明确的告诉 typescript 这个变量就是某种类型的,百分之百确定。不用 typescript 在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。

参考文章
分享Typescript的13个基础语法

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

推荐阅读更多精彩内容