TypeScript快速入门

TS快速入门

1)动态类型与静态类型的问题

动态类型： 运行代码时才知道发生什么
如JavaScript
静态类型：
在代码运行前，就对其行为进行预测
如TypeScript(对JavaScript进行扩展出来的拥有静态类型的好处的语言)

TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。

---

2)TypeScript入门

TypeScript代码不能直接运行，要先用编译器编译成JavaScript，最终还是靠JavaScript运行，TypeScript要做的只是编译期间时的类型检查

1. 先执行命令下载编译器:
   npm install -g typescript
2. 再到ts文件所在目录 执行命令，编译ts文件:
   tsc ts文件名
   编译成功后在该目录下产生一个同名的js文件

---

3）TypeScript中的基本数据类型

为函数设置参数类型和返回值类型
  function sum(a:number,b:number): number{
   return a+b;
  }

类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

1. let someValue: any = “this is a string”;
   let strLength: number = (someValue).length;
2. let someValue: any = “this is a string”;
   let strLength: number = (someValue as string).length;

---

4）TypeScript中的高级数据类型

类型别名 type
首先认识一下什么是类型别名？
类型别名用来给一个类型起个新名字，使用 type 创建类型别名，类型别名不仅可以用来表示基本类型，还可以用来表示对象类型、联合类型、元组和交集。让我们看一些例子：

1. type userName = string; // 基本类型
2. type userId = string | number; // 联合类型
3. type arr = number[];
4. 对象类型
   type Person = {
   id: userId; // 可以使用定义类型
   name: userName;
   age: number;
   gender: string;
   isWebDev: boolean;
   };
5. 泛型
   type Tree = { value: T };

const user: Person = {
id: “901”,
name: “椿”,
age: 22,
gender: “女”,
isWebDev: false,
};

const numbers: arr = [1, 8, 9];

---

接口interface
接口是命名数据结构（例如对象）的另一种方式；与type 不同，interface仅限于描述对象类型。
接口的声明语法也不同于类型别名的声明语法。让我们将上面的类型别名 Person 重写为接口声明：
interface Person {
id: userId;
name: userName;
age: number;
gender: string;
isWebDev: boolean;
}

更加推荐使用interface

5）鸭子类型

可见c并非cat对象，也可以作为A函数的参数，因为c的属性结构与cat类似

6）函数类型

###7 ）字面量与Nullish类型
字面量
个人觉得类似于枚举

---

Nullish

###8）泛型
interface Ref
{
value:T
}

const r1:Ref={value:“hello”}
const r2:Ref={value:true}

/* ----------------------------------------*/

function identity(arg: T): T {
   return arg;
}
var result=identity(“hello”)
console.log(result) //hello

---

9)TypeScript意义

1. 您可以避免经典的错误 ‘undefined’ is not a function.
2. 在不严重破坏代码的情况下，重构代码更容易。
3. 使大型、复杂的应用程序源码更易阅读。
   实际上，一项研究表明，TypeScript可以检测到所有JavaScript错误的15％。
   动态类型的自由特性经常会导致错误，这些错误不仅会降低程序员的工作效率，而且还会由于增加新代码行的成本增加而使开发陷入停顿。
   因此，JavaScript无法合并类型以及编译时缺乏错误检查，使它不适合作为企业和大型代码库中服务器端代码。

10)类class

class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(${this.name} moved ${distanceInMeters}m.);
}
}

class Snake extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 5) {
console.log(“Slithering…”);
super.move(distanceInMeters);
}
}

class Horse extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 45) {
console.log(“Galloping…”);
super.move(distanceInMeters);
}
}

let sam = new Snake(“Sammy the Python”);
let tom: Animal = new Horse(“Tommy the Palomino”);

sam.move();
tom.move(34);

派生类包含了一个构造函数，它 必须调用 super()，它会执行基类的构造函数。 而且，在构造函数里访问 this的属性之前，我们 一定要调用 super()。 这个是TypeScript强制执行的一条重要规则。