TypeScript是啥
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发
话不多说直接进入主题
安装TypeScript
npm install -g typescript // 全局安装ts
npm install typescript -D // 局部安装ts
编译ts文件
// a.ts
const a:string = "你好呀";
console.log(s);
// 执行命令来运行 a.ts 文件
tsc a.ts
编译完成后会在目录下生成一个a.js文件
// a.js 看起来好像没什么区别哈
const a = "你好呀";
console.log(s);
接下去就是到基础环节了
对应js的原始数据类型(boolean, number, string, null, undefined)
boolean(布尔值)
使用 boolean 定义布尔值类型：
let isShow: boolean = false
number(数值)
使用 number 定义数值类型：
let num: number = 1
string(字符串)
使用 string 定义字符串类型：
let name: string = 'suhonny'
void(空值)
使用 void 定义空值类型：
function getName():void {
console.log('suhonny')
}
基本用在没有返回值的函数上 !!!
null和undefined
使用 null 和 undefined 来定义：
let x: null = null
let y: undefined = undefined
undefined 和 null 是所有类型的子类型。
开启严格模式时( tsconfig.json中 "strictNullChecks": true ), null 和 undefined 只能给它们自己的类型赋值
对应js的对象类型(Object、Array、Function)
接口(Interface)
interface obj {
name: string;
age: number;
isShow: boolean;
}
let people: obj = {
name: 'Suhonny',
age: 18,
isShow: false
};
Interface 的一些写法技巧
interface obj {
/*
* readonly 代表只读
* ? 代表可选 没有这个参数也不会报错
* [propName: string] 表示你可以有任意的属性,但是任意属性必须取 string 类型
*/
readonly name: string;
age?: number;
isShow: boolean;
[propName: string]: any;
}
数组(Array)
// 数组的两种定义方法
const arrList: number[] = [1, 2, 3]; // 类型 + 方括号 表示法
const arrListCopy: Array<number> = [1, 2, 3]; // 数组泛型
函数(Function)
// 函数声明
function fullName(firstName: string, lastName: string): string {
return firstName + lastName;
}
// 函数表达式
let fullName = function (firstName: string, lastName: string): string {
return firstName + lastName;
}
如上 函数表达式中的fullName并没有定义类型 是根据右边的匿名函数而推断出来的,更严谨的写法
let fullName: (firstName: string, lastName: string) => string = function (firstName: string, lastName: string): string {
return x + y;
};
注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。 在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
用接口定义函数
interface name {
(fName: string, lName: string): string;
}
可选参数
function name(fName: string, lName?: string): string {
return lName ? fName + fName : fName;
}
参数默认值
function name(fName: string, lName: string = 'sc'): string {
return fName + lName;
}
let myName = buildName('chen'); // chensc
剩余参数
function add(...numbers: number[]): number {
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
return sum;
}
重载
函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种表现。
function a(x: number): number;
function a(x: string): string;
function a(x: number ): number {
return x
}
另外的TypeScript基础
任意值(any)
任意值（any）用来表示允许赋值为任意类型。
let name: any = 'seven';
name = 7; // true
any类型尽量少用 要严谨才能学的更快是不是 冲!!!
类型推论
如果没有明确的指定类型，那么 TypeScript 会依照类型推论的规则推断出一个类型
let name = 'seven';
name = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
等价
let name: string = 'seven';
name = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'str
TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。
如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：
let name;
name = 1; // true
name = 'suhonny' // true
联合类型
联合类型（Union Types）表示取值可以为多种类型中的一种。
// 用 | 符号 表示可以选择多个类型
let result: string | number;
result = 'seven'; // true
result = 7; // true
类型断言
类型断言（Type Assertion）可以用来手动指定一个值的类型。
两种写法 (举🌰 断言 any 类型的变量)
// 值 as 类型
let str: any = "to be or not to be";
let strLength: number = (str as string).length;
// <类型>值
let str: any = "to be or not to be";
let strLength: number = (<string>str).length;
内置对象
内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。
ECMAScript 的内置对象
Boolean、Error、Date、RegExp...等等
let flag: Boolean = new Boolean(0);
let error: Error = new Error('Error');
let date: Date = new Date();
let reg: RegExp = /[a-z]/;
更多的内置对象，可以查看 MDN 的文档。
DOM 和 BOM 的内置对象
Document、HTMLElement、Event、NodeList...等等
let bodyHtml: HTMLElement = document.body;
let divList: NodeList = document.querySelectorAll('div');
进阶进阶进阶
别名
类型别名顾名思义就是用来起个新名字。
type count = number;
type str = string;
type full = count | str
相当于
type full = number | string
元祖
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
let tom: [string, number] = ['Tom', 25];
注意: 元组的长度是指定的，类型和数量是已知的,越界访问会提示错误。
枚举
枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。
// 枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true
类
通过 Class 关键字来定义一个类。
class Person {
name: string; // 姓名
age: number; // 年龄
isGirl: boolean; // 是否是女孩
constructor(name: string, age: number, isGirl: boolean) {
this.name = name;
this.age = age;
this.isGirl = isGirl;
}
sayHi(): void {
console.log(this.name, this.age, this.isGirl);
}
}
泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
基本使用
// 尖括号 <> 里面写类型参数，一般用 T 来表示第一个类型变量名称
function change<T>(arg:T):T {
return arg;
}
多个参数
定义泛型的时候，可以一次定义多个类型参数
function change<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]];
}
change([0, 'zero']); // ['zero', 0]
泛型约束
在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：
function change<T>(arg: T): T {
console.log(arg.length);
}
// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.
上述报错了 因为泛型
T不一定包含属性length，所以编译的时候报错了。 这时，我们可以使用extends关键字来对泛型进行约束
interface len {
length: number;
}
function change<T extends len>(arg:T):T {
console.log(arg.length);
}
// 使用了 extends 约束了泛型 T 必须符合接口 len 的形状，也就是必须包含 length 属性。
泛型接口
interface KeyValue<T,U> {
key: T;
value: U;
}
const person:KeyValue<string,number> = {
key: 'suhonny',
value: 18
}
泛型类
class add<T> {
count: T;
add: (x: T, y: T) => T;
}
let our = new add<number>(); // T => number类型
our.count = 0;
泛型参数的默认类型
function getArray<T = string>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
最后奉上 tsconfig.json的配置项 (之前写react的项目时的配置)
{
"compilerOptions": {
/* Basic Options */
"target": "es5" /* target用于指定编译后js文件里的语法应该遵循哪个JavaScript的版的的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
"module": "commonjs" /* 用来指定编译后的js要使用的模块标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
"lib": ["es6", "dom"] /* lib用于指定要包含在编译中的库文件 */,
"allowJs": true, /* allowJs设置的值为true或false，用来指定是否允许编译js文件，默认是false，即不编译js文件 */
"checkJs": true, /* checkJs的值为true或false，用来指定是否检查和报告js文件中的错误，默认是false */
"jsx": "preserve", /* 指定jsx代码用于的开发环境: 'preserve', 'react-native', or 'react'. */
"declaration": true, /* declaration的值为true或false，用来指定是否在编译的时候生成相应的".d.ts"声明文件。如果设为true，编译每个ts文件之后会生成一个js文件和一个声明文件。但是declaration和allowJs不能同时设为true */
"declarationMap": true, /* 值为true或false，指定是否为声明文件.d.ts生成map文件 */
"sourceMap": true, /* sourceMap的值为true或false，用来指定编译时是否生成.map文件 */
"outFile": "./", /* outFile用于指定将输出文件合并为一个文件，它的值为一个文件路径名。比如设置为"./dist/main.js"，则输出的文件为一个main.js文件。但是要注意，只有设置module的值为amd和system模块时才支持这个配置 */
"outDir": "./", /* outDir用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹 */
"rootDir": "./", /* 用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现以rootDir的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，但是不会停止编译 */
"composite": true, /* 是否编译构建引用项目 */
"incremental": true, /* Enable incremental compilation */
"tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
"removeComments": true, /* removeComments的值为true或false，用于指定是否将编译后的文件中的注释删掉，设为true的话即删掉注释，默认为false */
"noEmit": true, /* 不生成编译文件，这个一般比较少用 */
"importHelpers": true, /* importHelpers的值为true或false，指定是否引入tslib里的辅助工具函数，默认为false */
"downlevelIteration": true, /* 当target为'ES5' or 'ES3'时，为'for-of', spread, and destructuring'中的迭代器提供完全支持 */
"isolatedModules": true, /* isolatedModules的值为true或false，指定是否将每个文件作为单独的模块，默认为true，它不可以和declaration同时设定 */
/* Strict Type-Checking Options */
"strict": true /* strict的值为true或false，用于指定是否启动所有类型检查，如果设为true则会同时开启下面这几个严格类型检查，默认为false */,
"noImplicitAny": true, /* noImplicitAny的值为true或false，如果我们没有为一些值设置明确的类型，编译器会默认认为这个值为any，如果noImplicitAny的值为true的话。则没有明确的类型会报错。默认值为false */
"strictNullChecks": true, /* strictNullChecks为true时，null和undefined值不能赋给非这两种类型的值，别的类型也不能赋给他们，除了any类型。还有个例外就是undefined可以赋值给void类型 */
"strictFunctionTypes": true, /* strictFunctionTypes的值为true或false，用于指定是否使用函数参数双向协变检查 */
"strictBindCallApply": true, /* 设为true后会对bind、call和apply绑定的方法的参数的检测是严格检测的 */
"strictPropertyInitialization": true, /* 设为true后会检查类的非undefined属性是否已经在构造函数里初始化，如果要开启这项，需要同时开启strictNullChecks，默认为false */
"noImplicitThis": true, /* 当this表达式的值为any类型的时候，生成一个错误 */
"alwaysStrict": true, /* alwaysStrict的值为true或false，指定始终以严格模式检查每个模块，并且在编译之后的js文件中加入"use strict"字符串，用来告诉浏览器该js为严格模式 */
/* Additional Checks */
"noUnusedLocals": true, /* 用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用eslint可以在你书写代码的时候做提示，你可以配合使用。它的默认值为false */
"noUnusedParameters": true, /* 用于检查是否有在函数体中没有使用的参数，这个也可以配合eslint来做检查，默认为false */
"noImplicitReturns": true, /* 用于检查函数是否有返回值，设为true后，如果函数没有返回值则会提示，默认为false */
"noFallthroughCasesInSwitch": true, /* 用于检查switch中是否有case没有使用break跳出switch，默认为false */
/* Module Resolution Options */
"moduleResolution": "node", /* 用于选择模块解析策略，有'node'和'classic'两种类型' */
"baseUrl": "./", /* baseUrl用于设置解析非相对模块名称的基本目录，相对模块不会受baseUrl的影响 */
"paths": {}, /* 用于设置模块名称到基于baseUrl的路径映射 */
"rootDirs": [], /* rootDirs可以指定一个路径列表，在构建时编译器会将这个路径列表中的路径的内容都放到一个文件夹中 */
"typeRoots": [], /* typeRoots用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载 */
"types": [], /* types用来指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载进来 */
"allowSyntheticDefaultImports": true, /* 用来指定允许从没有默认导出的模块中默认导入 */
"esModuleInterop": true /* 通过为导入内容创建命名空间，实现CommonJS和ES模块之间的互操作性 */,
"preserveSymlinks": true, /* 不把符号链接解析为其真实路径，具体可以了解下webpack和nodejs的symlink相关知识 */
/* Source Map Options */
"sourceRoot": "", /* sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件位置，这个值会被写进.map文件里 */
"mapRoot": "", /* mapRoot用于指定调试器找到映射文件而非生成文件的位置，指定map文件的根路径，该选项会影响.map文件中的sources属性 */
"inlineSourceMap": true, /* 指定是否将map文件的内容和js文件编译在同一个js文件中，如果设为true，则map的内容会以//# sourceMappingURL=然后拼接base64字符串的形式插入在js文件底部 */
"inlineSources": true, /* 用于指定是否进一步将.ts文件的内容也包含到输入文件中 */
/* Experimental Options */
"experimentalDecorators": true, /* 用于指定是否启用实验性的装饰器特性 */
"emitDecoratorMetadata": true, /* 用于指定是否为装饰器提供元数据支持，关于元数据，也是ES6的新标准，可以通过Reflect提供的静态方法获取元数据，如果需要使用Reflect的一些方法，需要引入ES2015.Reflect这个库 */
},
"files": [], // files可以配置一个数组列表，里面包含指定文件的相对或绝对路径，编译器在编译的时候只会编译包含在files中列出的文件，如果不指定，则取决于有没有设置include选项，如果没有include选项，则默认会编译根目录以及所有子目录中的文件。这里列出的路径必须是指定文件，而不是某个文件夹，而且不能使用* ? **/ 等通配符
"include": [], // include也可以指定要编译的路径列表，但是和files的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径，而且可以使用通配符，比如"./src"即表示要编译src文件夹下的所有文件以及子文件夹的文件
"exclude": [], // exclude表示要排除的、不编译的文件，它也可以指定一个列表，规则和include一样，可以是文件或文件夹，可以是相对路径或绝对路径，可以使用通配符
"extends": "", // extends可以通过指定一个其他的tsconfig.json文件路径，来继承这个配置文件里的配置，继承来的文件的配置会覆盖当前文件定义的配置。TS在3.2版本开始，支持继承一个来自Node.js包的tsconfig.json配置文件
"compileOnSave": true, // compileOnSave的值是true或false，如果设为true，在我们编辑了项目中的文件保存的时候，编辑器会根据tsconfig.json中的配置重新生成文件，不过这个要编辑器支持
"references": [], // 一个对象数组，指定要引用的项目
}
