|
什么是typescript？
中文官网地址：点击
typescipt的优势
一个第特性叫做类型检测
在打字稿里面的英文运行为变量指定类型的，比如当你为这个变量指定数字类型的值的时候，IDE会做出类型检查，
然后告诉你这里可能会有错误，这个特性会减少你在开发阶段犯错误的几率。
第二个特性是语法提示
在IDE里面去编写打字稿的代码时，IDE会根据你当前的上下文，把你能用的类，变量，方法和关键字都给你提示出来，
你只要直接去选就可以了，这个特性会大大提升你的开发效率
第三个特性是重构
重构是说你可以很方便的去修改你的变量或者方法的名字或者是文件的名字，当你做出这些修改的时候，IDE会帮你自动引用这个变量或者调用这个方法地方的代码自动帮你修改掉，这个特性一个是会提高你的开发效率，另一个是可以很容易的提升你的代码质量
字符串特性
1.自动换行，需要``包裹的字符串，（键盘输入服切入到中文，用esc下面那个键可以打出来）
2。字符串模版，在字符串中替换，展位符号为$ {xx变量或者函数}
参数特性
参数类型：即在参数名字后面通过冒号来指定参数的类型
从图片上可以看出，指定类型后，其他类型赋于这个变量，编译器直接飙红了
打字稿的类型推断机制：如果没有显式声明变量的类型，那么第一次赋值的类型就是这个变量的类型，那么第二次在赋于其他类型的值，编译器将报错
如果又需要这个变量是整数类型又需要这个数的类型是字符串类型，这就变成了类型不固定，那么就需要用到任何这个关键字
在函数中的类型：
参数默认值：
在参数后面用等号来指定参数的默认值
运行结果：
可选参数：
在方法的参数声明后面用问号来标明此参数为可选参数
运行结果:
方法可变参数
语法: ...参数名称
内部解析为一个数组
运行结果:
展开
展开操作符正与解构相反。 它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。 例如：
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
这会令bothPlus的值为[0, 1, 2, 3, 4, 5]。 展开操作创建了 first和second的一份浅拷贝。 它们不会被展开操作所改变。
generator函数:
控制函数的执行过程,手工暂停和恢复代码执行
function* say(name: string): void
{
console.log(`name:${name}`);
yield;
console.log('finish');
}
let sayf = say('hello');//无任何输出
sayf.next();//输出 name:hello
console.log('test');
sayf.next();//输出finish
运行结果:
析构表达式:
通过表达式将对象或者数组拆任意数量的变量
function getDesc()
{
return {
name: `小明`,
age:22,
}
}
let { name } = getDesc();
console.log(`name ${name}`);
运行结果:
如果名称不一样就会找不到,可以通过一种别名的方式,找到这个变量的值
function getDesc()
{
return {
name: `小明`,
age:22,
}
}
let { name } = getDesc();
console.log(`name ${name}`);
let { name:namex } = getDesc();//将name赋值给namex
console.log(`namex ${namex}`);
运行效果:
析构表达式从数组中取数据:
区别于对象中取数据是用{},而数组中取数据使用[]
let aa = [3, 1, 4, 5];
let [num1, num2] = aa;
console.log(`num1:${num1} num2:${num2}`);
运行结果:
可以看出是数组是按位置取的,那么我们要取第三个和第三个怎么办呢？
let aa = [3, 1, 4, 5];
let [num1, num2] = aa;
console.log(`num1:${num1} num2:${num2}`);
let [, , num3, num4] = aa;//拿第三个和第四个
console.log(`num3:${num3} num4:${num4}`);
运行结果:
用一个数组来接收:
let aa = [3, 1, 4, 5];
let [num1, num2] = aa;
console.log(`num1:${num1} num2:${num2}`);
let [, , num3, num4] = aa;//拿第三个和第四个
console.log(`num3:${num3} num4:${num4}`);
let [, , ...others] = aa;//拿第三个和第四个
console.log(`others:${others}`);
运行结果:
箭头表达式:
用来声明匿名函数,消除传统匿名函数的this指针问题
箭头表达式:可以消除传统匿名函数的this指针问题
typescipt的循环语法:
forEach() for in和for of
let arr = [`小明`, `小丽`, `小王`];
arr.forEach(a => console.log(a));
forEach缺点: 不支持break;
forin循环:
let arr = [`小明`, `小丽`, `小王`];
//arr.forEach(a => console.log(a));
for (let a in arr)
{
console.log(`a=${arr[a]}`);
}
执行结果:
for of循环:
let arr = [`小明`, `小丽`, `小王`];
//arr.forEach(a => console.log(a));
for (let a of arr)
{
console.log(`a11==${a}`);
}
运行结果:
for (let s of 'hello')
{
console.log(`s==${s}`);
}
typescript面向对象
typescipt类和字段的修饰符:public private 和protected;其作用和其他语言类似
class Person
{
public name: string;//默认就是public,其他修饰符:private,protected
//方法默认也是public
public eat(): void {
console.log(`${this.name} eating`);
}
}
let p = new Person();
p.name = `小王`;
p.eat();
let p2 = new Person();
p2.name = `小李`;
p2.eat();
运行结果:
带构造函数的类:
class Person
{
public name: string;//默认就是public,其他修饰符:private,protected
constructor(name: string){
this.name = name;
}
//方法默认也是public
public eat(): void {
console.log(`${this.name} eating`);
}
}
let p = new Person(`小王1`);
p.eat();
let p2 = new Person(`小李2`);
p2.eat();
运行结果:
类的继承
extends关键字,super调用父类的方法
class Person
{
public name: string;//默认就是public,其他修饰符:private,protected
constructor(name: string){
this.name = name;
}
//方法默认也是public
public eat(): void {
console.log(`${this.name} eating`);
}
}
class Man extends Person{
private isMan: boolean;
constructor(name: string, isMan: boolean) {
super(name);
this.isMan = isMan;
}
eat(){
console.log(`我是${this.name},我是${this.isMan ? `男人` : `女人`}`);
}
}
let p = new Person(`小王3`);
p.eat();
let p2 = new Man(`小李3`,true);
p2.eat();
let p3 = new Man(`小丽3`,false);
p3.eat();
运行结果:
特殊用法:
方法参数作为成员变量
class Pereron{
constructor(public name: string)//相比与普通构造方法参数增加一个修饰符,比如public
{
}
say(): void{
console.log(`${this.name} saying`);
}
}
let p = new Pereron('小丽');
p.say();
typescript的范型
<类型> 尖括号语法
接口
接口是建立某种代码约定,使得其他开发者在调用某个方法或者创建类时必须遵循接口所定义的代码约定
作为方法参数类型声明:
interface IUser
{
name: string;
age: number;
}
class User{
constructor(public config: IUser)
{
}
say(): void{
console.log(`name=${this.config.name} age=${this.config.age}`);
}
}
let user = new User({ name: `张三`, age: 12 });
user.say();
运行结果:
接口约定行为(方法)
interface Animal
{
eat():void;
}
class Dog implements Animal
{
eat(): void
{
console.log(`我吃狗粮`);
}
}
class Cat implements Animal
{
eat(): void{
console.log(`我吃猫粮`);
}
}
let dog = new Dog();
dog.eat();
let cat = new Cat();
cat.eat();
运行结果:
类型定义文件(*.d.ts)
类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包,如：JQuery
.d.ts文件 一般会暴漏一个$xx变量,提供给外部调用,可以使用的 $('xxx").xxFunction();
TypeScript范型：
function add<T>(arg: T):T
{
return arg;
}
function add<T>(arg: T):T
{
return arg;
}
let res = add(9);//正确
let res2 = add<String>(9);//报错
let res3 = add<String>(`9`);//正确
function getData<T>(args: Array<T>): Array<T>
{
return args;
}
let arrs = getData<string>([`1`, `2`, `3`, `4`]);
在范型里使用类类型
在typeScript使用范型创建工厂函数,需要引用构造函数的类类型.比如:
function create<T>(c: {new():T}):T {
return new c();
}
一个更高级的例子，使用原型属性推断并约束构造函数与类实例的关系
class BeeKeeper {
hasMask: boolean;
}
class ZooKeeper {
nametag: string;
}
class Animal {
numLegs: number;
}
class Bee extends Animal {
keeper: BeeKeeper;
}
class Lion extends Animal {
keeper: ZooKeeper;
}
function createInstance<A extends Animal>(c: new () => A): A {
return new c();
}
createInstance(Lion).keeper.nametag; // typechecks!
createInstance(Bee).keeper.hasMask; // typechecks!
枚举
typescript支持数字和基于字符串的枚举
enum Direction1 {
LEFT,
RIGHT,
}
let res1 = Direction1.RIGHT;//输出为1,默认数字枚举,从0开始
console.log(`res1:${res1}`);
enum Direction2
{
LEFT = 1,
RIGHT,
}
let res2 = Direction2.RIGHT;//输出为2,默认指定数字枚举,并且初始值为1
console.log(`res2:${res2}`);
enum Direction3
{
LEFT = `left`,
RIGHT = `right`,
}
let res3 = Direction3.RIGHT;
console.log(`res3:${res3}`);
|
客服电话
APP下载
官方微信
请发表评论