很多大厂都在运用 TypeScript，总以为这玩意不看看都不配做前端了😂，看完文档后就梳理了一下。本文来自我的博客这个主意不一定对系列，so，这个主意不一定对😉
TypeScript 具有范例体系，且是 JavaScript 的超集。它可以编译成一般的 JavaScript 代码。TypeScript 支撑恣意浏览器，恣意环境，恣意体系并且是开源的。
作为弱范例、动态型言语，JavaScript 就像未驯化的野马一样。每个人都能上去坐两下，然则真正可以驾御的只能是个中好手。
近几年，前端阅历了疾速的生长已不再是之前随意玩玩的小玩意了。面临愈来愈大型、愈来愈耐久的项目来讲，这类宽松的体式格局反而成了障碍。
东西做大了，随之而来的就是种种礼貌
礼貌是从履历中总结，同时也是为了朝更好的方向生长，就比方编程里的设想准绳和设想形式。「Man maketh manners」，记得王牌奸细里，主角们在教诲他人的时刻总喜好说这么一句话，「不知礼，无以立也」。
在 TypeScript 里，「礼」就是 Type，Type 就是礼貌。Typescript 经由过程范例注解供应编译时的静态范例搜检，提早发明毛病，同时也提高了代码的可读性和可维护性。
TypeScript 里的范例注解是一种轻量级的为函数或变量增加束缚的体式格局
在 JavaScript 里，变量用于在特定时候存储特定值，其值及数据范例可以在剧本的生命周期内转变。
而在 TypeScript 中，标识符（变量、函数、类、属性的名字，或许函数参数）在其定义时就指定了范例（或范例推论出）。在编译阶段，若涌现了希冀之外的范例，TypeScript 将会提醒抛错（虽然偶然刻并不会影响递次的一般运转）。
在 TypeScript 中，经由过程 : 范例 的体式格局为标识符增加范例注解。
let isDone: boolean = false; // boolean；
let decLiteral: number = 6; // number；
let name: string = "bob"; // string；
let list: number[] = [1, 2, 3]; // Array<number>;
let list: Array<number> = [1, 2, 3]; // Array<number>;
let x: [string, number]; // tuple;
enum Color {Red, Green, Blue} // enum;
let notSure: any = 4; // any;
function warnUser(): void { // void;
console.log("This is my warning message");
}
let u: undefined = undefined; // undefined;
let n: null = null; // null;
function error(message: string): never { // never;
throw new Error(message);
}
let obj: object = {}; // object在 TypeScript 中，数组（Array）是兼并了雷同范例的对象，而元组（tuple）兼并了差别范例的对象。（Array<any>,也可以兼并差别范例的数据）
范例注解中的范例就是以上的那些范例么？
TypeScript 的中心准绳之一是对值所具有的构造举行范例搜检，它偶然被称做「鸭式辨型法」或「构造性质范例化」。上面的只是基本范例，它们是添补构造的基本单位罢了。在 TypeScript 里，范例不应当还停留在 JavaScript 数据范例的层面上，还应包含基本范例的组合构造化。
let str: 'Hello'; // 字符串字面量范例；
str = 'Hi' // error；
let something: 'Hello' | 1; // 团结范例；
something = 1 // ok；
let obj: {name: string, age: number}; // 对象字面量
obj = {
name: "夜晓宸",
age: 18,
}换句话说，在定义标识符的时刻，用一个范例模板来形貌标识符的构造和内部范例构成。即范例模板就是标识符希冀的模样。
代码是给人看的，顺就是给机器运转的
都说好的代码就该如许。然则在 TypeScript 里，这两句话可以颠倒下递次。代码是给机器运转的，顺就是给人看的。
在谈到 TypeScript 的优点时，有一条很主要，增强了编译器和 IDE 的功用，包含代码补全、接口提醒、跳转到定义、重构等。
而这些也得益于标识符的范例的准确分别或表述，所以想写好 Typescript 代码，就应当准确形貌标识符的范例，而不是到处安置的 any。
表述庞杂构造最经常使用的体式格局 ———— 接口
接口是 JavaScript 中没有的东西，是一个异常天真的观点，可以笼统行动，也可以形貌「对象的外形」。
关于须要复用的构造范例，就可以运用接口的体式格局，而不是对象字面量内联式注解。
interface Iperson { // 对象
name: string,
age: number,
sayHi(): void,
}
let obj: Iperson = {
name: "夜晓宸",
age: 18,
sayHi: ()=> {}
}
/* ——————人工分割线—————— */
interface Iperson { // 函数范例
(name: string, age: number): string
}
let person: Iperson = (name, age) => {
return `${name},${age}`
}
person('夜晓宸', 18);
/* ——————人工分割线—————— */
interface Iperson { // 构造函数
new (name: string, age: number)
}
let person: Iperson = class Person {
name: string;
age: number;
constructor(name, age) {
this.name = name;
this.age = age;
}
}
new person('夜晓宸', 18);
/* ——————人工分割线—————— */
interface Iperson { // 类完成接口
name: string,
age: number,
}
class Person implements Iperson{
name = '夜晓宸'
age = 18
}
new Person()
/* ——————人工分割线—————— */
interface Iperson { // 夹杂范例
(name, age): string,
age: number,
}
function Person(): Iperson {
let me = <Iperson>function (name, age): string {
return `${name}, ${age}`
}
me.age = 18;
return me;
}
let person = Person();
person('夜晓宸', 18)
person.age
以上是接口在对象、一般函数、构造函数、类上的表现。关于接口的属性，还可以做到准确掌握，如可选属性、恣意属性、只读属性等。
末了，接口间可以继续，接口还可以继续类。当接口继续类时，它会继续类的成员但不包含其完成，然则若继续了具有私有或受庇护的成员类时，这个接口只能由这个类或其子类来完成了，这个和类的接见修饰符的特性有关联。
说完接口，就要说说类了，由于它们有多相似的处所，比方充任对象的范例模板，继续成员等。
类究竟是什么呢？
ES6 引入了 Class（类）这个观点，经由过程 class 关键字，可以定义类, Class 实质上是 JavaScript 现有的基于原型的继续的语法糖. Class 可以经由过程extends关键字完成继续。TypeScript 除了完成了一切 ES6 中的类的功用之外，还增加了一些新的用法。
class Person {
static age: number = 18;
constructor(public name: string, public age: number) { }
sayHi(name: string): string{
return `Hi,${name}`
}
}
/* —————— 分割线 —————— */
var Person = /** @class */ (function () {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function (name) {
return "Hi," + name;
};
Person.age = 18;
return Person;
}());TypeScript 编译后，可以看出来，类实在就是一个函数罢了。
在 ES6 之前，经由过程构造函数的体式格局 new 出对象，造出的对象具有和同享了构造函数内部绑定的属性要领及原型上的属性要领。TypeScript 里的接口形貌的类范例就是类的实例部份应当遵照的范例模板。作为类的静态部份 ———— 构造函数，函数也应当有本身的属性特性。
interface static_person {
age: number,
new (name: string, age: number);
}
interface instance_person {
name: string,
age: number,
say(name: string): string
}
let person: static_person = class Person implements instance_person{
static age: number = 18;
constructor(public name: string, public age: number) { }
say(name) {
return `Hi,${name}`
}
}
new person('夜晓宸',18)由以上代码可以看出，类的静态部份和动态部份都有各自的范例模板。假如想要将类本身作为范例模板又该怎样做呢？最简朴的要领就是 typeof 类 的体式格局。
class Person {
static age: number = 18;
constructor(public name: string, public age: number) {}
say(name) {
return `Hi,${name}`
}
}
class Man {
static age: number;
constructor(public name: string, public age: number) {}
public sex = 'man';
say(name){return `Hi, ${this.sex},${name}`}
}
let man: typeof Person = Man;
new man('夜晓宸', 18)类静态部份、类实例部份和类本身，它们都有本身须要遵照的范例模板。晓得了个中的区分，也就可以更好得邃晓类作为接口运用、接口继续类等用法了。
class Person {
name: string;
age: number;
}
interface Man extends Person {
sex: 'man'
}
let man: Man = {
name: '夜晓宸',
age: 18,
sex: 'man'
}除了构造上的束缚，类也经由过程接见修饰符对其成员做了束缚，包含 public，private，protected，readonly等。
class Person {
private name: string;
protected age: number;
}
interface SayPerson extends Person {
sayHi(): string
}
class Human extends Person implements SayPerson {
sayHi() {
return `Hi, ${this.age}`
}
}晓得了接见修饰符的特性，也就邃晓之前说过的「当接口继续类时，它会继续类的成员但不包含其完成，然则若继续了具有私有或受庇护的成员类时，这个接口只能由这个类或其子类来完成了」。
假如一个标识符的范例不确定，该怎样？
关于一个内部逻辑相差不大，入参范例差别的函数来讲，没必要由于参数范例差别而反复大部份代码，这时候就须要一个范例变量来替代。
/* 范型函数 */
class Person {
className = 'person'
}
class Human {
classname = 'human'
}
function create<T>(Class: new () => T) : T{
return new Class();
}
create(Person).className
/* 范型接口 */
interface Creat<T>{
(Class: new () => T):T
}
class Person {
className = 'person'
}
class Human {
classname = 'human'
}
function create<T>(Class: new () => T) : T{
return new Class();
}
let person: Creat<Person> = create;
person(Person) // OK
person(Human) // Error注重了，范例变量示意的是范例，而不是值。范例变量里塞的多是恣意一个范例，但依据场景，我们最好可以越发准确的形貌标识符的范例。应了上面的一句话，「想写好 Typescript 代码，就应当准确形貌标识符的范例，而不是到处安置的 any」。所以关于泛型，我们也可以做些束缚，即，泛型束缚。
class Person {
name: string;
age: number;
}
interface Man extends Person {
sex: 'man'
}
function getProperty<T, K extends keyof T>(obj: T, key: K): any {
return obj[key]
}
let man: Man = {
name: '夜晓宸',
age: 18,
sex: 'man'
}
getProperty(man, 'sex')用范例变量来解释标识符的范例偶然会以为照样不够准确。
晓得标识符的能够范例，然后组合起来
class Man {
name: string;
age: number;
study():string {return ''}
}
class Women {
name: string;
age: number;
sing():string{return ''}
}
function instance(Class: Man | Women) {
if ((<Man>Class).study) {
return (<Man>Class).study()
} else {
return (<Women>Class).sing()
}
}
let man:Man = {
name: '夜晓宸',
age: 18,
study() {
return '我爱学习';
}
}
let women: Women = {
name: 'godness',
age: 17,
sing() {
return '我爱唱歌'
}
}
instance(man) // 我爱学习
instance(women) // 我爱唱歌有交织范例、团结范例等，而范例定名则是更天真的范例构造体式格局。
// 官网🌰
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
}
else {
return n();
}
}范例多了以后，偶然刻须要对某一范例做迥殊处置惩罚，因而有范例断言 （<范例>） 和范例守御（typeof, instanceof, in等）。
还可以经由过程前提揣摸来挑选哪一种范例。
// 官网🌰
declare function f<T extends boolean>(x: T): T extends true ? string : number;
// Type is 'string | number
let x = f(Math.random() < 0.5)固然了，以上代码很多的标识符是没有必要增加范例注解的。
范例揣摸，即，范例是在那里怎样被揣摸的
范例注解也不是越多越好，纵然有些处所你不增加范例注解，TypeScript 也会经由过程上下文归类等体式格局找到最好通用范例。
