写这个的目的
1 . 对学习的过程做一个总结, 也方便以后回过头来回顾
2 . 看了官方的东西,讲的有点繁琐,更适合当做手册去查询,我这里做简单的介绍跟总结
3 . 如果有需要用到更深层次的东西, 请移步TS官网.
文章结构:
- 基础类型
- 变量声明
- 接口
- 类
- 函数
- 泛型
- 模块
好了 ,要开车了, 大家坐好~
基础类型
布尔值:
let isDone: boolean = false;
数字
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
字符串
let name: string = "bob";
name = "smith"; // 先声明类型,然后赋值
模板变量${ }
let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.
I'll be ${ age + 1 } years old next month.`;
别忘记使用反引号包围(), 而不是引号
数组
// 声明数组类型
let list: number[] = [1, 2, 3];
// 第二种方式是使用数组泛型，Array<元素类型>：
let list: Array<number> = [1, 2, 3];
元组 Tuple
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
任意值
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean // 在编程阶段还不清楚类型的变量,用any即可
变量声明
在ES5中, js使用var来声明变量, 对于习惯其他语言的同学来说, 完全看不懂var到底在干嘛,
ts中包含ES6的语法,使用 let 声明变量, 使用const声明常量
这块有疑问的直接移步ES6入门
接口
废话不多说,先上代码
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
通过interface定义一个接口(也就是数据类型结构), 通过这个接口去规范我们传递的参数
可选属性
interface SquareConfig {
color?: string;
width?: number;
}
这样定义的话, 我们不用必须传递两个参数, 所以有了选择性
只读属性
interface Point {
readonly x: number;
readonly y: number;
}
readonly vs const
最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用const，若做为属性则使用readonly。
类
看到这里, 老司机估计要开心的笑了, 心想这段我认识
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
配上TS的类型, 更酸爽
继承
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);
构造函数
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter: Greeter;
greeter = new Greeter("world");
console.log(greeter.greet());
构造函数在类实例化的时候会自动执行
修饰符(public, private, protected)
public 代表公用, 外部内部都可以调用
private 代表私有, 只能在内部调用
protected 代表受保护, 除了在内部可以调用, 还可以在派生类(继承,也就相当于有父子关系的类中)中使用
函数
函数类型
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function(x: number, y: number): number { return x+y; };
推断类型
你会发现如果你在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会自动识别出类型：
// myAdd has the full function type
let myAdd = function(x: number, y: number): number { return x + y; };
// The parameters `x` and `y` have the type number
let myAdd: (baseValue:number, increment:number) => number =
function(x, y) { return x + y; };
可选参数和默认参数
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
let result3 = buildName("Bob", "Adams"); // ah, just right
剩余参数
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
泛型
之前没有听说过泛型的,大概介绍一下
像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
// 不用泛型的话，这个函数可能是下面这样：
function identity(arg: number): number {
return arg;
}
我们需要一种方法使返回值的类型与传入参数的类型是相同的。 这里，我们使用了类型变量，它是一种特殊的变量，只用于表示类型而不是值。
function identity<T>(arg: T): T {
return arg;
}
我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。 之后我们再次使用了T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。
// 我们定义了泛型函数后，可以用两种方法使用。 第一种是，传入所有的参数，包含类型参数：
let output = identity<string>("myString"); // type of output will be 'string'
// 第二种方法更普遍。利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定T的类型：
let output = identity("myString"); // type of output will be 'string'
模块
TypeScript与ECMAScript 2015一样，任何包含顶级import或者export的文件都被当成一个模块。
导出
Validation.ts
export interface StringValidator {
isAcceptable(s: string): boolean;
}
ZipCodeValidator.ts
export const numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
导出语句
导出语句很便利，因为我们可能需要对导出的部分重命名，所以上面的例子可以这样改写：
class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator };
导入
import { ZipCodeValidator } from "./ZipCodeValidator";
let myValidator = new ZipCodeValidator();
可以对导入内容重命名
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
let myValidator = new ZCV();
大概就先写这么多吧, 算是简单的总结 ,也方便回头简单回顾. 后续继续加一些其他的. 如果需要更深层次了解, 直接去看官网就行. 大概了解了这么多, 我觉得就可以开始上手写ts了.
