0

0

介绍JavaScript和TypeScript的声明类型

巴扎黑

巴扎黑

发布时间:2017-08-16 10:40:55

|

2250人浏览过

|

来源于php中文网

原创

javascript 语法改写为 typescript 语法,有两个关键点,一点是类成员变量(field)需要声明,另一点是要为各种东西(变量、参数、函数/方法等)声明类型。 
从 es6 语法改写为 typescript 语法,有两个比较重要的知识点,一个是声明类成员,另一个是声明类型。这两个语法特点在 javascript 中都不存在。而这两个点直接引出了两个关键性的问题,有哪些类型?怎样声明? 

类型 

在说 typescript 的类型之前,我们先复习一下 javascript 的七种类型:

undefined

function

boolean

number

立即学习Java免费学习笔记(深入)”;

string

object

symbol

这七种类型都是可以通过 typeof 运算符算出来的,但其中并没有我们常见的 Array、null,Date 之类的类型——因为它们其实都是 object。 
TypeScript 的重要特性之一就是类型,所以 TypeScript 中的类型要讲究得多,除了 JavaScript 中的类型之外,还定义了其它一些(不完全列表)

Array,或 T[],表示 T 类型的数组

null,空类型,其作用与 strictNullChecks 编译参数有关

Tuple(元组),形如 [Number, String]

enum T,定义枚举类型 T,可理解为集中对数值常量进行命名

interface T,接口,T 是一种接口类型

uBrand
uBrand

一站式AI品牌创建平台,在线品牌设计,AI品牌策划,智能品牌营销;uBrand帮助创业者轻松打造个性品牌!

下载

class T,类,T 是一种类型

any,代表任意类型

void,表示没有类型,用于声明函数类型

never,表示函数不可返回的神奇类型

……

具体的类型这里就不详述了,官方 Handbook 的 Basic Type、Interfaces、Classes、Enum、Advanced Types 这几部分说得非常清楚。 
不过仍然有一种类型相关的特性不得不提——泛型。如果只是说数据类型,纯粹的 JSer 们还可以理解,毕竟类型不是新鲜玩意儿,只是扩展了点种类。但是泛型这个东西,纯粹的 JSer 们可能就没啥概念了。 
泛型主要是用一个符号来表示一些类型,只要是符合约束条件(默认无约束)的类型,都可以替换掉这个类型符号来使用,比如 

function test(v: T) {
   console.log(v);}
test(true);    // 显式指定 T 由 boolean 替代test("hello");          // 推断(隐式) T 被 string 替代test(123);              // 推断(隐式) T 被 number 替代

泛型与强类型相关,即需要进行严格的类型检查,又想少写相似代码,所以干脆用某个符号来代替类型。泛型这个名称本身可能并不是很好理解,但是如果借用 C++ 的“模板”概念,就好理解了。比如上面的泛型函数,根据后面的调用,可以被解释为三个函数,相当于套用模板,用实际类型代替了 T: 
function test(v: boolean) { ... }function test(v: string) { ... }function test(v: number) { ... }

关于泛型,更详细的内容可以参考 Handbook 的 Generic 部分。 
类型就简述到这里,简单的类型一看就能明白,高级一点的类型我们以后再开专题来详述。不过既然选择使用 TypeScript,必然会用到它的静态类型特性,那就必须强化识别类型的意识,并养成这样的习惯。对于纯 JSer 来说,这是一个巨大的挑战。 


声明类型 

声明类型,主要是指声明变量/常量,函数/方法和类成员的类型。JS 中使用 var 声明一个变量,ES6 扩展了 let 和 const。这几种声明 TypeScript 都支持。要为变量或者常量指定类型也很简单,就是在变量/常量名后面加个冒号,再指定类型即可,比如 

// # typescript
 // 声明函数 pow 是 number 类型,即返回值是 number 类型// 声明参数 n 是 number 类型function pow(n: number): number {
    return n * n;}
 // 声明 test 是无返回值的function test(): void {
    for (let i: number = 0; i < 10; i++) {  // 声明 i 是 number
        console.log(pow(i));
    }}

