typeScript
typeScript由微软研发的编程语言，是 JavaScript 语言的超集，代码又最终会编译成 JavaScript 来执行
一、安装
$ npm install -g typescript
二、编译
$ tsc greeter.ts
基本类型
1、布尔
let createDone: boolean = false;
2、数字
let createNumber: number = 10;
3、字符串
let createString: string = 'aaa';
let showString: stinrg = `hello ${createNumber}`
4、数组
let list: number[] = [1,2,3]
let listString: string[] = ['1','2','3']
let numandString: (number | string)[] = ['1',2,3]
5、元组 Tuple
允许一个已知的元素数量和类型的数据
let x: [string, number];
x = ['hello', 10]
6、枚举
enum Color { Red, Green, Blue };
let c: Color = Color.Green
7、任意类型 any
let notSure: any = 4; // any 可以对不同类型的值
notSure = 'a string instead';
let list: any[] = [1, true, 'free'];
list[1] = 100
8、空值 void
void 表示没有任何类型，一个函数无返回值时返回类型是void;
function warnUser(): void(){
console.log('...');
}
let unusable: void = undefined;
9、Object
function create(o: object | null):void;
create({ prop: 0});
10、Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
11、Never 永不存在值的类型
function infiniteLoop(): never {
while (true) {
}
}
12、类型断言 <>、as
断言有两种写法<>和as，用来指定一个值的类型
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
解构
1、解构数组
let input = [1, 2];
function f([first, second]: [number, number]){
console.log(first);
console.log(second);
}
f(input);
接口
1、interface来做成定义的接口
interface SuperConfug {
color: string;
width: number;
}
function printLabel(super: SuperConfug) {
console.log(super.color);
}
let myObj = {color: 'blud', width: 100};
printLabel(myObj);
2、readonly 表示只读，不能对其属性进行重新赋值
interface Point {
readonly x: number;
readonly y: number;
}
3、?表示属性是可选的
// [propName: string]: any 表示允许 obj[xxx] 这样的动态属性
interface SquareConfig {
color?: string;
width?: number;
[propName: string]: any;
}
4、函数接口
interface SearchFunc {
(source: string, subString: string): boolean;
}
函数
1、参数
function fn(source: string, subString: string){
let result = source.search(subString);
return result > -1;
}
fn('aaa', 'bbbbb');
2、为函数定义类型
function add(x: nubmer, y: number): number {
return x + y;
}
2、索引类型
interface StringArray {
[index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
泛型
泛型允许延迟编写类或方法中元素的数据类型
function identity<T>(arg: T): T{
return arg;
}
function main() {
const result = identity<number>(1);
}
类
1、创建类
class Greeter {
greeting: string;
constructor(message: string){ // 定义message为字符串类型
this.greeting = message;
}
greet(){
return `Hello, ${this.greeting}`;
}
}
let oGreeter = new Greeter('111');
2、继承
class Animal {
move(distance: number = 0) {
console.log(`Animal moved ${distance}.`);
}
}
class Dog extends Animal {
bark() {
console.log('Woof! Woof!');
}
}
const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();
3、增加了public, private(不能被外部访问), protected（不能被外部访问，只能被内部和继承访问）, readonly 等访问控制修饰符
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}.`;
}
}
readonly属性：
class Person {
readonly name: string = 'john'; // 我只读
constructor(theName: string) {
this.name = theName; // 可以
}
setName() {
this.name = 'lili'; // 报错
}
}
4、静态属性static
static成了所有实例共有的成员
class Person {
static globalPeopleCount: number = '7000000000';
}
const john = new Person();
john.globalPeopleCount += 1;
const lili = new Person();
lili.globalPeopleCount // 7000000001
5、抽象类
不能被实例化的类型，目的就是用来继承
abstract class Animal {
abstract makeSound(): void;
move(): void {
console.log('roaming the earch...');
}
}
配置
1、node
$ npm install -g ts-node // 安装ts-node来执行ts文件
$ ts-node server.ts // 执行
2、react配置
$ npm install @types/react
2、tsconfig.json
{
"compilerOptions": {
"module": "commonjs", // 表示这是一个 Node.js 项目，使用 CommonJS 模块机制。
"moduleResolution": "node",
"target": "es6", // 指定将代码编译到 ES6
"rootDir": "src", // 指定源码输入目录和编译后的代码输出目录
"outDir": "dist",
"sourceMap": true,
"noImplicitAny": true, // 开头的几个选项指定一些更严格的检查
"noImplicitReturns": true,
"noImplicitThis": true
}
}
3、TSlint
$ npm install tslint -g
根目录创建tslint.json:
{
"extends": [ "tslint:recommended" ],
"rules": {
"no-console": [ false],
"only-arrow-functions": [ false ]
}
}
$ tslint --fix src/**/*.ts // 执行
4、webpack中使用
$ npm install ts-loader typescript --save-dev
webpack.config.js
module.exports = {
entry: './app.ts',
output: {
filename: 'bundle.js'
},
resolve: {
extensions: [ '.ts', '.tsx', '.js' ]
},
module: {
loaders: [
{
test: /.tsx?$/
loader: 'ts-loader'
}
]
},
};
tsconfig.json中配置
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true
}
}
5、小程序
https://segmentfault.com/a/1190000008175944
| https://github.com/semlinker/awesome-typescript // 合集
| https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Basic%20Types.html
| https://mp.weixin.qq.com/s/Oyawvb5BD-OKvMuF2tQ0pw?
| https://www.jianshu.com/p/f317a3c01b58
