typescript的基础知识和一些注意事项

typescript是微软开发的,是JavaScript的超集,遵循es6规范
2016年发布的angular 2框架 是由typescript编写的,这门语言是由微软和谷歌在背后支持
typescript的优势
支持es6规范
强大的IDE检查 (类型检查,语法提示,重构)
angular 2框架的语言(能更好的学习angular 2)
vscode 自动编译ts文件
tsc -init 初始化 创建typescript.json
第二步:打开tsconfig.json文件修改和删除相应配置(如果想快速修改配置,请复制下列配置)
”target” : 编译为何种规范,一般设置为 ES5 或者 ES2016/2017
“outdir” : 输出目录
“alwaysStrict” : 打开严格模式 (‘use strict’)
{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "amd",
"removeComments": false,
"sourceMap": false,
"outDir": "js"//你要生成js的目录
}
}

第三步:打开VSCode进入该目录,按下 Ctrl+shift+B 快捷键会进行编译,初次编译会选择编译模式(自行编写.ts文件测试)
注意:
监视模式 是每当TS文件有变动就会自动编译,构建模式是手动命令编译时才会去编译,这里选择监视模式

访问修饰符
跟java类似,TypeScript的访问修饰符有三个,分别是public、private、protected 。
TypeScript的默认访问修饰符是public。
1)public 声明的属性和方法在类的内部和外部均能访问到。
2)protected 声明的方法和属性只能在类的内部和其子类能访问。
3)private 声明的方法和属性只能在其类的内部访问。

readonly修饰符
使用readonly关键字会将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。且值不能不能被修改,和const类似。
最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const,若做为属性则使用readonly。

存取器(Getter And Setter)
TypeScript中的存取器就类似与java中set和get方法,只不过调用的方式不一样。比如在一个类中我们将其中一个属性用private修饰,那么,在类的外部就无法访问到该属性,这个时候我们可以通过getters/setters来封装一下,以便在类的外部去访问该属性。需要注意的是,只带有 get不带有set的存取器自动被推断为readonly。也就是说,如果只写get但没有set的话,我们是不能更改值的。

注意事项
(1)在引用.tsx文件的时候,不需要后缀名。而引用.jsx文件的时候,要加上后缀名。
(2)在.tsx中导入React需要使用import * as React from ...,不能使用import React from ...,
为tsconfig.json > compilerOptions增加allowSyntheticDefaultImports选项为true可以解决这个问题,
但是vs code还是会标红(重启vs code可解决)。
(3).jsx能识别.jsx和.tsx的默认导出,
.tsx能识别.tsx的默认导出,但是不能识别.jsx的默认导出
(4) 为了能让TypeScript识别导入JavaScript模块中变量的类型,还要为模块添加.d.ts文件。

50 声望
7 粉丝
0 条评论
推荐阅读
react使用装饰器
打开 package.json ,可以看到eject。运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来(运行之前要保证本地没有待提交git的代码)

胡少龙阅读 3.1k评论 1

2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.3k评论 4

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城17阅读 6.7k评论 3

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.6k评论 7

JS 函数式概念: 管道 和 组合
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智9阅读 933

Vue3 + Vite2 + TypeScript + Pinia(Vuex)+JSX 搭建企业级开发脚手架【开箱即用】
随着Vue3的普及,已经有越来越多的项目开始使用Vue3。为了快速进入开发状态,在这里向大家推荐一套开箱即用的企业级开发脚手架,框架使用:Vue3 + Vite2 + TypeScript + JSX + Pinia(Vuex) + Antd。废话不多话,...

阳晨@11阅读 3.5k

封面图
掌握 TypeScript:20 个提高代码质量的最佳实践
本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。更多开源作品请看 GitHub [链接] ,包含一线大厂面试完整考点、资料以及我的系列文章。

前端小智9阅读 963

50 声望
7 粉丝
宣传栏