这段代码演示了对函数类型、参数类型和变量类型地声明。这相对于 JavaScript 代码来说,似乎变得更复杂了。但是考虑下,如果我们在某处不小心这样调用了 pow: 

// # javascript
 let n = "a";let r = pow(n);     // 这里存在一个潜在的错误

JavaScript 不会提前检查错误的,只有在执行到 r = pow(n) 的时候给 r 赋值为 NaN。然后如果别处又用到 r,可能就会造成连锁错误,可能很要调试一阵才把问题找得出来。 
不过上面两行代码在 TypeScript 里是通不过转译的,它会报告一个类型不匹配的错误: 
Argument of type 'string' is not assignable to parameter of type 'number'.


声明类成员 

这时先来看一段 JavaScript 代码 

// # javascript (es6)
 class Person {
    constructor(name) {
        this._name = name;
    }
 
    get name() {
        return this._name;
    }}

这段 JavaScript 代码如果翻译成 TypeScript 代码,会是这样 

// # typescript
 class Person {
    private _name: string;
 
    public constructor(name: string) {
        this._name = name;
    }
 
    public get name(): string {
        return this._name;
    }}

注意到 private _name: string,这句话是在声明类成员变量 _name。JavaScript 里是不需要声明的,对 this._name 赋值,它自然就有了,但在 TypeScript 里如果不声明,就会报告属性不存在的错误: 
Property '_name' does not exist on type 'Person'.

虽然写起来麻烦了一点,但是我也能理解 TypeScript 的苦衷。如果没有这些声明,tsc 就搞不清楚你在使用 obj.xxxx 或者this.xxxx 的时候,这个 xxxx 到底确实是你想要添加的属性名称呢,还是你不小心写错了的呢? 
另外要注意到的是 private 和 public 修饰符。JavaScript 中存在私有成员,为了实现私有,大家都想了不少办法,比如闭包。 
TypeScript 提供了 private 来修饰私有成员,protected 修改保护(子类可用)成员,public 修饰公共成员。如果不添加修饰符,默认作为 public,以兼容 JavaScript 的类成员定义。不过特别需要注意的是,这些修饰符只在 TypeScript 环境(比如转译过程)有效,转译成 JavaScript 之后,仍然所有成员都是公共访问权限的。比如上例中的 TypeScript 代码转译出来基本上就是之前的 JavaScript 代码,其 _name 属性在外部仍可访问。 
当然在 TypeScript 代码中,如果外部访问了 _name,tsc 是会报告错误的 
Property '_name' is private and only accessible within class 'Person'.

所以应用内使用 private 完全没问题,但是如果你写的东西需要做为第三方库发布,那就要想一些手段来进行“私有化”了,其手段和 JavaScript 并没什么不同。 


小结 

从 JavaScript 语法改写 TypeScript 语法,我们来做个简单的总结:

类成员需要声明。

变量、函数参数和返回值需要申明类型。

如果所有这些东西都要声明类型,工作量还是满大的,所以我建议:就接口部分声明类型。也就是说,类成员、函数/方法的参数和返回类型要声明类型,便于编辑器进行语法提示,局部使用的变量或者箭头函数,在能明确推导出其类型的时候,可以不声明类型。 

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

28

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

7

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

2

2026.01.31

漫画防走失登陆入口大全
漫画防走失登陆入口大全

2026最新漫画防走失登录入口合集,汇总多个稳定可用网址,助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

8

2026.01.31

php多线程怎么实现
php多线程怎么实现

PHP本身不支持原生多线程,但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

1

2026.01.31

php如何运行环境
php如何运行环境

本合集详细介绍PHP运行环境的搭建与配置方法,涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php环境变量如何设置
php环境变量如何设置

本合集详细讲解PHP环境变量的设置方法,涵盖Windows、Linux及常见服务器环境配置技巧,助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php图片如何上传
php图片如何上传

本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案,适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

2

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号