1 Star 0 Fork 0

海阳之新 / ts-study

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

TypeScript学习笔记

TS简介

TypeScript 是JavaScript的一个超集,支持ECMAScript 6标准。以下简称TS。 TS是微软开源的语言,设计目标是开发大型应用,它可以编译成纯JavaScript,编译出来的 JavaScript可以运行在任何浏览器上。

官网:https://typescriptlang.org

为什么要使用TypeScript?

  • 类型推演与类型匹配 TypeScript通过类型注解提供编译时的静态类型检查。
  • 开发编译时报错
  • 极大程度地避免了低级错误
  • 支持JavaScript最新特性(包含ES6/7/8)

文件扩展名为:.ts,语法上区分大小写,语句末尾的分号是可选的。 建议使用let替换var,let为ES6引入关键词,主要是为了解决var作用域混乱的问题。

TS数据类型

  • 布尔类型(boolean)
  • 数值类型(number)
  • 字符串类型(string)
  • 数组类型(array)
  • 元组类型(tuple)
  • 枚举类型(enum)
  • any和unknown类型
  • null和undefined类型
  • void类型
  • never类型

TS与JS的关系

ESMA International(爱玛国际)是一个JS标准组织,负责维护版本。

ECMAScript = ES

ES3/ES5版本:支持目前所有主流浏览器,没有ES4这个版本(失败了)

ES6版本 = ES2015:颠覆性版本,开始支持面向对象编程,支持const、let,引入了Module的概念,但目前主流浏览器未支持,需要使用TSC来编译成ES5再使用。

ECMA约定,ES的版本由ES+年份来命名,ES7=ES2016,ES8=ES2017

安装TS

前置条件:先安装好nodejs

npm install -g typescript

tsc --version
Version 4.3.5

使用TS

1、新建一个app.ts文件;

mkdir src
cd src
touch app.ts 

2、新建ts配置文件

cd ../
tsc --init

内容如下:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5",
        "strict": false,
        "noImplicitAny": true,
        "strictNullChecks": false,
        "sourceMap": false,
        "outDir": "./dist"
    },
    "include": [
        "src/**/*"
    ],
    "compileOnSave": false
}

3、编写代码

4、编译成js

tsc -t es5 -w  ./src/*.ts

5、运行js

node app.js

配置文件与TSC命令参数说明

tsconfig.json

{
    "compilerOptions": { //编译配置选项 确定如何编译ts文件
        "module": "commonjs", 
        "target": "es5", 
        "sourceMap": false,
        "noImplicitAny": true, 
        "strictNullChecks": false,
        "outDir": "./dist"
    },
    "include": [
        "src/**/*"
    ]
}

以下参数与配置文件里的配置项意义相同:

配置项 说明
--module 可简写为-m,载入扩展模块,可以使用commonjs、amd、umd、system、es6、es2015、none这些选项
--target 可简写为-t,用于指定生成代码的兼容版本,可以从es3、es5、es2015、es6中选择一个,如果不设置,默认生成的代码兼容到es3。
--declaration 可简写为-d,额外生成一个 .d.ts 扩展名的文件。
--removeComments 如果设置为true时,则删除文件的注释
--out 编译多个文件并合并到一个输出的文件
--sourcemap sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。如果设置为true,则会生成一个 sourcemap (.map) 文件。
--watch 可简写为-w,设置为true时开启监视模式,编译器将监视ts文件变化。当文件变化时,自动编译成js。
--outDir 指定生成js文件的目录
--noImplicitUseStrict 当设置为true时,编译输出时不会调用'use strict'指令(也就是不生成use strict)
--sourceRoot 设置在调试时定位的目标文件根目录
--forceConsistentCasingInFileNames 设置为true时,将强制区分大小写。默认为false。
--exclude exclude用于排除不需要编译的ts文件,该属性和files属性冲突,两者只能设置其一。
--files 当files属性不存在时,编译器会编译当前目录和子目录中的所有文件。当files属性存在是,仅仅是编译files列表中的文件。该属性和exclude属性冲突。如果同时指定了exclude和files,则files属性优先。
--compileOnSave 该属性用于启用保存时编译功能。**注意:**当前仅仅只有VS2015配置TypeScript1.8.4以后或者在atom中搭配atom-typescript插件才有效

保留关键词

break、as、catch、switch、case、if、throw、else、var、number、string、get、module、type、instanceof、typeof、public、private、enum、export、finally、for、while、void、null、super、this、new、in、return、true、false、any、extends、static、let、package、implements、interface、function、new、try、yield、const、continue、do

学习资料

https://www.tslang.cn/docs/home.html 中文手册

https://www.imooc.com/learn/1306

https://www.runoob.com/typescript/ts-tutorial.html

http://www.semlinker.com/master-ts-generic/ 一文读懂 TypeScript 泛型及应用

https://segmentfault.com/a/1190000023858355 细数这些年被困扰过的 TS 问题

https://24kcs.github.io/vue3_study/chapter2/1_type.html 尚硅谷教程

VsCode配置

安装插件:

TypeScript Toolbox
TSLint
JSON to TS

HTML Boilerplate
Beautify

空文件

简介

TypeScript学习笔记 展开 收起
TypeScript 等 3 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/vsiryxm/ts-study.git
git@gitee.com:vsiryxm/ts-study.git
vsiryxm
ts-study
ts-study
master

搜索帮助