初识TypeScript

typescript.png

这张图来自 TypeScript 官网
提到了说 TypeScript 是 JavaScript 的超集!
它有自己的静态类型
并且他不能直接被浏览器运行,需要编译为 JavaScript 之后才能运行。

所以选择学习 TypeScript 的话呢 要有 JavaScript 的基础就可以更快速的入门了!

TS与JS相比较的一些小优势:
1.TS在开发过程中,可以更早的在编辑器中就发现潜在的问题,而JS得在浏览器中运行之后才会暴露错误;
2.TS拥有更友好的编辑器自动提示;
3.TS代码语义更清晰易懂

TS中的静态类型分为两种,一种基础类型,一种是对象类型
类似于JS中的基础类型和引用类型

先来看几个基础类型:

const myName: string = 'Dell'
const myAge: number = 18
const r: boolean = true
const n: null = null
const s: symbol = Symbol('s')
const u: undefined = undefined

再来看看对象类型:

const teacher: {
  name: string
  age: number
} = {
  name: 'Dell',
  age: 18
}

const ages: () => number = () => {
  return 18
}

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

可以这样理解上边的代码 ------ const 变量名称:变量类型 = 值

如果你自己去手动写呢,你会发现它的代码提示非常的强大,可以帮助你更快的进行开发!

接下来看看 type annotation 类型注解 与 type inference 类型推断
感觉如果TS声明变量需要像上方两段代码那样来写,那就太麻烦了,
其实呢 商法的写法都是类型注解,就是我们主动告诉TS声明的变量是什么类型,
但是实际我们不需要这么麻烦,因为TS可以自己去做类型推断

const myName: string = 'Dell'
const myAge: number = 18
// 上方两个变量完全不需要 类型注解 因为他们的值会被TS识别 ,继而推断出来他们是什么类型的变量

上方的代码完全可以像在JS中的写法一样去声明变量,这就是类型注解和类型推断,

下方的情况,就需要用到类型注解了

function getTotal(one, two) {
  return one + two
}
const total = getTotal(1, 2)  

上方的这段代码 total 是什么类型呢?
它不确定是什么类型,因为传参可能是任何类型的数据
在TS无法推断类型的时候,我们可以为它进行类型注解

function getTotal(one: number, two: number) {
  return one + two
}
const total = getTotal(1, 2)  

这样我们声明了入参为 number 下方的 total 也就不需要类型注解了 ,TS可以推断出来 total 也一定为 number 类型!

这就是 类型注解 与 类型推断 。

但是呢,在我们实际项目中,我们很多时候还是会对函数进行 类型注解,

function getTotal(one: number, two: number){
  return one + two + ''
}
const total = getTotal(1, 2)  

假如我期望此函数返回的是 number 类型,但是由于我疏忽大意 写成了 return one + two + '' ,但是却不会报错
因为此时 TS类型推断 total 是一个 string 类型, 所以代码并不会报错,所以我们需要对函数返回值也进行类型注解,
以解决不必要的麻烦

function getTotal(one: number, two: number):number{
  return one + two
}
const total = getTotal(1, 2)  

此时 total 就一定是 number 类型了,如果我手误写错了 return one + two + '' ,代码将会提示我,便可快速定位到问题


image.png

不知道怎么结束了!既然写到这里了,那就继续再写点吧

和JS相同的数据类型就不说了,这里介绍两种TS函数返回的两种类型 void 和 never 两种
void 代表此函数没有 return 值 ,如果此函数有返回值 则报错


image.png

never类型,这个根据TS官方文档来看呢不太好理解,我的理解就是永远执行不到最后的函数

function err (): never {
  throw new Error()
  console.log(123)
}

err()

这就没有问题,这个函数返回值的类型就是一个 never 的类型
如果可以走到终点的函数 , 则会报错


image.png

上方可以执行完的函数返回值声明为 never ,则会报错

既然说到函数了,那就再说一下解构的参数如何类型注解,首先看一下错误的注解方式


image.png

直接来看看正确的解构参数如何类型注解吧,很简单 ,一看就会

function getTotal ({ one, two }: { one: number; two: number }): number {
  return one + two
}

const total = getTotal({ one: 1, two: 2 })

就这么多,下次再写 886

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

推荐阅读更多精彩内容

  • TypeScript是一种由微软开发的支持ES6标准的编程语言,它是Angular2的开发语言。它可以编译成纯Ja...
    巧克力_404阅读 744评论 0 0
  • TypeScript 是 JavaScript 的超集,由微软公司在 2012 年正式发布。 环境搭建: npm ...
    戊戌水瓶阅读 163评论 0 1
  • 目前typescript已经是前端的一个加分项; 微软发明的TypeScript,JavaScript是网景公司发...
    MrTon_1965阅读 608评论 0 0
  • 诞生背景 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性,难以胜任和维护...
    波_0903阅读 298评论 0 0
  • 初识 ts ts与js的不同 ts相比js 首先是ts在声明时需要声明类型注解变量的声明: 数组的声明: 对象的声...
    人在胖天在看_640c阅读 304评论 0 0