简介
- 微软开发
- Javascript超集
- 遵循ES6
Google 使用 TypeScript 开发了 Angular2框架
运行环境 概念，语法，特性
ES5、ES6 是TypeScript规范 TypeScript 是JavaScript 超集
TypeScript - compiler -> JavaScript
在线compiler http://www.typescriptlang.org/index.html
安装开发环境
# 确保npm已安装
npm --version
6.9.0
# 安装
npm install -g typescript
# 查看版本
tsc --version
Version 3.7.4
# 编译
tsc demo.ts
demo.ts
exports class Demo{}
转换后的代码
"use strict";
exports.__esModule = true;
var Demo = /** @class */ (function () {
function Demo() {
}
return Demo;
}());
exports.Demo = Demo;
使用IDE WebStrom 配置保存编译 1、打开 WebStrom -> Preferences -> Languages & Frameworks -> TypeScript 2、设置 Node interpreter 和 TypeScript 3、勾选 Recompile on changes
特性字符串特性 1、多行字符串
var name = `
first line
second line
`
2、字符串模板
var name = `hello ${name} ${getName()}`
3、自动拆分字符串
function test(template, name, age){
}
var name = 'Tom',
var getAge = function(){
return 18
}
test`my name is ${name} i'm ${age}`
//相当于 test(["my name is ", " i'm ", ""], name, age)
4、指定类型
// 指定变量类型
var woname: string = "Tom";
var alias: any = '12';
var age: number = 12;
var man: boolean = true;
// 定义类中元素类型
class Person {
name: string;
age: number;
}
var person = new Person();
person.name = "Jack";
person.age = 23;
console.log(person);
5、函数参数
// 指定函数参数和返回值类型
function test(name: string): void {
}
// 设置默认参数, 要声明到最后
function test2(name: string = 'default'): void {
}
// 设置可选参数,要声明明到必选参数之后
function test3(age?: number, name: string = 'default'): void {
}
test2('demo')
test3()
// 任意数量参数
function test4(...args) {
args.forEach(arg => {
console.log(arg);
})
}
test4(1, 2, 3)
// 解包数组ts不支持
function test5(a, b, c) {
}
var args = [1, 2, 3]
test5(...args)
6、generator函数
// generator函数，手工控制程序执行 ts不支持
// babeljs: https://www.babeljs.cn/repl
function* test6() {
yield;
console.log("log");
}
test6().next()
function* getStock(num: number) {
let count = 0
while (true) {
yield Math.random()
if (count > num) {
break
}
}
}
console.log(getStock().next().value)
7、析构表达式
// 对象析构表达式, 可以取别名, 获取嵌套表达式内容,可以有多余的值
const { name1: name2, age1: { age2 } } = {
name1: "Tom",
age1: { age2: 23 },
}
console.log(name2, age2);
// 数组析构表达式，位置取
var [a, b, ...others] = [1, 2, 3, 4];
console.log(a, b, others);
// 1 2 [ 3, 4 ]
8、箭头函数
// 箭头函数匿名表达式, 消除this带来的问题
var sum = (arg1, arg2) => { arg1 + arg2 };
console.log([1, 2, 3, 4].filter(value => value % 2 == 0));
// [ 2, 4 ]
9、循环
// forEach 循环
var list = [1, 2, 3];
list.forEach(value => {
console.log(value);
});
// for-in循环打印下标
for (let index in list) {
console.log(index);
}
// for-of循环打印值
for (let value of list) {
console.log(value);
}
// 打印字符串
// for (let s of 'munber') {
// console.log(s);
// }
10、面向对象
// class是TS和核心
class Student {
// 访问控制符，默认
public name;
// 外部不能访问，只能在内部访问
private age;
// 内部和子类访问，外部不能访问
protected sex;
// 构造函数，实例化时候被调用, 可以申明属性
constructor(public school: string) {
console.log("constructor");
}
eat() {
console.log("eat");
}
}
// 实例化
let s1 = new Student('school');
s1.name = 'Tom';
console.log(s1.school);
s1.eat();
11、类的继承
class LittleStudent extends Student {
// 子类自己的数据
code: string;
constructor(code: string) {
// 必须要调用父类构造函数
super('school');
this.code = code;
console.log("LittleStudent");
}
work() {
// 调用父类的方法
super.eat();
this.eat();
}
}
let ls1 = new LittleStudent('LittleStudent');
ls1.eat();
ls1.work();
12、泛型
// 泛型 只能放某个类型元素
let intList: Array = [];
intList.push(1);
// intList.push('2'); 报错
13、接口
// 接口 代码约定
interface IHuman {
name: string;
age: number;
}
class HumanImpl implements IHuman {
// 实现接口的内容
name: string;
age: number;
constructor(public config: IHuman) {
}
}
new HumanImpl({ name: 't', age: 12 });
14、模块，重用单元
a.ts
// 不对外暴露
var var0;
function func0() {
}
class Clazz0 {
}
// 对外暴露
export var var1;
export function func1() {
}
export class Clazz1 {
}
b.ts
// 导入其他模块对外暴露的内容
import { var1, func1, Clazz1 } from './a';
console.log(var1);
func1()
new Clazz1()
15、注解 说明信息，与业务逻辑无关
16、类型定义文件
类型定义文件 *.d.ts 使用已有的工具包，如JQuery github 工具 typings
17、总结 基本概念和优势 开发环境 语法特性
