在微风中轻语自己，在宁静中书写世界
我先说说个人在平时开发中使用js的一些痛点吧，我们都知道，js是一种弱类型语言，变量的类型可以通过赋值被改变。js本身就可以通过赋值的类型来对变量的类型进行推倒，这种机制使得js在声明变量的时候，只需要一个关键词var或者let 来声明，写代码的人就不需要考虑它应该是什么类型的，这就导致编写的程序在实际运行中出现各种各样的错误。首先你需要知道，编程开发中我们有一个共识：错误出现的越早越好。我列举一下我平时常见的一些错误：
Array类型的，但是后续操作不当，导致类型被改变，而编译器也没有进行提示，这导致后边的程序使用foreach、map等方法读取变量时，发现类型不是Array类型，这就会导致报错。这些错误主要是缺乏类型思维导致的错误，如果可以在js中引入类型判断这一机制，那么上边的这些错误就可以在编码过程中及时发现了，而不会等到运行时才报错了，可以大幅度提高开发的效率。为了弥补Java Script类型约束上的缺陷，增加类型约束，很多公司推出了自己的方案。
他们都致力于为JavaScript提供类型检查；而现在，无疑TypeScript已经完全胜出，同时，企业对前端工程师的招聘要求中，typescript已经默认为必会技能了。
对于接触过一些面向对象编程的同学来说，学习基本语法应该不难，有些语法特性可以自行类比学习，我就不会讲述的那么详细，因为这往往有点多余，自己思考得来的东西才更加影响深刻。
以 JavaScript 为基础构建的语言，它针对 JavaScript 存在的问题进行设计，是一个 JavaScript 的超集。Typescript 扩展了 JavaScript，并添加了类型。可以在任何支持 JavaScript 的平台中执行。TS 不能被 JS 解析器直接执行，TS 需要编译为 JS 才能执行。
ts 是以 Node 为基础进行解析的，因此需要安装 node，之后使用 npm 全局安装 typescript，创建一个 ts 文件，使用 tsc 对 ts 文件进行编译，编译之后的 ts 文件会变为 js 文件，之后再执行 js 文件。
# npm 全局安装TypeScript
npm i -g typescript
#执行ts文件
tsc xxx.ts
安装完毕之后，通过 tsc -v 查看是否出现版本号。
类型可以声明在变量上
语法：let 变量名称: 约束类型
let num：number;
一般是直接声明完类型直接赋值。
let num: number = 123;
如果变量的声明和赋值是同时进行的，TS 可以自动对变量进行类型检测。
let bol = true; // 之后只能复制boolean类型的值
类型也可以声明在
函数的参数上
function sum(a: number, b: number): number{
return a + b;
}
let res = sum(1, 2); // res只能是number类型，因为sum函数已经声明了返回的变量是number类型
可以使用
|来连接多个类型，称为联合类型。
let a: "male" | "female"; //字面量来赋值约束类型
let c: boolean | string;
c = true;
c = "ceshi"
any表示的是任意类型，一个变量设置为 any 后相当于该变量关闭了类型检测，使用 ts 的时候，不建议使用 any 类型。声明变量如果不指定类型，则 ts 解析器则会自动判断变量的类型为 any，相当于隐式的 any。any可以赋值给任何变量，除never
unknown 表示未知类型的值，它和 any 的区别是给其他类型的变量不能赋值。遇到一个类型不确定的便使用 unknown，不要使用 any
let e: unknown;
let str: string = "123"
//第一种赋值方式
if(typeof e = "string"){
str = e;
}
// 类型断言,可以用来解析变量的实际类型
str = e as string
str = <string>e;
void 是空值，一般用于设置函数的返回值
function fn(): void{
// 可以不返回
}
never 表示永远不会返回结果
function fn(): never{
throw new Error("报错"); // 没有返回值的函数
}
object 类型，表示一个 js 对象
let b: {name: string, age?: number}; // ?表示属性是可选的
b = {name: '对象'}
//表示任意类型的属性，但必须有name
let obj: {name: string, [propName: string]: any}
obj = {name: "zhubajie"， age: 18}
函数结构的表示方法
let d: (a: number, b: number) => number;
function d(a1: number, a2: number):number{}
array 数组
let e: string[]; // 表示字符串数组
e = ["a", "b", "c"]
let g: Array<number>; //方法二表示
元组类型表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let x: [string, number];
x = ['hello', 0] //ok
x = [10, 'hello'] // Error
当访问一个已知索引的元素，会得到正确的类型：
console.log(x[0].substr(1));
console.log(x[1].substr(1)); // 由于x[1] 是number类型的，因此不能使用substr方法
当访问一个越界的元素，会使用联合类型替代：
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型
枚举（）emum 类型是 JavaScript 标准数据类型的一个补充。
emum Color {Red, Green, Blue};
let c: Color = Color.Green;
默认情况下，从 0 开始为元素标号，也可以自己手动指定成员的数值，例如：将上边的枚举元素改为从 1 开始编号
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green
也可以全部手动赋值：
enum Color {Red = 1, Green = 2, Blue = 3}
let c: Color = Color.Green;
枚举类型的一个便利就是由枚举的值知道枚举的类型。例如，我们知道数值为 2，但是不确定他映射到 Color 的那个名字，便可以查找相应的名字：
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]
let 和 const 是 JavaScript 里相对较新的变量声明方式，let 很多方面是与 var 相似的，但是可以避免在 JavaScript 里的一些常见问题。const 是对 let 的增强，它能阻止对一个变量再次赋值。
var 声明的变量会导致变量重复，且其他作用域也可以访问到 var 声明的变量。
const与 let 声明相似，但是就像它的名字所表达的，它们被赋值后不能再改变。换句话说，它们拥有与 let 相同的作用域规则，但是不能对它们重新赋值。
关于 const 和 let 的使用需要视具体情况而定，基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。 使用const也可以让我们更容易的推测数据的流动。
数组解构
数组解构赋值
let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2
作用于函数的参数：
function fun([a, b]: [number, number]){
}
也可以在数组里边使用 ... 来创建剩余变量
let [first, ...rest] = [1, 2, 3, 4];
console.log(first) // 1
console.log(rest) // 2,3,4
解构其他元素
let [, second, , fourth] = [1, 2, 3, 4];
对象解构
let obj: { aaa: string, age: number } = { aaa: "test", age: 12 }
let { aaa, age} = obj;
使用 ... 来解构其他的剩余变量
let obj = {a:"foo", b:12, c:"bar"}
let {a, ...rest} = obj
和数组一样，也可以使用 ... 来解构对象
默认值可以让你在属性为 undefined 时使用缺省值
function keepWholeObject(wholeObject: {a: string, b?:number}){
let {a, b = 1001} = wholeObject;
}
现在，即使 b 为 undefined ， keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。
解构也能用于函数声明。
type C = { a: string, b?: number }
function f({ a, b }: C): void {
// ...
}
展开的语法和解构的语法相类似，它允许将一个对象展开为另一个对象。
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
编译 ts 文件时，使用 -w 指令，TypeScript 编译器会自动监视文件的变化，并在文件发生变化时进行重新编译。
tsc xxx.ts -w
如果直接使用 tsc 指令，则可以自动将当前项目下的所有 ts 文件编译为 js 文件，但是直接使用 tsc 指令的时候，需要在项目的根目录下创建一个 ts 的配置文件 tsconfig.json。
tsconfig.json 是一个 json 文件 ,它位于项目的根目录下。添加配置文件之后，只需要 tsc 命令就可以对整个项目进行编译。
具体的配置选项如下所示：
配置选项：
include
定义希望被编译文件所在的目录
默认值：["**/*"]
示例：
"include":["src/**/*", "tests/**/*"]
上述示例中，所有src目录和tests目录下的文件都会被编译
exclude
定义需要排除在外的目录
默认值：["node_modules", "bower_components", "jspm_packages"]
示例：
"exclude": ["./src/hello/**/*"]
上述示例中，src下hello目录下的文件都不会被编译
extends
定义被继承的配置文件
示例：
"extends": "./configs/base"
上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息
files
指定被编译文件的列表，只有需要编译的文件少时才会用到
示例：
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"tsc.ts"
]
列表中的文件都会被TS编译器所编译
compilerOptions
编译选项是配置文件中非常重要也比较复杂的配置选项
在compilerOptions中包含多个子选项，用来完成对编译的配置
项目选项
target
设置ts代码编译的目标版本
可选值：
示例：
"compilerOptions": {
"target": "ES6"
}
如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码
lib
指定代码运行时所包含的库（宿主环境）
可选值：
示例：
"compilerOptions": {
"target": "ES6",
"lib": ["ES6", "DOM"],
"outDir": "dist",
"outFile": "dist/aa.js"
}
module
设置编译后代码使用的模块化系统
可选值：
示例：
"compilerOptions": {
"module": "CommonJS"
}
outDir
编译后文件的所在目录
默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
示例：
"compilerOptions": {
"outDir": "./dist"
}
设置后编译后的js文件将会生成到dist目录
outFile
将所有的文件编译为一个js文件
默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中
示例：
"compilerOptions": {
"outFile": "dist/app.js"
}
rootDir
指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
示例：
"compilerOptions": {
"rootDir": "./src"
}
allowJs
checkJs
是否对js文件进行检查
示例：一般是要么都用，要么都不用
"compilerOptions": {
"allowJs": true,
"checkJs": true
}
removeComments
noEmit
noEmitError:
sourceMap
是否生成sourceMap
默认值：false
严格检查
额外检查
高级
通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
步骤：
初始化项目
npm init -y
下载构建工具
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
根目录下创建webpack的配置文件webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
optimization:{
minimize: false // 关闭代码压缩，可选
},
entry: "./src/index.ts",
devtool: "inline-source-map",
devServer: {
contentBase: './dist'
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选
}
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
use: {
loader: "ts-loader"
},
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:'TS测试'
}),
]
}
根目录下创建tsconfig.json，配置可以根据自己需要
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}
修改package.json添加如下配置
{
...略...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
...略...
}
在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器
经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。
安装依赖包：
npm i -D @babel/core @babel/preset-env babel-loader core-js修改webpack.config.js配置文件
...略...
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader",
options:{
presets: [
[
"@babel/preset-env",
{
"targets":{
"chrome": "58",
"ie": "11"
},
"corejs":"3",
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
...略...
如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。
以上便是 ts 的基本语法和编译设置，如果只是将 ts 作为一个类型检查工具或简单使用，已经足够了，但是如果需要用 ts 进行面向对象编程，那么往往是不够用的，需要学习 ts 中的面向对象特征，以及一些扩展语法，比如泛型。
这是一段站长介绍...
文章目录