1、什么是TypeScript
TypeScript(JavaScript that scales.) TypeScript是JavaScript类型的超集（超集就是ts包含js而且有js没有的东西，意味着js语法也能在ts中运行），它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。
2、为什么用TypeScript
1、TypeScript 增加了代码的可读性和可维护性
类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了，可以在编译阶段就发现大部分错误。
e.g.定义一个方法
另外还可以
增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义等
2、TypeScript 非常包容
TypeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可
即使不显式的定义类型，也能够自动做出类型推论
可以定义从简单到复杂的几乎一切类型
即使 TypeScript 编译报错，也可以生成 JavaScript 文件
兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取
3、快速上手
1、npm install -g typescript
2、建一个xxx.ts文件 （直接把js改成ts都行，可能会通过不了各种静态检查）
3、写点东西进去
4、编译ts文件 执行 tsc xxx.ts 输出xxx.js文件
5、 有兴趣可以加点东西
4、语法简介
1、基础类型
布尔类型boolean
let isDone: boolean = false;
数值number
let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制 let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制
字符串值string
let username: string = `Gene`;
// 模版字符串
let sentence: string = `Hello, my name is ${ username }.`;
let otherSentence: string = "Hello, my name is " + name + ".";
数组
let list: number[] = [1, 2, 3]; let otherList: Array<number> = [1, 2, 3];
元组
let x: [string, number]; x = ['hello', 10]; // OK、
枚举enum
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
enum HttpCode {
/** 成功 */
'200_OK' = 200,
/** 已生成了新的资源 */
'201_Created' = 201,
/** 请求稍后会被处理 */
'202_Accepted' = 202,
/** 资源已经不存在 */
'204_NoContent' = 204,
/** 被请求的资源有一系列可供选择的回馈信息 */
'300_MultipleChoices' = 300,
/** 永久性转移 */
'301_MovedPermanently' = 301,
/** 暂时性转移 */
'302_MoveTemporarily' = 302,
}
HttpCode['200_OK']
HttpCode[200]
Any
let anyType: any = 4; anyType = "string"; anyType = false;
Void（没有任何类型）
// 当一个函数没有返回值时，你通常会见到其返回值类型是 void
function warnUser(): void {
console.log("This is my warning message");
}
Null 和 Undefined
let u: undefined = undefined; let n: null = null;
Never（永不存在的值的类型）
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}
Object
object表示非原始类型(除number，string，boolean，symbol，null或undefined之外的类型)
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(42); // Error
类型断言
let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length; let otherStrLength: number = (someValue as string).length;
2、接口
interface test {
value: string;
// 可选属性 好处1：不一定要传 好处2:传的时候写错了会报错
color?: string;
// 只读属性
readonly text: number;
readonly arr: number[];
}
function say(obj: test){
console.log(obj.value)
// console.log(obj.colour) // 可选属性 传的时候写错了会报错
// obj.text = 222; // 只读属性 不能被修改
}
let myObj = {
text:1111,
value:"hello",
arr:[1,2,3],
};
// 类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以
say(myObj);
// 函数类型
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
let result = source.search(subString);
return result > -1;
}
// 可索引的类型
interface StringArray {
[index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
// 类类型 在接口中定义在类中实现接口
interface ClockInterface {
currentTime: Date;
setTime(d: Date);
}
class Clock implements ClockInterface {
currentTime: Date;
setTime(d: Date) {
this.currentTime = d;
}
constructor(h: number, m: number) { }
}
// 继承接口
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sid
3、类
class Greet {
greeting: string; // 类属性
constructor(message: string) { // 构造函数
this.greeting = message;
}
greet() { // 方法
return "Hello, " + this.greeting;
}
}
let greet = new Greet("world");
console.log(greet.greet());
// 继承
class Child extends Greet {
bark() {
console.log('hello!');
}
}
// 公共，私有与受保护的修饰符
// 默认为 public
// private 就不能在声明它的类的外部访问
// protected protected成员在派生类中仍然可以访问
class Person {
protected name: string;
constructor(name: string) { this.name = name; }
}
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name)
this.department = department;
}
public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
}
}
let user = new Employee("xiaohong", "xxx");
console.log(user.getElevatorPitch());
// console.log(user.name); // 错误: 'name' 是私有的.
// 通过getters/setters来截取对对象成员的访问
class User {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
this._fullName = newName;
}
}
let employee = new User();
employee.fullName = "Bob Smith";
if (employee.fullName) {
ale
4、函数
// 函数类型包含两部分：参数类型和返回值类型
// 函数的完整类型
let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; };
// 可选参数和默认参数
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
// let result1 = buildName("aaa"); // error
// let result2 = buildName("aaa", "bbb", "ccc"); // error
let result3 = buildName("aaa", "bbb"); // ok
// JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。
// 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能
function buildName2(firstName: string, lastName?: string) {
return firstName + " " + lastName;
}
// 默认参数
function buildName3(firstName: string, lastName = "xxx") {
return firstName + " " + lastName;
}
let result21 = buildName2("aaa"); // ok
// let result22 = buildName2("aaa", "bbb", "ccc"); // error
let result23 = buildName2("aaa", "bbb"); // ok
// 剩余参数
// JavaScript里，你可以使用 arguments来访问所有传入的参数
// TypeScript里，你可以把所有参数收集到一个变量里
function restFunc(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = restFunc("Joseph", "Samuel", "Luca
5、泛型
function identity<T>(arg: T): T {
return arg;
}
// 泛型类
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };
console.log(stringNumeric.add(stringNumeric.zeroValue, "test"
5、其它
https://www.tslang.cn/docs/index.html